Learn about CSS

Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content on a web page. When you use CSS to format a page, you separate content from presentation. The content of your page--the HTML code--resides in the HTML file itself, while the CSS rules that define the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the <head> section). With CSS you have flexibility and control over the exact appearance of your page, from precise positioning of layout to specific fonts and styles.

CSS lets you control many properties that cannot be controlled with HTML alone. For example, you can specify different font sizes and units (pixels, points, and so on) for selected text. By using CSS to set font sizes in pixels, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.

A CSS formatting rule consists of two parts--the selector and the declaration. The selector is a term (such as P, H1, a class name, or an id) that identifies the formatted element, and the declaration defines what the style elements are. In the following example, H1 is the selector, and everything that falls between the braces ({}) is the declaration:

The declaration consists of two parts, the property (such as font-family), and the value (such as Helvetica). The preceding example creates a style for H1 tags: The text for all H1 tags linked to this style is 16 pixels in size, and uses Helvetica font and bold.

The term cascading refers to your ability to apply multiple styles to the same element or web page. For example, you can create one CSS rule to apply color and another rule to apply margins, and apply them both to the same text on a page. The defined styles "cascade" to the elements on your web page, ultimately creating the design you want.

A major advantage of CSS is that it can be updated easily; when you update a CSS rule in one place, the formatting of all of the documents that use the defined style are automatically updated to the new style.

Comments

wee willie said on Sep 29, 2005 at 7:14 AM :

You use of fixed pixels for font size is agains the spirit of good css
you should enable 'scaleability' from the outset
hence use '%' or 'em's' to allow this to happen

Please correct this tutorial

jonmichael said on Sep 30, 2005 at 3:32 PM :

Thanks for the suggestion. We will look into it for the next round of tutorials.

No screen name said on Sep 9, 2006 at 8:54 PM :

I'm not sure where in the CSS section this should go.

The CSS section seems to be focused on CSS1 tags. There is no mention that I saw of the CSS2 stuff that lets you specify user preference based settings.

I also saw no indication of "How to set stuff back to the user's defaults". I know that if I'm putting a style into a <P>, when the P ends I'm back to the user's defaults. I know (from the W3c docs) how to set color and background back to the user's defaults, if I need to make a section look "normal" (using default settings for buttons, menus, drop-downs, etc).

I didn't see anything on how to set the font back to normal if it is changed.

To clarify: If I want to override an outer CSS, I saw (on the W3C web docs) how to get the color, background color, size, etc, back to normal, and how to make my buttons or dropdowns look normal. I can't figure out how to make normal text look the same ("Font-family" doesn't have a "default" setting), so I can't figure out how to override a <body> format, nor do I see something else to use besides putting style tags on every P and TABLE, so that my FORM looks like the system stuff.

Please update this part of the tutorial. I feel like I'm missing something obvious.