CSS - The Basics

Parts of a Stylesheet

Stylesheets are made up of style rules. Each style rule has two parts: a selector and a declaration. The selector indicates what HTML element(s) to apply the declaration to and the declaration specifies what kind of style to apply; that is, how to present that element. Each declaration has two parts: a CSS property and a value to apply to that property. The property is a presentation effect that what you want to describe, for instance, a margin. The value indicates how that property is affected.

Applying Style to an HTML Document

You can apply stylesheets to HTML documents in 4 ways. Only 3 are well-supported. (1) You can LINK in an external stylesheet that is a text file containing only CSS style rules and comments. (View source to see an example.) This is a good place for rules that will apply to most or all of your Web site. (2) You can embed a stylesheet in the head of an HTML document using a STYLE tag. (View source to see an example.) Good place for rules that apply only to a specific document or override rules defined in an external stylesheet. (3) You can write style rules inline as attributes of HTML tags. (View source and look at the 3rd paragraph tag.) Inlining style defeats the whole purpose and advantage of stylesheets. Use it sparingly if at all. In the CSS1 Specication, the W3C says that inlining style, "Mixes style and content and loses the corresponding advantages of traditional stylesheets" and recommends against inlining style. (4) You can import a stylesheet file into an external or embedded stylesheet and the imported stylesheet will function as though it were part of that stylesheet. (View source and look at the first line of the STYLE element's contents.) Importing is not well supported. Wait until it gets better browser support before using it.

This is a paragraph of text that has inlined style applied to it. Blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah.

View the files:


WebWoman - Your web design & development training superhero!