Style Sheets Guide
=Examples=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
- Introduction
- There are four examples here using different style specification methods.
Each method attempts to accomplish the same layout characteristics as
the others, but there may be some differences (especially with the HTML
only method.) I have tried to adhere to using only one method in each
example, foregoing obvious opportunities where another method would
work better, in order to prove the point of each example. As an author
you can and probably will freely mix and match any of these methods for
the result that best suits your needs.
- Examples
- Each of the following examples consist of a document sample followed by
a line-by-line breakdown analysis of the document code. Analysis points
and line examples are heavily cross-linked to allow for easier navigation.
1. External Style Sheet Example
- Uses the LINK tag to attach a CSS
stylesheet to a document. Multiple HTML documents can use a single external
style sheet, which serves to reduce repetitive work on pages using common
thematic elements.
- 2. Document Level Style Sheet Example
- Uses the STYLE tag to insert style
information in a document. All style rules are applicable only to the
document that contains them, but it also allows powerful grouping and
classing mechanisms to save work in assigning style properties. This
method is the middle ground between external and inline methods.
- 3. Inline Styles Example
- Attaches style properties to documents by assigning them directly to
HTML tags with the STYLE tag attribute. Can easily become repetitive,
but is useful in some situations.
- 4. Plain HTML Example
- What we all have been used to until the advent of CSS. Browser extensions
and common browser visual behaviors are relied upon to create a consistent
layout result - which was never the original intent of HTML to begin with.
- Conclusion
- Style sheets aim to accomplish several major things:
- Separate style information from content
- Increase the layout capabilities in the HTML document format
- Make documents smaller, less complex, and easier to read
- Promote the re-use of authoring efforts
- It is up to the author to decide how to best reach these goals, and
achieving some of these goals may come at the cost of compromising others.
I would love to add pages showing the results of these code examples
above, but the big two browsers still do not support enough of the CSS
specification to display the examples as expected. You will probably think
the results are really quite ugly. I certainly do! =) Without good design,
all the potential CSS capabilities in the world will not save your page.
- Note:
- I now see why I put off creating these pages for so long. These pages are
MUCH bigger than I originally intended, and they also seem (to me) to be
too complex. Am I imagining things? Are these CSS example pages helpful
or poorly designed? Any ideas for
improvement would help out a lot.
Boring Copyright Stuff...