The Order Cascading Style Sheets Cascade - dummies

By David Karlins, Doug Sahlin

You might be asking yourself: “Why are style sheet files dubbed cascading style sheets (thus the “C” in CSS)?” Cascading refers to how styles are applied and in what order — that is, which styles take precedence over others. CSS can be implemented in three ways — alone or in combination with each other — on your pages:

  • Inline: Inline CSS refers to styles that are directly in the content. This method is the least desirable because it affects only the content that the styles are directly associated with.

  • Embedded in the head of the HTML document: Like inline styles, embedded styles are defined right in an HTML page, and not through an external style sheet. However, these styles offer more flexibility because they can be applied to many elements within that single page, such as all the paragraphs, in the document.

    These styles do not, however, affect parts of other HTML pages in your site; they apply only to the document in which they’re embedded.

  • External: External CSS affects all the pages of a site. You need to create an external CSS file and then link to that file in the head section of your HTML documents. This way enables you to take advantage of quick sitewide layout control.

Inline styles

Inline styles are coded directly into the body of your document. For example, look at the following HTML for a paragraph:

<p style="color:#000000;">This would be black text</p>

Although inline styles are quick to add on the fly, we don’t recommend this technique. In essence, you’re trading an old style of coding that created hard-to-maintain sites for a new flavor of the same thing.

For example, in the code that follows, you can see that this style is applied directly within the <p> tag and will affect only this one instance of a paragraph. No other paragraphs will take on the attributes unless you apply the same style attributes to them.

<p><font color="#000000">This would be black text</font></p>

The problem with coding this way is that if you decide you want to change the color of the text on your site — or anything else coded with inline styles — you have to find all the places that you used these inline styling techniques and change them. Inline styles also make a lot of clutter that isn’t necessary.

Styles embedded in the head of the document

When you embed styles, you create your CSS styles in the head portion of your HTML document and refer to them in the HTML, like this:

<title>Welcome to Our Site!</title>
<style type="text/css">
<!--p {color: #990099}→
</head><body><p>This text would be purple</p></body>

The advantage to using this technique is that you can have some specialized styles embedded in just one HTML document. This can come in handy if you want a special page for an event. The other pages of your site aren’t affected by styles that are embedded this way or created inline.

If you’re creating styles that you intend to use throughout your site (which is most often the case), don’t use this technique. You’ll end up with a site that’s a pain in the neck to update because you’ll have to open each document and edit each embedded style individually.

External style sheets

Using an external style sheet is generally the preferred method, especially if you want to implement your styles across the whole site. All the CSS style information is created in an external file(s). The file is linked to the HTML document in the head portion of the HTML, like this:

<link rel="stylesheet" href="style1.css" type="text/css" />

This code links the CSS file to the HTML document. The CSS file is style1.css and is in the same folder as the referring HTML page.

Note: The external style sheet’s file extension is .css. When a visitor goes to your site, the CSS is loaded along with the HTML, and the page looks great. The major advantage to this technique is that if you want to change anything about your design or layout, you can make a sitewide change by changing the styles in the CSS file. You don’t need to open the HTML files to edit them. Of course, you need to preview your pages before publishing them, but that’s the rule for all web pages.

You can also create multiple style sheets and link them to the same HTML document, like this:

<link rel="stylesheet" href="style1.css" type="text/css" />
<link rel="stylesheet" href="style2.css" type="text/css" />

With this technique, your site can have a unified look and feel, and still have the freedom to have specialized style sheets for particular sections of a large website. To take the earlier example, style1.css might define page background, fonts, and colors and be applied to every page in your site, whereas style2.css might have some particular styles used just in pages that present videos.

In this instance, style1.css would be applied to every page in your site, but style2.css would be applied only to pages with video.