|
LESSON 5: CASCADING STYLE SHEETS
Objectives
o inline styles
o documentstyles
o external styles
o cascade principles
o classes
Overview
Designers and desktop publishers have used "style sheets" for many years.
If you use Microsoft Word, Adobe InDesign, or QuarkXPress, you have
experienced firsthand what a powerful tool styles can be. They provide
a consistent look throughout your document, allow you to make changes
easily, ensure accuracy, and save you time.
HTML has always focused on content over style. When the Web was launched
at the European Laboratory for Particle Physics at CERN, the scientists
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 style sheets 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 that CSS provides comes an entirely new set of
rules for implementation and more code to memorize. In fact, there is
so much new information to learn that I have divided the subject into
two lessons.
In the first lesson, your instructor will demonstrate:
- The inline style, which can be inserted into any existing HTML
tag. Inline styles affect only the individual tags 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.
- Document-level styles, which are styles 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 need only
1 style to affect all 10 instances of the <H3> tag. Each
instance of the <H3> tag contained on that page is automatically
given the document-level style.
- For even more power and control, I would use an external .css file,
which is linked to a collection of documents. External .css files
allow me to create a single file that contains a style for the <H3>
tag. I can link 100 Web pages to this file. Let's pretend each page
contains 10 instances of the <H3> tag. When I change the style
of <H3> in the external linked .css file, all 100 pages with
10 tags apiece change. 100 x 10 = 1,000 <H3> tags changed in
one step!! Pretty cool.
- Another powerful aspect of CSS is the ability to create classes
within styles. Classes allow you to create numerous styles that can
be assigned to the <H3> tag. If you have a question-and-answer
page that uses <H3> tags, you can create two styles, one for
the class of "question" and another for the class of "answer". Next,
I will demonstrate how to insert the code that tells the browser when
to use each class.
Finally, I will explain how these styles interact with one another.
When a document-level style and an 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 that allows one style to override, or "cascade"
over, the other. We will learn that order so we can use the style
that meets our needs.
The second lesson will focus on the various properties that can
be assigned to styles.
|
|
