Understanding CSS Posted on March 31st, 2006 by Joe Lencioni

For the most up to date version of this article, please visit the GTS wiki.

Within the context of the WWW, Cascading StyleSheets (CSS) are powerful sets of rules that tell clients like web browsers how to render documents. Currently these documents are most often written in XHTML, HTML, or a hybrid of the two. CSS is one of the most important things you can learn if you are interested in creating quality websites.

Why Use CSS?

While there are many arguments for using CSS, I personally use it for the following reasons:

• I want total control over every element on my website
• I want to be able to redesign an entire website by changing only one document
• I want my pages to load faster
• I want search engines to like my page
• I don’t want my design to get in the way of my content
• Everybody else is using it

CSS Dissected

Technically speaking, a stylesheet is a collection of case-sensitive rule sets and comments. The following is a simple example of two rule sets preceeded by a comment:

/* Headers */

h1 {
  font-weight: normal;
  font-size: 2.5em;
  color: #000;
  background-color: #1a1a1d;
}

h2 {
  font-weight: bold;
  font-size: 2em;
  color: #111;
  border-bottom: 1px solid #333;
}

Rule sets are composed of selectors and declaration blocks. Selectors designate which elements the following declaration block should be applied to. Likewise, declaration blocks define the style of the elements (specified in the preceeding selector) in a semicolon-delimited list of properties and value pairs (i.e. font-weight: bold; font-size: 2em;). Declaration blocks are encapsulated by curly brackets {}.

Class and ID Selectors

If you wish to style specific elements on a page instead of general elements such as all <h1> elements, use class and ID selectors. Classes and IDs are assigned to elements in the XHTML document as follows:
<h1 class="highlight" id="pageTitle">My Page Title</h1>

While classes and IDs function similarly, the fundamental difference is that multiple elements on a single page can be assigned the same class whereas IDs must be unique per page. Additionally, you can assign multiple classes to an element in a space-delimited list:
<h2 class="highlight error">A Section</h2>

Therefore, if you have an instance of element that serves a special purpose for any particular page and requires a special style that is different than the rest of the same elements on the page, use an ID. However, if you have a set of elements, some of which you wish to style, use a class.

Once you have your classes and IDs set up in your XHTML document, you can style these elements using class and ID selectors. Class selectors take the form of a period (.) followed by the class name. For example, if you had some elements with classes of “highlight”, your class selector for those elements would look like “.highlight”. ID selectors take the form of a pound (#) followed by the ID name. For example, if you had an element with an ID of “pageTitle”, your ID selector for that element would be “#pageTitle”. Remember that class and ID selectors are case-sensitive.

Example XHTML:

<h1 id="pageTitle">CSS is Neat</h1>
<p>This is my first paragraph. It is short.</p>
<h2 class="highlight">Highlighted Header</h2>
<p class="highlight">This is my second paragraph. I intend to
  highlight it in some way.</p>

Example CSS:

#pageTitle {
  font-size: 4em;
  color: #000;
  border-bottom: 1px dashed #000;
}
.highlight {
  color: #900;
}

See it in action

Additionally, you can use element selectors with class and ID selectors to be more specific. The following example styles only the <h1> element with an id of "pageTitle" and the <p> elements with a class of "highlight":

h1#pageTitle {
  text-align: center;
}
p.highlight {
  font-weight: bold;
}

See it in action

Units

When specifying the size of things, you are required to specify a unit of measurement. If you are creating a stylesheet for screen media, appropriate units are em (ems), ex (exs), px (pixels), and % (percent). The W3C has a excellent and detailed description of how to appropriately use units.

Grouping Selectors and Shorthand Values

There are many properties available to use, so your CSS files can get large fairly quickly. Luckily, there are some shorthand CSS techniques that will save you time and make your CSS files smaller.

You should group selectors in comma-delimited lists to apply the same rule set to multiple types of elements on a page:

p, li, h1 { ... }

You should also use shorthand value notation when appropriate. For instance, take the padding property. You can style an element's padding as follows:

h1 {
  padding-top: 0;
  padding-right: 1px;
  padding-bottom: 2px;
  padding-left: 3px;
}

Or alternatively, you can style padding in a single property:

h1 {
  padding: 0 1px 2px 3px;
}

The order of the four values is important. They are interpreted in clockwise order starting from the top (top, right, bottom, and left). Also, note that when using the number 0, you often do not need to specify a unit because zero is the same in all units.

Nesting

While you certainly are able to assign a class (see also: Classitis) to every element in your document, it is important to be conservative through nesting and better selectors. For example, you could create the following unordered list:

<ul>
  <li class="highlight">A list item</li>
  <li class="highlight">A list item</li>
  <li class="highlight">A list item</li>
</ul>

with the following rule set:

li.highlight { ... }

Preferrably, you should assign the class to the containing element and style appropriately:

<ul class="highlight">
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

ul.highlight li { ... }

Additionally, you can nest elements infinitely deep:

<div id="pageContent">
  <div id="sideBar">Sidebar content</div>
  <div id="mainBody">
    <p>Main body paragraph</p>
    <p>Main body paragraph</p>
    <p class="highlight">Highlighted paragraph</p>
  </div>
</div>

div#pageContent div#mainBody p.highlight {
  color: #0f0;
}

See it in action

Specifically, What's !important?

Because CSS is cascading (elements can be styled incrementally and across multiple files), it is important to understand how the client interprets the rules and decides which ones are important. The client reads everything in the order that it is defined and places highest importance on the last identical declaration. For example, the following CSS will make paragraph text bold and red:

p { 
  color: #000;
  font-weight: bold;
}
p { color: #00f; }
p { color: #f00;}

See it in action

Additionally, the client places higher importance elements that are selected more specifically, even if they come before overwriting rule sets that are less specific. This idea is called specificity. For example, the following CSS will make all paragraphs with a class of highlight red and all other elements with a class of highlight blue:

p.highlight { color: #f00; }
.highlight { color: #00f; }

See it in action

Likewise, the following CSS will make all paragraphs with a class of highlight that are inside of a div red and all other paragraphs with a class of highlight blue:

div p.highlight { color: #f00;}
p.highlight { color: #00f; }

See it in action

Finally, the !important keyword will override other declared styles. This technique, however, should be avoided if possible. The following CSS will make all elements with a class of highlight red:

.highlight { color: #f00 !important; }
p.highlight { color: #000; }

See it in action

Using CSS on a Webpage

While it is possible to use CSS on a webpage by typing style definitions directly into individual elements, the best advantages CSS offers are only available by creating rule sets in separate documents and linking them in. The recommended method is using the <link> tag in the head section of the XHTML document as follows:

<head>
  <title>My XHTML Document</title>
  <link type="text/css" rel="stylesheet" href="style.css"
  media="screen" />
</head>

Think About the Media

XHTML documents can be viewed on a variety of different media from computer monitors to print to screen readers for the visually impaired. You can create separate stylesheets for the different media that repurpose the same document appropriately. While the W3C CSS 2.0 specification allows for nine different media types, screen and print are the two most popular. Following is a list of all nine media types:

• aural
• braille
• emboss
• handheld
• print
• projection
• screen
• tty
• tv

For example, to specify a stylesheet for screen and a separate one for print, use the following syntax in the <head> element:

<head>
  <title>My Nicely Printable XHTML Document</title>
  <link type="text/css" rel="stylesheet" href="style.css"
  media="screen" />
  <link type="text/css" rel="stylesheet" href="print.css"
  media="print" />
</head>

Get a Jump Start

If you would like a jump start on creating a new website, feel free to use and modify my base XHTML page template as a starting point.

CSS Reference

• CSS2 Specification
• Property index
• Length units
• Effecient CSS with shorthand properties
• Box model
• Interactive CSS Box Model Demo
• Media types

Additional Reading

• A List Apart — explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
• CSS Beauty — provides its audience with a database of well designed CSS based websites from around the world
• CSS Zen Garden — invites you to relax and meditate on the important lessons of the masters
• CSS Crib Sheet

Resources

• Firebug Firefox Extension — puts a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
• Web Developer Firefox Extension — adds a menu and a toolbar to the browser with various web developer tools