Chapter 9 - Cascading Style Sheets
The preceding header is in blue because I used the following
<STYLE>...</STYLE> tag
in the <HEAD>...</HEAD> section of this HTML document.
The use of the STYLE tag in this manner affects a single, entire HTML document.
In this particular case, every time I use the <H1>...</H1> tag, the
text will be blue.
Please note the use of the multi-line comment between the <STYLE> and
</STYLE> tags. This is done to prevent browsers that do not respect
the STYLE tag from display the text witn the start and end tags.
What is the purpose of style sheets?
Style sheets allow you to control the appearance of your HTML documents at
a higher level than the tag level. So far, we have seen the use of the
ALIGN, COLOR, WIDTH, and SIZE attributes within specific tags.
For example:
<H1><font color=BLUE>
Cascading Style Sheets
</font></H1>
With style sheets, the previous example is rendered as:
<H1>
Cascading Style Sheets
</H1>
While this example illustrates only a slight savings in HTML code,
the real world savings would be tremendous, considering sites have
thousands of HTML documents with millions of line of HTML code.
What types of STYLE sheets are there?
- Inline Style
- Inline Style involves the use of the "STYLE" attribute
within another tag like <H1> as shown:
<H1 style="color: BLUE">
Cascading Style Sheets
</H1>
Used this way, the only tag affected is the one that
contains the STYLE attribute. No other <H1> tags
are affected.
- Style sheet
- A style sheet is shown at the top of this page wherein
the <STYLE> tag within the <HEAD> section
contains rules to tell be applied to the entire page.
- Cascading Style Sheets
- Cascading style sheets are separate files that contain
nothing more than a set of rules to be applied to any web page
that uses it. As such, cascade style sheets can be used
by all HTML pages on a WWW site to provide a standard look
across an entire WWW site.
What is the downside of STYLE sheets?
-
In order to use style sheets
you have to spend more time designing your WWW site before you start
coding it. That is, you must first determine how to standardize
the appearance of your HTML documents.
- Trying to upgrade an existing site to use style sheets would be
a huge burden.
What terminology do I need to know?
- Element
- Examples of elements include headers,
pictures, titles, and lists. There are other elements, too.
- Selector
- A specific element like a first level header (<H1>).
- Declaration
- Specific text enclosed within { and }.
- Rule
- A combination of a selector
and a declaration.
- Inheritance
- The ability of an HTML document to inherit properties
of another HTML document like margin sizes.
Why do they call 'em Cascading Style Sheets?
The use of the word cascade implies that there are parent and
child HTML documents and that the child documents can inherit the
appearance of its parent document.
To override the application of a style sheet, use the same
tags and attributes that you used before we discussed style sheets.
Of course, this defeats the purpose of style sheets, but is necessary
sometimes.
Click here
for a sampler of linked/external style sheet usage.