Designers and desktop publishers have used "style sheets" for many years. If you use Microsoft Word, or Adobe PageMaker you have experienced first hand what a powerful tool styles can be. They provide a consistent look throughout your document, allow you to make changes easily, insure accuracy, and save you time.
HTML has always focused on content over style. When the Web was launched at the European Particle Physics Lab in CERN the scientist were concerned about sharing data, not winning design awards.
As industry embraced the Web, Graphic Artists exerted pressure on the W3C to allow for more control over the look of the pages. In 1996 the W3C put together a draft proposal defining Cascading Style Sheets. This proposal provided CSS code to control the look and layout of the page while, HTML controlled the structure and content. The Web developers eagerly embraced this code and all major browsers are implementing the CSS standards.
Sounds good doesn't it? Well there are a few problems. Older versions of the browsers do not fully support the CSS standards and even the newest browsers can be flaky in implementing certain CSS styles. I will be presenting the most commonly used and stable CSS components.
Along with the power which CSS provides comes an entirely new set of rules for implementation and more code to memorize.
The first challenge is to understand how styles "cascade" or interact with each other. There are 3 ways styles can be applied to documents:
1. An "inline" style which can be inserted into any existing HTML tag. Inline styles affect only the individual tag they are used in. If I have 10 <H3> tags, I would need to insert 10 inline styles to change the look of all the tags.
2. "Document level" styles are embedded within the < HEAD > tag of an individual document. Document level styles control each instance of the tag. When I use a document level style I only need one style to affect all instances of the <H3> tag. Each instance of the <H3> tag contained on that page is automatically assigned the document level styles contained in the < HEAD > tag.
3. For even more power and control, use an external CSS file which is linked to a
collection of documents. External .css files allow me to create a single file which contains a
style for the
<H3> tag. I can link 100 Web pages to this file and all those files will be controlled by the
single .css file. If each page contains 10
instances of the <H3> tag, when I change the style for that tag
in the external linked .css file all
100 pages which each contain 10 tags will instantly change. 100 X 10 = 1,000 <H3> tags changed in one step!! Pretty cool.
4. Another powerful aspect of CSS is the ability to create classes within styles. Classes allow you to create numerous styles which can be assigned to the <H3> tag. If you have a question and answer page which uses <H3> tags, you can create 2 styles one for the class of "question" and another for the class of "answer".
Sounds fun and confusing doesn't it? With all these options, how do you know what tag to use when? Well often that is the decision for the content developer, however if you plan to do freelance work which requires you to design and produce the site, you will want to understand how CSS interacts.
When a document level style and inline style both refer to the <H3> tag, what happens? Well fortunately they don't have to arm wrestle it out. The concept of "Cascading Styles" sets up an order of precedence which allows one style to override, or cascade over the other. Here it is:
External styles can be over-ridden by either a document level style or an inline style
Document level style can be over-ridden by an inline style
Nothing over-rides an inline style
Having reviewed the "Big Picture" let's explore the properties which can be used in CSS standards.
| home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates |