Nick_W - 10:23 pm on Dec 17, 2002 (gmt 0)
Hi everyone, I'll be running a series of crash course, hands
on CSS tutorials over the next couple of months as many members
still have yet to break the ice with stylesheets. And more than a few have made it part of their New Years Resolutions! [webmasterworld.com]
You will find the index to CSS Crash Course here [webmasterworld.com].
What will you learn?
The course will be very much a practical, hands on guide, with links to
further reading and information. We'll take a simple XHTML Document [webmasterworld.com] and
gradually turn it into a presentable web page whilst learning the basics
as we go. For example:
You're invited to discuss the course and please point out any missing or
complimentary information. er... and mistakes of course ;)
All of the stuff we'll be discussing in this and the next part of the course (font control), is well supported by the major browsers, including NN4. Where an exception to this occurs, I'll let you know. If you spot something I miss, let me know...
Essentially, CSS is the preferred way of styling HTML elements. That
includes colors, fonts, positioning and other presentational
aspects of n web page.
HTML was not originally designed to handle the presentation of web
pages, just the structure of hypertext documents. By the time
we got to HTML 3.2 though, both Netscape and Microsoft had added a whole
bunch of new and sometimes proprietary tags and attributes to the
Prime examples would be the <font> tag, the color attribute and the
annoying <blink> tag. None of these are supported in current XHTML specs.
The consequences and legacy of HTML 3.2 still
haunt us now, we surf a web of pages that are bloated, display poorly,
and in extreme cases are downright butt ugly.. Not to mention the
fact that the majority of pages that are written using this kind of code
are an accessibility nightmare.
All is not lost!
In December 1996, almost exactly a year before HTML 4.0 was released, the World Wide Web Consortium [w3.org] answered this progressively worsening problem with StyleSheets!
The basic idea behind CSS is to outsource the presentational elements of
an HTML document, leaving us with neatly structured, semantically sound
markup and content.
This allows the document to be shown on a wider
variety of devices and media and gives people with special requirements
such as the blind or physically handicapped greater control over how
they interact with the vast amount of information available on the net that most of us take for granted.
A key concept in the CSS ideal is the cascade, You can have many
different styles that relate to a document specified in a number of
ways. The key thing to remember is that all styles, however specified,
become part of one big stylesheet. Conceptually at least.
They rank in this order:
We had a great discussion on Using the Cascade, here.. [webmasterworld.com]
Three Main Ways To Implement Styles
From the above list you'll see that there are three ways that we, as
html authors, can influence the way our documents are presented: Inline,
Inside the <head>, and externally. Here's a brief look at each method:
Say we want all our <p>aragraphs to be in verdana (we'll get to
<p style="font-family: verdana, arial, sans-serif;">
This paragraph should
be in verdana. If verdana is
not installed on your machine
it will be in arial or a sans-serif font.</p>
Inside the <head> of your document
<title>Inside the head of your html</title>
font-family: verdana, arial, sans-serif;
From both a clean code and SE friendly perspective the external
stylesheet is a true knight in shiny armour! Here's how it works:
<title>The External StyleSheet</title>
<link rel="stylesheet" type="text/css"
If you're not, don't worry! We'll go over this with practical examples in the next part of the course.
For the sake of ease of explanation we'll use styles in the <head> of the
document for the examples that will follow this introduction but,
external styles are certainly the way to go if the rules you set are to
appy to more than a couple of pages in your site.
Well, that's the boring bit over ;) - Next time we'll take a look at Font Control and Selectors and introduce the sample document we'll be working with.
See you there...
[edited by: Nick_W at 10:31 pm (utc) on Dec. 17, 2002]