Specifications

- 64 -

Style

In CSS, the "style" applies to much more than fonts. CSS is used to specify element color, background, size,

position, and many other properties.

Sheets

By defining a style sheets as an independent list, you can better understand how the style—the look of your web

page—is separated from the content of your page, and how this separation can benefit you when you want to

change how your page looks. Instead of changing each element in a page, you can change the definitions in your

style sheet to instantly change your entire page.

Best of all, you can use one style sheet for all the pages in your website. This gives you one place where you can

change the entire look of your site. All that power, waiting for you to start using it.

References

There are several good books and websites devoted to learning CSS and putting it to work for you. You can learn the

basics for free online at http://w3schools.com/css/. You can also explore the elements of CSS at

http://www.w3schools.com/css/css_reference.asp. When you have written your first style sheet and want to make

sure it is structurally correct, you can validate it at http://jigsaw.w3.org/css-validator/.

A very good book on creating a website using CSS is Build Your Own Web Site The Right Way Using HTML & CSS,

Second Edition by Ian Lloyd, ISBN 978-0-9804552-7-4. You can get it at online and brick-and-mortar bookstores or

from the publisher directly at http://www.sitepoint.com. (They also have digital editions of this and many of their other

books.)

Inheritance and Cascading

Inheritance

One of the most important concepts about CSS is that of inheritance.

The elements of a web page can inherit their style information from different sources, or can have a specific look all

their own.

Suppose you have a paragraph element with an emphasized word:

The quick brown fox jumps over the lazy dog.

If the em selector does not have a color assigned in your style sheet, it will inherit the color assigned to the p selector.

(Because the element is nested inside the element, it is called a child element, and the is called the

parent element. In the same way, most elements of a page are children of the <body> element, and all elements,

even <body>, are children of the <html> element.)

Children don't always inherit properties from their parents. More specifically, some properties (like color) are

inherited, and some (like border properties) are not. If you have this style sheet

body { border-style: solid; border-width: 5px; border-color: red; }

then the border is applied around the entire page, not around each element in the page. If your goal is to have each

paragraph surrounded by a thick red box, then you need to specify this rule for the p selector, not the body selector.