CSS

Skip Quick Links

Style sheets define display elements for one or more web pages. CSS is display markup, while XHTML elements are structural (logical organization) markup. Styles are specified once in an external style sheet and only referenced in the HTML document. External style sheets can save you a lot of work: You can make global changes to your site almost instantly by editing the .css file. "Cascading" means that multiple style sheets can be applied to one web page. Different media can automatically use different .css files so it is easy to repurpose your content.

A CSS Example

The following two screen shots are of the home page of the Zen Garden website (www.csszengarden.com). The only change that has occurred is that the reference to the CSS style sheet has changed, resulting in a dramatic site-wide change in style and layout!

Style One

One screenshot example of a Zen Garden design.



Style Two

Another screenshot example of a Zen Garden design.

Back to Top

Why CSS?

Styles were added to HTML 4.0 to solve a problem. Although HTML was to define document structure only, during the browser wars of the late 1990s, Netscape and Microsoft muddied the waters by adding "features" (really hacks) like the <font> and <color> tag. Developers added to the mess by figuring out that <table> code and 1 pixel transparent GIFs could be used to specify complex page layouts in a fairly precise manner - the infamous "table hack".

The W3C stepped in with CSS as part of the HTML 4.0 specification. This allowed developers to once again separate display markup from structural markup.

Referencing CSS

External style sheets are stored in .css files and are referenced using the following methods. Both of these methods must be used inside the tag. The @import rule is preferred!

Using the @import Rule

Using @import inside the <style> tag is preferred because older browsers such as NN 4.x do not understand the @import rule and ignore it. Otherwise, the browser would see the CSS and make a hash of interpreting it.

<style type="text/css"> @import url(./includes/DOR-V1.css); </style>

Using the <link> Tag

Warning icon Warning: This method is visible even to older browsers!

<link rel="stylesheet" type="text/css" href="DOR-V1.css" />

Cascading

Multiple style definitions will cascade into one (successive styles overriding the previous). This is the "Cascading" in "Cascading Style Sheets." Cascading occurs in this order, with each succeeding style overriding the previous.

  1. Browser default
  2. External style sheet (.css file)
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an XHTML element using the "style" attribute)

Back to Top

Content Rework Example

Before:

<tr>
     <td>
     <font face="Times New Roman, Times, serif" size="+2" color="#A5D6FF">L</font><font face="Verdana, Arial, sans-serif" size="0" color="#ff9900">orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</font> <br />      <font face="Times New Roman, serif" size="-2" color="#999999">Cicero</font>
     </td>
</tr>

After:

<div class="mainCopy">
     <div class="subDiv1">
     <blockquote><span class="dropCap">L</span> orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</blockquote>      <span id="signature">Cicero</span>
     </div>
</div>

Checkmark icon Note: In addition to removing all of the <font> tags, etc. and replacing them with styled <div> and <span> tags, we have changed from using table markup for layout to using CSS-positioned <div> tags. This practice corresponds to WCAG 1.0 Checkpoint 5.3 and is recommended for Double A conformance.

CSS Syntax

In our XHTML Content Rework example above, we assigned CSS "classes" to several tags. We can now apply styles to those classes in exactly the way we assigned a style to the <body> tag. To address a CSS class, refer to it by name, preceded by a ".", keeping in mind that the class name is case sensitive!

.mainDiv {
     color: #999;
     border: 1px dotted green;
}

Classes are used for style where multiple instances of that style can occur on the same page. For example, if you wanted to apply a style to a group of hyperlinks (your navigation bar, for example), you would create a CSS class.

The ID Selector

In our XHTML Content Rework example above, we assigned a CSS "id" to the <span> element applied to the signature. A CSS id is used when only a single instance of that style will occur on a given page. CSS id selectors are addressed by id name, preceded by a "#", keeping in mind that the class name is case sensitive!

#signature {
     font-size: x-small;
     font-style: italic;
     font-weight: bold;
}

Back to Top

Matters of Size...

To allow content to scale properly when the visitor "zooms in," sizes should be specified in relative, rather than absolute, units. This is not just a good practice; it is also required for WCAG 1.0 Double A conformance!

Sizing and scaling is a surprisingly complex subject – one that is often subject to heated debate in the CSS online community. This is partially because of the web designer community's desire to have greater control over font display, and partially because the existing solutions are imperfect.

Font Sizing

The W3C recommends using "em" as the relative unit for sizing and defines it as:

"The computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element."

In other words, 1em is equal to 100 percent of the default font for the browser. For most browsers, that's 16px, which is too large for most designers' taste. To get around this, we generally set the initial font value to something smaller than 1em:

body {
     font-size: 0.8em;
}

h1 {
     font-size: 2em;
}

p {
     font-size: 1em;
}

The problem with this approach is that if the visitor sets the "text-size" setting in Internet Explorer to "smaller" or "smallest," the text becomes so small it is unreadable. As Internet Explorer is so popular and the "smaller" text-size setting is a popular one, this is a real problem.

A Recommended Approach

The tiny text problem can be overcome by setting the initial font size to a percentage. When this solution is implemented, the font-size changes between the IE text-size settings do not appear to be as drastic, and we can set a sensible initial text size that will resize to a readable size at "smaller" and "smallest" settings.

body {
     font-size: 100%; /* Initial font size specified as a percentage */
}

h1 {
     font-size: 2em;
}

p {
     font-size: 1em;
}

Checkmark icon Note: The above example has a comment included in the style sheet. CSS comments start with "/*" and terminate with "*/". Everything in between the two is ignored. As style sheets can often be quite long, it is recommended that you comment your styles.

Elastic Design

Another benefit of using ems rather than keywords is that you can use ems to define the dimensions of your entire layout, which will then scale in proportion to the text.

Back to Top

CSS Positioning

The State of California has adopted CSS Positioning as a best practice. In short, this means that the use of the "table hack" to control page layout is no longer accepted practice.

The CSS Positioning properties allow you to specify the left, right, top, and bottom position of an element. They also allow you to set the shape of an element, place an element behind another, and specify what should happen when an element's content is too big to fit in a specified area.

The W3C Box Model

For display purposes, every element in a document is considered to be a rectangular box, which has a content area surrounded by padding, a border, and margins. The illustration below shows these parts.

Illustration depicting the box model

From the outer box to the inner box in the above image we have margin, border, padding, and content. Margins, borders and padding are all optional. For purposes of calculating box position and size they are given a default width of zero unless otherwise specified. Different widths can be set for each side (top, right, bottom, and left) if desired. Margins can even have negative values.

When you specify width or height in CSS, you are specifying the width or height of the outer margin box. (This is not the same as the width and height of the content area if your padding and/or border and/or margins are not zero.)

In converting from a table-based layout, the general idea is to replace the table code that serves as containers for your content with <div> tags. Then, applying CSS Positioning markup, set the position of each <div> tag (using absolute, relative, or float positioning) to lay out the page in the way you wish.

Positioning Methods

  • Absolute Positioning specifies an absolute position of an element relative to the upper left corner of the browser window.
  • Relative Position specifies the position of an element relative to its normal position (the position it would have if you specified no position at all).
  • Float allows text to wrap around an image, among other things.
  • Z-Index allows you to set the vertical position on the page so that one object may overlap another.

CSS Validation

All CSS code should be validated for conformance to W3C recommendations. Online CSS validation is available at jigsaw.w3.org/css-validator

Back to Top

Online CSS Resources

Recommended Reading

  • An excellent guide to adopting standards-based markup is The New York Public Library Online Style Guide: www.nypl.org/styleguide/index.html.
  • Cascading Style Sheets: The Definitive Guide, 2nd Edition, by Eric Meyer. O'Reilly Publishing.