Intro To Cascading Style Sheets
Volume Number: 14
Issue Number: 6
Column Tag: WebTech
Introduction to Cascading Style Sheets
by Paola Aliverti
Contributing Editor Tantek Çelik
HTML authoring has just gotten easier: style sheets land on
the Web
Cascading Style Sheets have been sporadically seen on the web for a while. It isn't until
recently, with the latest versions of Microsoft Internet Explorer and Netscape
Navigator, that they can be more widely appreciated. Style sheets on the Web work
pretty much like style sheets in a word processor, or in a desktop publishing
application. You can define a style called 'note' with blue text, enclosed in a border,
with 24pt type set. If you need to make visual changes at a later date, all you need to do
is change the defined style, without going through all the text in a page, or all the
pages. CSS allows you to establish a set of rules to apply throughout the document, or,
in our case, a site. Just like word-processing style sheets, Cascading Style Sheets on
the Web help in a more consistent and time-saving preparation of your documents, and
in styling and formatting of your documents.
The W3 Consortium has so far come up with the first list of specifications (CSS1), and
is working on the second series of specs. Both Netscape 4.0 and Internet Explorer 4.0
support most of the CSS1 specs. Authoring tools are currently on the market to help
you with CSS (Macromedia Dreamweaver, and Cascade, for example). You can find
up-to-date information about the current CSS standards on the Web Consortium web
site, at: http://www.w3.org/Style/CSS/.
HTML was designed for structure, not for style and formatting. That's why solutions
like frames, and tables came along. The problem is that both of those solutions are
neither straightforward nor consistent. Frames cause problems with bookmarks, and
tables bloat code and promote inflexible formats.
Tables and frames will not disappear from everyday use, but style sheets will make
your life much easier. If you are a web author, there will no longer be a need for
tables hacks, spacer GIFs, or text-based GIFs. Style sheets allow for easy maintenance
of your site, easier design, and improved control over the page layout. They help build
scalable sites, uniform sites with a consistent look among browsers and platforms. If
you are a web user, surfer, or cybernaut, you will like style sheets because the pages
are smaller, your downloads faster, and the layout 'spiffier'. You will also like the
browser scalability.
CSS allows you to re-define the look of HTML tags, add your own styling to them, or
create new Classes with new characteristics.
For example, you can decide to have non-underlined links:
link
Or to have a blue tags:
H1 blue
Or place a dotted border around a paragraph:
paragraph with dotted border
NB: If you are among those who have not closed their tags, it's time to start.
Browsers behave much more predictably when you close the tags properly!
The basics
How does style sheet code work? Let's start with some basic terminology. In a style
sheet code, there is a selector and a declaration.
A:link { text-decoration: none }
A:link is the selector, and
{ text-decoration: none } is the style declaration
The style declaration has a property (in this case 'text-declaration'), and a value
('none'). The selector can be a tag, or a newly-defined class. More specifics on
different selectors can be found in the CSS1 recommendation:
• http://www.w3.org/pub/WWW/TR/REC-CSS1.
Of course, even though the CSS1 properties are defined by the official spec, not all
CSS-savvy browsers support all CSS1 properties. For a list of what is supported by
Navigator and Explorer, you can look at:
• http://www.webreview.com/guides/style/
• http://www.pcwebopedia.com/CSS.htm
• http://webreference.internet.com/html/css.html
They are not always up-to-date, but they are the best I've found so far.
There are different ways to add style sheets to your HTML code:
• Embedding a Style Sheet
• Linking to External Style Sheet
• Importing an External Style Sheet
• Adding Styles Inline
The above-mentioned examples (except the A:link example) are all inline styles. All
you need to do is add the STYLE attribute to the tag you want to modify, and specify a
properties and values.
If you are looking at CSS not only for styling, but for efficient site management, you
don't want to be repeating the style for each instance of each tag. Let's take a look at
other ways to implement style sheets...
Embedded Style Sheets
You can add your CSS code at the beginning of each HTML file you want to affect, by
putting the following inside your HEAD (in your HTML silly!!!)
embedded.html
Welcome to the fruit factory!
Welcome