Lesson 2: Cascading Style Sheets

Overview of CSS

All browsers have a set of default styles that they apply to a Web page -- for example, unless instructed otherwise, browsers render a page with a white background and black text. In addition, browsers also have a built-in positioning algorithm that they use to position Web content. Cascading Style Sheets simply allow a designer to over-ride the default styles and positioning that a browser would normally use to render a page.

This section is not intended to teach you the details of Cascading Style Sheets! CSS is a complex topic in its own right, and like other computer languages, it is normally taught in a separate course. What I hope to do in this section is review the basic vocabulary of CSS so that when we use Dreamweaver to create CSS styles, everyone will understand, at least in general terms, what we are doing and how the styles work. (Don't worry, Dreamweaver will write the CSS code for you...) And for those students with only a modest background in CSS -- once you see how powerful the language is, perhaps you'll be tempted to sign up for that CSS course!

CSS Syntax

The basic component of CSS is the rule, which specifies the new property values the developer wishes to use.

A rule, in turn, consists of two parts:

For example, if you wish your site to have a black background you would write the rule:

body {background-color: #000000;} 

where body is the selector (and refers to the HTML body tag), and the declarations appear within the curly braces.

Each declaration, in turn, consists of two parts:

We can apply more than one property-value pair to a single selector by simply separating each declaration within the curly braces with a semi-colon:

p {color: #ffffff;
   background-color: #000000;}

This rule instructs the browser to render paragraphs with white text on a black background.

To have the same rule apply to more than one selector, simply separate the selectors with commas.

p, h1, h2, li {color: #ffffff;}

This rule ensures that paragraphs, h1 and h2 headings, and list items are all rendered as white text.

Placing Styles in your Site

CSS rule definitions can appear in three locations in your Web site:

• Inline Styles: these styles are defined using the style attribute of a specific HTML tag within your document and apply only to that instance of the tag. They are rarely used except during site development, when they can provide a quick way to test a style. Note the syntax in the example below -- since an inline style only applies to a single instance of a tag, the name of the tag (p in this instance) is understood to be the selector and only the rule's declaration appears after the style attribute.
  

  <p style="color:#ffffff; font-size: 0.8em;">

• Embedded Styles: these styles appear in the head of an HTML document, enclosed within the HTML style tag, and apply only to the page that contains them. They are commonly used during site development, but are normally moved to a style sheet once development is completed. We will use Dreamweaver to create embedded styles as well as an external style sheet in a later sections of this tutorial.
• External Styles: these styles appear in a separate file, called a style sheet, and apply to every Web page that links to them. Style sheets underlie many of the advantages CSS provides to Web sites -- by moving all styles to a single location that every page on the site can access, we reduce the amount of code in each individual Web page substantially and make it extremely easy to alter the styling of a site. We will learn how to use Dreamweaver to create a style sheet from our embedded styles and how to link our HTML pages to our new style sheet in a later section of this tutorial.

Classes and IDs

So far in our overview we have focused on creating styles that apply to every instance of an HTML tag on our Web site (every p tag, for example). Suppose instead we want to emphasize a small number of special paragraphs on our site by rendering them with red text instead of white. We can't do this using a p tag as our rule selector since that would turn every paragraph red, but we can do this by creating a class style -- a rule for red text that uses a class name as a selector rather than an HTML tag name. We can then indicate which of our paragraphs we want to belong to our new class using the class attribute of the p tag, and only the selected paragraphs will be rendered with red text!

Let's look at a quick example. Class names are always preceded by a period when the class is being defined, so to create a class called redtext, we would write a rule that looks like:

.redtext {color: #990000;} 

Now we can apply that rule to a paragraph by assigning the class name to the paragraph's class attribute:

<p class="redtext">The quick brown fox jumped over the lazy dog.</p>

This paragraph's text now looks like:

The quick brown fox jumped over the lazy dog.

If instead we wish to emphasize only the word "fox", we can surround "fox" with the HTML span tag, and apply the class redtext to the span tag.

<p>The quick brown <span class="redtext">fox</span> jumped 
   over the lazy dog.</p> 

Now only the word "fox" is rendered as red text:

The quick brown fox jumped over the lazy dog.

Using classes we can create rules which pinpoint specific regions in our page that we wish to style independently from their HTML tags. Fortunately, Dreamweaver makes this process extremely easy, and we will practice creating classes soon.

So what is an ID? Like classes, IDs also allow you to attach styles to an individual HTML tag (using the id attribute of the tag rather than the class attribute). However, each ID style can be used only one time on a given page. (This restriction occurs since the HTML id attribute can also be referenced by JavaScript, and JavaScript can behave unpredictably when more than one id on a page has the same name.) To distinguish an ID rule from a class rule, we prefix the ID name with a hash symbol (#) rather than a period. There is another important difference between ID and class rules, but I'll postpone that discussion until we describe the cascade part of Cascading Style Sheets.

Pseudo-Classes

Pseudo-classes are classes that invoke rules only when certain dynamic events (like a mouse click) occur. Unlike regular classes, they can not be defined by a designer; instead, they are pre-defined in the CSS recommendations. A very common use of pseudo-classes is to create a roll-over effect, and we will look at pseudo-classes more closely when we style hyperlinks (HTML a tags) in a later section of this tutorial.

The Box Model

The content of every HTML block element on a Web page is contained within a box, and every box has a number of important properties, three of which are:

• margin, or the space between one box and another
• border
• padding, or the space between the tag's content and the box's border

Normally, boxes have a transparent background and no border, so viewers aren't aware of them, but CSS allows you to style a box's margins, border and padding, along with its other attributes. Here's what happens when I style this paragraph with a 1 pixel wide black border and a light gold background:

Normally, boxes have a transparent background and no border so viewers aren't aware of them, but CSS allows you to style a box's margins, border and padding, along with its other attributes. Here's what happens when I style this paragraph with a 1 pixel wide black border and a light blue background:

The amount of white space between the box's border and the text above and below it is determined by the value assigned to the p tag's top and bottom margin properties. Since I haven't created a special rule for margins, the space you see is determined by the default styles of your browser.

Using CSS to redefine this box's padding, I can push the content of a box "in" from its border:

Normally, boxes have a transparent background and no border so viewers aren't aware of them, but CSS allows you to style a box's margins, border and padding, along with its other attributes. Here's what happens when I style this paragraph with a 1 pixel wide black border and a light blue background:

And I can control the size of a box using CSS by setting a value for the box's width:

Normally, boxes have a transparent background and no border so viewers aren't aware of them, but CSS allows you to style a box's margins, border and padding, along with its other attributes. Here's what happens when I style this paragraph with a 1 pixel wide black border and a light blue background:

I can also do some simple positioning by controlling the box's margins; here I move the box away from the page's left border by adjusting its left margin:

Normally, boxes have a transparent background and no border so viewers aren't aware of them, but CSS allows you to style a box's margins, border and padding, along with its other attributes. Here's what happens when I style this paragraph with a 1 pixel wide black border and a light blue background:

It shouldn't surprised you now to learn that all of the call-outs in this tutorial were created using CSS. The ability to style and position elements using the box model is an important tool for any Web designer, so if you are just beginning to use CSS, you might want to consult a good reference to read more about it.

Positioning

The box model allows you to do very simple positioning by adjusting margin values in order to slide an element up, down, left or right within the location the browser normally would place it, but CSS also provides more sophisticated techniques for controlling the placement of elements on your Web page, including the position property. The position property gives you absolute control over an element's location, even allowing you to move an element out of the normal flow of the document and attaching it either to a different location in the page or "sticking" it against the view port!

The position property doesn't work alone; it is normally used in conjunction with some combination of the top, bottom, left and right properties in order to specify how far and in which direction to move the element, and may also require that the margins of other elements be adjusted to prevent the "positioned" element from overlapping them.

Normally, elements follow each other down the page, separated by their margin settings. The position property has four possible values, three of which move an element with respect to its default location:

Like the box model and the CSS cascade (which we will discuss in the next section), positioning is a complex topic, and I have only hinted at its intricacy here. Anyone wishing to learn more about it should consult a good CSS reference.

The Cascade

We learned earlier that style sheets are separate files which contains the CSS rules a developer wishes to apply to their Web site. So what, exactly, is the cascade in Cascading Style Sheets?

Before I describe the cascade, let me remind you that styles for a single site can be defined in a number of places. Developers have the option to place styles in a style sheet, in the head of a Web page, or even within HTML tags defining a Web page. In addition, each browser comes with its own set of default styles, and users may choose to define personal style sheets (for example, users with poor vision may define a style sheet that will enlarge text and ensure that there is maximum contrast between the page background and the text). So what happens when rules defined in two (or more!) places conflict? Enter the cascade, which determines which definition of a rule will be used, and which one(s) will be ignored.

The CSS cascade uses two criteria -- order and weight -- to choose which rules to honor. Lets look at an example based solely on order first.

Before rendering a site, the browser will examine all of the possible sources for styles in the order given below:

1. The browser's default style sheet
2. The user's style sheet
3. The author's style sheet
4. The author's embedded styles
5. The author's inline styles

Using the values from its own style sheet, the browser will assign values to every property of every HTML tag in the document. The browser will then examine every rule mentioned in the user's style sheet (if one exists), and replace existing property values for HTML tags with the ones defined in the rules in the user's style sheet. After moving through the entire user's style sheet, the browser will then examine the author's style sheet and again replace existing property values with ones defined by the author. The browser will then process any embedded styles, and finally any inline styles, each time replacing existing property values with the ones it encounters in new rule definitions. In this simple case, the styles that will be used to render the site are the ones present after all sources of styles have been processed.

Unfortunately, the cascade is more complicated than this, as it also uses the weight of a rule to determine which values will be overwritten. The rules for weight are complex (see a good text on CSS for more information), but in general, the more specific a rule is the more weight it has.

It's worth noting that any selector which contains an ID is automatically "weightier" than all other selectors (remember that you may have only one instance of each ID per page). Since an ID in a selector guarantees that its associated rule will be used, it's considered good practice to use IDs only when styling a unique and important part of your page, such as your navigation menu, header, page content, and footer.