Trying to control the way a document looks with straight HTML markup can be frustrating.
Style sheets provide a way for a web designer to specify a "style" for
a web documentor for hundreds of related web documentsin an "easy" way.
(Well like many things it's easy once you understand it )
For example, view the source code for this document, and look at the HEAD section.
You'll see style sheet information that makes all H1 (Heading Level 1) items
appear in purple, and all H2 (Heading Level 2) items appear in green. Neat!
The "cascading" part refers to how presentation is determined when there are
Mom wants this Dad wants this daughter wants this
friend wants this
the instructions "cascade" (like a waterfall) from higher-level sheets to lower-level sheets
This section provides an introduction to Cascading Style Sheets.
INDEX CARD #41:
CASCADING STYLE SHEETS (CSS) (41a)
What are "Cascading Style Sheets"? Cascading Style Sheets (CSS)
give web designers more control over how pages are displayed.
They allow style information, such as font size, line and letter spacing,
and color, to be applied to any web page or collection of web pages.
Cascading style sheets are good news for
HTML purists who believe that style should be separate from content and structure.
What does "cascading" mean?
The term "cascading" derives from the fact that multiple style sheets can be applied
to the same Web page; when there are conflicting instructions, there is a specific
set of rules that determine which style specification "wins".
Who developed CSS? The World Wide Web Consortium (W3C) first published
its recommendations for style sheets in 1996, and they were first implemented
by Internet Explorer 3.0. The specification is still
evolving and is not fully and evenly supported by current Web browsers.
ADVANTAGES OF CSS (41b)
Greater typography and page layout controls. With style sheets, you can
specify (among other things) font size, line spacing, letter
spacing, indents, margins, and element
Style is separate from structure. HTML purists say that code should
indicate the structure of a document, not its presentation.
However, tags (like the <font> tag) go against this goal.
Style sheets, when done correctly, mark the return to the original intention of HTML
by removing presentation instructions from HTML and placing them in a separate,
Potentially smaller documents. Placing style information once, at the
beginning of a document, instead of at every single place where style information
is to apply, can cut down dramatically on the number of characters in an HTML
document. Fewer characters mean smaller file sizes, which means faster download times.
Easier site maintenance. It is possible to link multiple HTML pages to
a single style sheet. You can make style changes to thousands
of web pages by editing a single file.
DISADVANTAGES OF CSS and STRATEGIES FOR THEIR USE (41c)
Poor Browser Support. Style sheet information is not supported
in browser versions earlier than Microsoft Internet Explorer 3.0 or
Netscape Navigator 4.0. Moreover, there is inconsistency in CSS support
in later versions. There is a 9-page appendix in the
(pages 518526) that documents this blotchy support.
Here are some strategies for effectively using style sheets today:
Close your tags! Even though many browsers are forgiving when
you leave off end tags (like </P> and </LI>),
many emerging technologies, like CSS, will not work properly without closing
tags. To prepare for these
emerging technologies, develop good habits today, and CLOSE YOUR TAGS!
Create documents that "degrade gracefully":
First, create a style-sheet-free
site that is acceptable to your entire audience. Then, add style sheet
information. Thus, you can improve your site for current browsers,
while keeping it functional for older ones.
THREE WAYS TO APPLY STYLE (41d)
There are three basic ways to add style information to an HTML document:
Inline styles: Style information can be put directly into an HTML
tag, like this:
<H1 STYLE="color: red">This Heading will be red.</H1>
However, this defeats the purpose of keeping style information separate. Only use
inline styles to occasionally override higher-level rules. (For example: "I really want
red here, even though I usually want purple.")
Embedded style sheet: A block of style information can be embedded in the HEAD
of an HTML document using the <STYLE> </STYLE> container tag.
This is an efficient way to specify the style of a single document.
External style sheet: The most powerful way to use styles is to collect
style information in a separate text document, and then "load this information" into
a document when a specific style is desired. In this way, stylistic changes can be
made to multiple documents (for example, to this entire web tutorial) by editing a
single style document. Powerful stuff!
View the source code for this document, and look in the <HEAD> section. You'll see
some style sheet code. You'll be cutting and pasting this code momentarily, to do your
first style sheet exercise!
(W41.1) Create your own HTML document that has three H1-level and three H2-level headings. (These can say whatever
you'd like them to say.)
(W41.2) Copy the style-sheet information that you saw when you viewed the source code for this web page,
and put it inside the <HEAD> section of your HTML document.
Make the H1 headings red. Make the H2 headings green.
(W41.3) Now, make the H1 headings yellow and the H2 headings blue.
(W41.4) Now, choose your favorite two colors for the H1 and H2 headings.
Pretty easy to change lots of things at once, isn't it?
(A41.1) Please read pages 389391 (up to "How Style Sheets Work") in the Weasel Book.