Suitcase Fusion 3 User Guide for Mac OS - Extensis

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, Third Edition by Ian Lloyd, ISBN-13: 978-0987090850. 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 element, and all
elements, even , are children of the 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.
- 76 -