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
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>
<STYLE TYPE="text/css">
<!--
H3 { font-family:Lucida; font-style:normal; color:blue }
BLOCKQUOTE { font-family:Arial; font-style:italic; color:teal;
word-spacing:-0.2em }
-->
</STYLE>
The styles you defined will apply automatically to all instances
of <H3> and <BLOCKQUOTE> throughout your document. You didn't have to use these tags-- you could have
chosen LI, IMG, B, or any other valid HTML tag.
Notice
the STYLE TYPE= declaration (MIME type) and the comment tags surrounding your
style. It's important to use those comment tags to keep older browsers from
displaying this data on-screen. This technique, by the way, is known as
embedding a style sheet.
Using external style sheets
Styles can live in external documents, in the head of the current document, or
you can insert them on the spot. Each technique uses slightly different syntax,
though. For example, you can create an external style sheet by adding a few
global styles to a blank text document, as in the screen above. Then save the
file as sitestyle.css. In one of your site's documents, insert the following
HTML code inside the header:
<LINK REL=StyleSheet HREF="sitestyle.css"
TYPE="text/css" TITLE="Test Style">
The document will
automatically use the BODY and H3 styles declared in the external CSS file. You
can have multiple global style sheets on your site and call different ones from
different documents.
Roll your own
It won't be long before you'll want to apply styles to page elements that
aren't necessarily associated with preexisting HTML tags. No problem, as only
two things change. First, you must preface your selector (Danger, in this
example) with a period.
.Danger { position:relative;
color:beige;
border:4pt lightgreen dotted;
background: black;
text-align:center;
height:50pt;
width:220pt;
font-size:20pt;
font-weight:bold }
Second, you must attach the style to elements
manually. For instance, what if you want to highlight only two words in a
paragraph with the Danger class? The <SPAN> element was invented for just
this reason, to surround arbitrary chunks of text and apply styles to it. Your
HTML would then look like this:
<P>As she saw the bucket coming down on my head she yelled,<BR>
<SPAN CLASS=Danger>"Look out!"</SPAN>
Because of the nature of inheritance, and
because you can link to multiple external style sheets from one document, there
are bound to be conflicts to resolve. The most important thing to remember when
CSS isn't doing what you want it to do is this: Go from the general to the
specific. Here's a trick question: In what color will the text in <H3>
below appear in a 4.0 browser?
<< Previous Beginners Article |
Next Beginners Article >>
Beginners Main Menu 1 to 7 |
Beginners Main Menu 8 to 14 |
Beginners Main Menu 15 to 21
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
