From http://www.quackit.com/css/
by Ian Dickson
Cascading Style Sheets (CSS) have been seriously underated. Maybe it's because web designers think it's harder than what it is. The truth is, Cascading Style Sheets are incredibly easy!
With Cascading Style Sheets, you can define all your common styles in an external Style Sheet. This way, if you want to change every occurence of a style throughout your site, you only need to update one file.
This tutorial will show you how to implement Cascading Style Sheets into your website. This tutorial will also show you how to create an external Style Sheet and link to it from your HTML page.
Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
As of this writing, CSS3 is currently under development.
Why use CSS?
HTML has its limitations when it comes to layout. Sure, you have 6 different
levels of headings and 6 different sizes of fonts. You also have tables, and
you have control over alignment etc. These are good enough to get a reasonable
looking document that shows the true structure of information. However, it's
a far cry from some of the excellent layout & design that we see in magazines
and printed brochures etc.
CSS helps us achieve such layouts.
With CSS, you have much better control over the layout of your web pages. You can specify exactly how big a font will be, exactly where an element will be on a page, what the page will look like when printed, and much more.
CSS can also save you a lot of time, particularly when maintaining a large site. Also, the World Wide Web Consortium (W3C) recommends that web developers use CSS tags instead of HTML tags wherever possible. The W3C plan to phase out quite a few of these HTML tags.
CSS saves time
When most of us first learn HTML, we get taught to set the font face, size,
colour, style etc every time it occurs on a page. This means we find ourselves
typing (or copying & pasting) the same thing over and over again.
With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
Pages load faster
Less code means faster download times.
Easy maintenance
To change the style of an element, you only have to make an edit in one place.
Superior styles to HTML
CSS has a much wider array of attributes than HTML.
Browser compatibility
The two main browsers (Netscape and Internet Explorer), have varying levels
of compliance with Style Sheets. This means that some Style Sheet features are
supported and some aren't. To confuse things more, some browser manufacturers
decide to come up with their own proprietary tags.
Fortunately, the latest browser versions are much more compliant than their earlier counterparts.
Selectors and Declarations
Cascading Style Sheets are made up of rules. A rule can be as simple as this:
H1 { color: lightblue }
This tells the browser that all text surrounded by <H1></H1> should be displayed in light blue.
Rules are made of up of selectors and declarations. In the above example, H1 is the selector. The other part is the declaration and consists of a property(color), and a value(light blue).
Any HTML tag can be used as a selector.
How to add styles to a web page
There are four ways of adding styles to a web page.
I much prefer linking to an external stylesheet. It makes site maintenance much easier.
Positioning
There are two ways of defining the position of elements on your page. These
are:
Relative positioning
You specify where the element is based on it's natural flow in the document.
Example: if a paragraph naturally falls 10 pixels below a heading, and you specify the paragraph to be "top: 10px", it will end up 20 pixels below the heading.
Absolute positioning
You can position elements exactly where you want to on the page - right down
to the last pixel.
Example: If you specify both a heading and a paragraph to be "top: 10px", they will both be 10 pixels from the top of the browser window.
Classes and ID's
On top of defining the attributes of any HTML tag, style sheets also enable
you to make up your own classes. You can use HTML's "DIV", "SPAN", "CLASS" and
"ID" tags to place these within the HTML. You can get a quick introduction to
one way of using the DIV and CLASS tags by completing the short excercise on
the next page.
Media Types
The CSS2 specification enables us to define a separate style sheet for different
media types. The names of the different media types recognised by CSS2 are:
As you can see, they are quite self explanatory, and some provide accessability to people with disabilities, while others enable us to optimise a piece of information for devices such as mobile phones etc.
Commenting your work
You should always comment your code. The way to make comments within a style
sheet are by using /* at the start of the first line, and */ at the end. Example:
/* this is a comment within a style sheet */
Let's get straight into it and create a simple style sheet and apply it to an HTML document. We will create two files; one HTML file, and one CSS file. We will then link the two files together.
1) Create a simple HTML document using the code below, and save it as 'cooltafe.html':
<HTML>
<HEAD> <TITLE>TAFE college</TITLE>
</HEAD>
<BODY>
<H1>TAFE college is cool</H1>
<DIV CLASS="box">
<P>Well, it certainly helps if you have a sense of humour!</P>
</DIV>
</BODY>
</HTML>
(Quackit note: TAFE college is a way cool learning institution... ;o)
2) Create a new file in notepad called, 'csstalk.css' and type the following code.
body {align: center; background: #000000}
p {font-family: cursive, serif;
font-size: 24px;
line-height: 36px;
color: #ffffff}
h1 {position: absolute;
left: 100px;
top: 150px;
color: #00cc00;
font-family: verdana, arial, sans-serif;
font-size: 38px}
div.box {position: absolute;
left: 380px;
top: 150px;
width: 200px;
height: 200px;
layer-background-color: #cccccc;
background-color: #cccccc;
background: #cccccc;
padding: 15}
Now view the HTML page with your browser. It should look like example 1.
Example 1
3) Now add the following line of code between the </TITLE> tags and </HEAD> tags in the HTML file.
<LINK REL=stylesheet TYPE="text/css" HREF="csstalk.css">
Save the file and refresh your browser. It should look like Example 2. It should look like Example 2.
Example 2
That pretty much wraps up this tutorial. "So" you might ask "where to from here?"
CSS has been slow to take off because the main browsers have been slow in conforming to the W3C's recommendations. Browsers are now getting better at supporting CSS. As seen with the different media types that CSS recognises, CSS isn't just limited to HTML either. CSS can be used with any structured document format, such as XML (eXtensible Markup Language). The W3C is constantly developing new specifications for a variety of web technologies, and XML is quite a hot topic at the moment.
To learn more about CSS
There is much more to learn about CSS than what was covered here. If you're
serious about style sheets, download the full CSS2
specifications document from the W3C web site. It's quite a large document
(207 pages for the text version!), but at least you're getting the info from
the horses mouth.
A book called Cascading Style Sheets, Second Edition: Designing for the Web is highly recommended. One of the authors (Hakon Wium Lie), was the originator of CSS at the W3C. His writing partner is also a member of W3C and is working on Style Sheets and XML.