CSS Primer (Part 1)
Although Netscape's and
Microsoft's DHTML disagreements are causing the public--especially
developers--plenty of headaches, thankfully both companies implement Cascading
Style Sheets (CSS) similarly. Because CSS is the cornerstone of DHTML, we'd be
in a real mess if they weren't compatible. The real problems arise from
the fact that each browser uses different object models to link Web-page
objects and scripts together. Ideally, there would be just one way to talk to
the objects on a page. For that reason--not to mention the fact that CSS is
easier to learn than DHTML--CSS will be adopted at a much faster rate than its
interactive sibling.
Learning CSS is like learning HTML: It seems odd at first, but once you master the
basics, it's just a matter of tuning your technique. If you don't know HTML,
you need to learn it before tackling CSS. Just as DHTML depends on
style sheets,
so do style sheets depend on HTML.
The cascading in CSS derives its name
from the way a style cascades down from the general to the specific. Think of
parents passing on traits to their kids; though the kids can still control
their own destiny. Elements (like paragraphs or footers) inherit properties
from style sheets (parents), though you can customize or override them. We'll
show you how to do this in this section, which is designed to help you learn to
start building pages that use style sheets.
CSS 101
Let's start with some of the basics of working with CSS. A style is simply a
collection of display and positioning attributes that a Web author defines. For
example, a style could specify 24-point, bold, blue Arial with a 1-point green
border, hovering 50 pixels down from the top of the screen.
Every style gets a name, such as H1 or bibliography or ListBullets.
If the style's name is the same as a valid HTML element (or tag), then the
style is automatically applied to every instance of that element.
If you give a style a name
that doesn't correspond to an HTML tag, you must apply the style manually
wherever you want it to appear. You do this by modifying an existing tag in
your document or creating a new one. For instance, to apply a bibliography
style, you might modify a paragraph tag to read <P
CLASS="bibliography">.
For the record, what we're calling styles in this article are technically rules,
which consist of two parts: a selector and a declaration.
.selector { declaration }
The selector always precedes the curly
braces and the declaration consists of everything between them. The
selector will be used as a name later when you apply the style. The declaration
is made up of a series of properties and their associated values, separated by
semicolons.
.puppy { size:dinky; annoying:usually;
collar:black; fur-decoration:spotted; }
Not all values work with
all properties, though. For instance, in the example above, the property
"size" can never take the value "brown," although
"collar" could take the property "spotted." Print out a CSS
properties chart for future reference.
The simplest way to use styles is to apply them to existing HTML tags. Start by
declaring a style in your document, ideally, inside the <HEAD>
CSS Primer (Part 1) |
CSS Primer (Part 2) |
CSS Primer (Part 3) |
CSS Primer (Part 4) |
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
