Introduction to CSS

Contents

CSS: Cascading Style Sheets

It is not required to use CSS, but it allows you to define all the styles for your Web site – controlling the appearance – in one document. Making a change in the CSS file will push the updates through to all your pages, saving time and preventing typing errors. You can also use multiple CSS files to serve different purposes: web, print, hand-held device, or different sections of your web site. CSS elements are applied to HTML tags within the body of an HTML file for text and image formatting and page layout (positioning). CSS files are saved with the .css extension.

CSS styles may also be placed within the HTML document in the <head> section or inline with the HTML tag. If styles are placed in multiple locations, styles within the tag receive the highest propriety(overriding internal or external styles), followed by internal styles (within the <head> section), then by external style sheets (the .css document). Browser defaults have the lowest priority.

CSS files must be linked to each HTML page in the head section using the <link … /> tag (note that this tag closes itself). Type, rel, and href are all required. If your CSS files are located in a subfolder, href would need to point to the subfolder.

<link type="text/css" 
     rel="stylesheet" 
     href=”http://www.xyz.com/css/mystyles.css” />

A relative link would look like this:
href="css/mysyles.css"

CSS Syntax

CSS syntax includes three parts: selector {property: value;}. The parts are often broken into several lines for easier reading and organization. The examples will condense the code into single lines.

Selector: The selector is the HTML element (tag) that you wish to describe. Selectors may be further defined by class (when you wish to create different styles for the same elements) or ID (if the style is used only once per document, like with menu items).

Property: Describes what aspect of the element you are defining, such as font, color, margin, border, background, position, etc.

Value: Information such as black, helvetica, 350 pixels, etc. If the value is multiple words, place quotes around the value (“sans serif”). If units are used, do not insert a space between the value and unit (type “350px” NOT “350 px”).

Grouping: You may group selectors when they provide the same formatting to multiple tags - separate the tags by commas, with no spaces. You may group multiple properties within one selector – separated by semicolons. You may also group multiple property values – values are separated by spaces followed by semicolon.

Grouped selectors (all headers are green): h1,h2,h3,h4,h5,h6 { color: #00FF00; }

Grouped properties (h1 is green and centered): h1 { color: green; text-align: center; }

Grouped values (h1 is surrounded by a blue, 1 pixel border): h1 { border: 1px solid #0000FF; }

Class Selectors

Class selectors defined by a period (.) preceding the name and defined in the HTML element by the class attribute. They do not necessarily need to be specifically associated with a single HTML element. For example, a .red class may be used to color the text of a h1, h4, and p.

Example of a class used specifically in the <p> element:

     CSS:
     p.right {text-align:right;}

     HTML:
     <p class="right">This text aligns to the right.</p>

Example of a class used with any element:

     CSS:
     .center {text-align:center;}

     HTML:
     <h1 class="center">This header is center-aligned.</h1>
     <p class="center">This paragraph is also center-aligned.</p>

ID Selectors

ID selectors can only be used once per document (for example, a page header, footer or menu list). They are defined with the pound sign (#) preceding the name. They are defined in HTML with the id attribute.

Examples of id’s used with the ''h1'' element:

CSS: 
h1 #red {color:#FF000;}

HTML:
<h1 id="red">This header is formatted in red text.</h1>

Comments

Just like “commenting out” in HTML, you may add comments to explain your code, or to hide code that you wish to keep in your file but not to be in use. Comments begin with /* and end with */.

/* This is a comment inside my CSS document. */

Resources

The IT Lab has a library of books on HTML, CSS, XML, Java, Dreamweaver and so much more! Here are more sources online:

  • w3schools This site has everything – tutorials, reference materials and validators.
    • “Try it yourself” w3schools also has an area where you can play with code: one window provides editable code – the other window displays the output. Look to the links along the left side of the home page: HTML Tutorials > Learn HTML or Learn CSS > Examples > HTML or CSS Examples.
  • W3C The consortium for web standards. Code validators are located here.
  • A List Apart TONS of articles and tutorials.
  • CSS Layout Techniques