A Simple Introduction to CSS

by Curtiss   |   last updated May 10, 2008   |   CSS Tutorials ·

First of all, to dispel any misinformation that is apparently still going around on the Internet (and, I, too, once believed this when I was first introduced to CSS), CSS is not capable of inserting content into your pages. CSS cannot be used to create headers and/or footers to be used on every page of your site.

For those of you looking for ways to use the same menu on every page of your site, and keep that menu in a single location so that it’s easy to update, CSS won’t do that for you. That’s what server side includes are for, actually. Server side includes can be used with pure HTML (provided that includes are enabled on your server), with PHP, Perl, ASP or basically any other server-side language.

In fact, CSS does almost the opposite. CSS is intended to separate the content from the design within a Web site. CSS is strictly intended to facilitate the “look” of the pages on your Web site. No content is interpreted from CSS.

Now, for the quick lesson on how CSS works.

First of all, we should examine the name. CSS is an abbreviation of the phrase “cascading style sheets”. Let’s pick that apart for a moment.

Cascading

items that overlap, with each new item taking precedence over the previous

Style

refers to the particular look or appearance of a specific item

Sheet

figuratively, this is intended to refer to a collection of items gathered together in a single location, like a sheet of music

If we put those together, using the meanings I’ve provided, it should give you a general idea of the idea behind CSS. CSS is meant to be a collection of stylistic (or design) definitions that “cascade”, or get overruled by later definitions. The progression is very simple in most cases, and is as follows:

Hardcoded, proprietary definitions are the first definitions interpreted. For instance, the width and height defined in the following tag will only be used if no other applicable style definitions are found within the code:

<img src="blank.gif" width="50" height="50" alt="" />

It should be noted that those dimensions are not part of the CSS definitions. As mentioned above, those are proprietary style definitions, and are always overridden by CSS declarations.

From there, CSS is interpreted in the order it’s located within the file. If you declare some style definitions in the head of your document, then you include an external stylesheet, any definitions within the external stylesheet will override the definitions that you already declared. However, if you then add a style definition within the HTML tag, itself, those will overrule the definitions in the external stylesheet.

There are three important things to remember when dealing with CSS. First, you need to remember that any definitions that have already been declared will persist until they are overridden. For example, if you write the following style definitions:

div {
border: 1px solid #000;
margin: 0;
padding: 1em;
}
div.noborder {
margin: 1em;
padding: 0;
}

Any div that’s assigned the class of “noborder” will still have a 1 pixel, black, solid border because you did not override the border definition declared in the original “div” style declaration.

The second thing to note is that you can actually stop specific style rules from being overruled by later definitions. This does not work in versions of Internet Explorer (IE) earlier than 7, but it works in most versions of all of the alternative browsers, and does work in IE7. The trick is to place the keyword “!important” after the definition, and before the semi-colon that terminates the definition. For example, you could write:

div {
border: 1px solid #000 !important;
margin: 0;
padding 0;
}
div {
border: 5px dashed #ff0;
}

The second “div” style definition would do nothing, because you declared the 1 pixel, solid, black border as “important”, which means it overrules any definitions that follow.

The final important note is that style definitions also cascade according to the specificity of the declaration. If you declare a style definition that is specific to one particular item, then declare a more generic rule later in the stylesheet, the specific rule will override the generic rule. For instance, if you write:

div.noborder {
border: none;
}
div {
border: 1px solid #000;
margin: 0;
}

Then, all divs will have a 1 pixel, solid, black border, unless they are assigned a class of “noborder”. Divs that are assigned to that class will not have a border.

Keep in mind that classes are more specific than generic definitions. Moreover, IDs are more specific than classes. Therefore, if I wrote:

div#thickyellow {
border: 5px solid #ff0;
}
div.noborder {
border: none;
}
div {
border: 1px solid #000;
}

Then, I wrote the following HTML tag:

<div class="noborder" id="thickyellow">This is a div with a thick yellow border</div>

The div defined above would have a 5 pixel, solid, yellow border because I assigned it an ID. An ID is the most specific declaration you can make within CSS.

However, on that same subject, you have to be careful how CSS might interpret items. If you declare a generic ID without declaring which type of HTML tag should be associated with that ID, those style rules can be overridden by other definitions that define the specific type of HTML element associated with those rules. For instance, if you were to use the following style definitions:

#thickyellow {
border: 5px solid #ff0;
}
div.noborder {
border: none;
}

Then, use the same div tag shown above, the div would have no border, because you did not specify that the HTML element with an ID of “thickyellow” is supposed to be a div. Therefore, it finds the next most-specific definition, which is the “div.noborder” declaration.

I hope this quick introduction has been helpful to some. CSS can be extremely confusing once you really start to dig into it. I will write some more detailed CSS tutorials down the line, but this should at least get you started.

To see some amazing examples of what you can do with CSS, please visit the CSS Zen Garden. That is one of the most awe-inspiring Web sites ever created.