| WEB DESIGN |
| USE CSS TODAY |
you still aren't using css?...start now
if you follow the major web dev sites, you've surely by now seen them preaching the virtues of cascading style sheets, or "css". the w3c's been telling us to use style sheets for even longer than the dev sites...since 1996, actually. that's all fine in the utopian world of pure web ethics, but in common practise, css has had to bubble slowly on the backburner waiting for the average user to upgrade their browser. and even today, drop by the w3c's site and you'll see the content on their homepage arranged via tables, not css's absolute positioning.
so why should you use css today? because it will improve your production process, lighten your work load, let you do neat new formatting tricks, and lastly, but most importantly, because it can now be viewed by the vast majority of the average browsing public. i'm going to show you how to use style sheets, and give some examples of what's good about them...
critical mass
the 3.0 browsers are dying. wow. that feels good. the day i wrote this article, thecounter.com reported both ie3 and netscape3 as used by only 1% of 130 million visitors. even the tech-heads visiting the uiuc engineering homepages show up as 7% netscape3 and 3% ie3. effectively, those statistics are the green light for lots of 4.0-specific technologies, but particularly css because most css won't break in 3.0 browsers--it just won't look so hot. finally we're there...from now on if you use css the vast majority of folx will be able to see your work, and those that won't are probably used to experiencing partially-working sites anyway so you won't really need to worry.
kludge no more, and learn some new tricks
alright, so you're convinced that it's safe to use css. now here's *why* to use css:
here's how to do it
to use css, you define a set of formatting and display properties and then apply those properties to tags.
forget the implementation details for a second, and re-read the previous sentence. no honest, re-read it. done? okay, the key thing to note in that sentence is the separation between the display properties and the tags that are affected by those properties. here's the whole deal with css: keep the information about how to *display* your content separate from the content itself. in practise, this means extracting the markup you'd normally use to define the visual features of your document and placing it in a single external location (a separate file). once you've got the display features defined separately, you simply refer to them as needed from your content. so, if you have a specific formatting standard for a section header that you use lots of times around your site, you define that header's formatting once in your style file, then refer to the style file whenever you want to invoke the formatting on some content.
following so far? great, let's see how to apply styles to tags with a few examples...
defining a style
syntactically, css's description of formatting always looks the same. here's an example:
in the past, you may have specified the visual features of a piece of text like this:
<FONT FACE="Verdana, Arial, Helvetica" SIZE="-1">my text</FONT>
with style sheets, you could achieve the same effect like this:
font-family: Verdana, Arial, Helvetica;
font-size: 10pt
for every feature of formatting you want to affect, you'll have a property name (eg. "font-size") and a property value (eg. "10pt"). you can affect lots of different things...stuff like italics, bold, font face, alignment, and everything else html could do with tags. but you also get new css features like leading (space between lines of text), tracking (space between letters), text background colours, colours on form elements, and too many more to list here. since the purpose of this article is only to show how to implement css, i'll leave the "list-every-property" game to the w3c: here's the w3c's list of properties for css2. if that list is a bit daunting and unfriendly for you, try john and liam's starter list of the more common properties for css1.
applying css to html tags
once you've defined the css property (or properties) you're going to use, and the value(s) you're going to set, all you have to do is apply the style you've described to a tag in your html document. there are three ways to do that:
<p> tag, like this:<P STYLE="font-family: Verdana, Arial, Helvetica; font-size: 10pt">my text</P>
<head> tag, like this:
<HEAD>
<STYLE TYPE="text/css">
<!--
p {
font-family: Verdana, Arial, Helvetica;
font-size: 10pt
}
UL {
font-style: italic;
}
-->
</STYLE>
</HEAD>
<HEAD>
<LINK REL="StyleSheet" HREF="mystyles.css" TITLE="General">
</HEAD>
one more thing...using the "class" attribute
you're still missing one final, but very important, aspect of css--classes. consider this situation: you have two kinds of paragraphs on a page, question paragraphs, and answer paragraphs. you want questions to be bigger than answers, and you want answers italicized. you need a way to identify the paragraphs as being different from each other, and a way to specify different styles for the two kinds of paragraphs. enter classes.
classes are arbitrary, user-defined categories of content, eg. "chaptertitle" or "pageheader". you use classes to label your content so it can be formatted consistently, or even manipulated programmatically (classes are used in dhtml as well as css). to identify a paragraph or any other tag as belonging to a certain class, you add the "class" attribute, as in:
<p class="question">what is your name?</p>
<p class="answer">colin moock</p>
then, you can identify the styles for your class by supplying its name, preceded by a period, like this:
.question {
font-size: 12pt
}
.answer {
font-size: 8pt;
font-style: italic
}
here's what the above code looks like when rendered. note that you can apply custom classes to any tag, so if you wanted a table cell to have the "answer" class attributes, you could happily use <td class="answer">. finally, if you want to classify a specific chunk of content that doesn't correspond to any tag already in your document, you can use the "span" or "div" tags to identify portions of your document as belonging to a class. eg:
<p><span class="sectionheader">title of section goes here</span><br>content of section goes here</P>
and that's about it! good luck cssing. a word of warning, though, netscape 4 doesn't do a great job of rendering css (most things will work, but some won't, and some are finnicky). ie4+ is much better. so just remember to test everything out in both browsers before you launch your pretty new site.
as a parting gesture i'll leave you with some of my favourite css tricks...
css tricks
A:link {
text-decoration:none;
color: #990000;
font-style: italic
}
A:visited {
text-decoration:none;
color: #660000;
font-style: italic
}
A:active {
color: #ff0000;
font-style: italic
}
A:hover {
text-decoration:underline;
color: #FF0000;
font-style: italic
}
eg. this is a sample link
BODY {
background-color: #000000;
color: #FFFFFF
}
TD {
background-color: #FF0000;
color: #FFFFFF
}
| this is an example |
INPUT {
border-style: solid;
background-color: #FF0000;
border-color: #000000
font-size: 8pt;
color: #FFFFFF
}
and of course, there's much more info available at the w3c's css info centre. also, todd fahrner's essays on css and typographic principles make for invaluable reading. before you do any hard-core font manipulation for a production site, make sure you've read todd's info.