| Introduction:
What is a style sheet? |
Style sheets are an object-oriented method for separating
content from presentation. In this case, style sheets determine
the way the various HTML elements (including text) LOOK on a
page. So, in the simplest example, if you want all <H1>
elements to be a certain font, in a certain size, of a certain
color, etc., you can specify this "look" in a style
sheet.
What's "object-oriented" about this is that the
style sheet can literally be a separate object (i.e., file) from
the HTML page that uses it. Thus, multiple HTML files can share
a style sheet, creating a uniform "look and feel" to
a website. But this also means that if you want to change the
look and feel of the website, you change only the style sheet,
not each individual HTML file. There are other characteristics
of the object-oriented model that style sheets also have, for
example, the fact that style sheets are cascading, but for this
quick introduction, enough said.
|
| The basics: How
do you use style sheets? |
Using style sheets (this section is from the Web Design Group)
There are four ways to combine styles with HTML. The two simplest
ways are by defining styles in the head or the body of an HTML
document. You can also create a separate style sheet and attach
it to the HTML file in two different ways.
defining styles in the head of the document
The best way to define styles for a single HTML document is within
the head of the document. (If you want to create a style sheet
for use on several documents, link to an external style sheet
instead.) Just place the selectors and their style definitions
inside comment tags nested within <STYLE> tags.
defining styles in-line
You can also define styles in the body of the document by adding
the style attribute to an HTML tag.
linking to an external style sheet <LINK> tag in the
header section.
Defining styles in the HTML document is useful if you want to
affect only one Web page, but what if you want to use the same
styles for several pages--or even a whole site? That's when it
makes sense to create an external style sheet and link to it
from your HTML documents.
importing an external style sheet
You can also merge an external style sheet into an HTML document
with the CSS @import feature:
|
| More? |
Style sheets, while not used by all browsers, certainly have
their place on the web. And as users upgrade/update their browsers,
style sheets will only increase in their coverage.
Here's a Reference Table of CSS properties and their available
values:
|
| More? Ok, this
time a bit easier and more practical |
As with all things technology, the source documentation is
sometimes a bit difficult to get through. Fortunately, a whole
industry has risen around this problem; witness the "for
dummies" series. Here are some of the online versions of
making style sheets more palatable for a wider range of users:
|