CSS Tutorials > Introduction to CSS
Introduction to CSS
Style sheets (or to give them their full title, cascading style sheets or CSS) are becoming more and more common on the Web. They were first introduced in a limited form to Internet Explorer 3.0, and are recognised by all version 4 browsers.
This tutorial will show you what style sheets are, when to use them, and (hopefully) how to use them!
What are style sheets?
Style sheets are a way to separate style from content in Web pages. In an ideal world, you would put all your content (e.g. text and graphics) in one place, and define how that content is laid out (the style) in another.
Straight HTML mixes style with content. For example, each time you want a bold, centred paragraph to represent a quote, you have to have to use <p align="center"> and <b> tags to achieve the effect. You're mixing what you want to say, with how you want to say it.
The markup metalanguage, XML, will hopefully move us towards total content and style separation. In the meantime, we have the pretty good compromise of style sheets.
Style sheets allow you to modify the default attributes of many standard HTML tags. For example, the <b> tag normally just makes text bolder, as it is doing here. However, you could use a style sheet to modify the <b> tag to make text red, all in capitals, or one font size bigger. It's totally up to you.
Even better - if you make all documents use the same style sheet, you only have to change the properties for <b> in the single style sheet file, and all the documents in your website will display <b> in the new way! Cool, huh?
For example, if you're using IE 3+ or Netscape 4+, you'll notice that the headings on this page are in a dark green colour, and that there's a gap between each heading and the paragraph above it. You'll also notice that the links are yellow, and that if you use IE4+ or Netscape 6+ the links change from yellow to white as the mouse rolls over them.
Lovely! How do I use them?
There are two main ways to use style sheets - linked and embedded. (You can also place styles straight into the thick of the HTML itself - called inlining - but this is less frequently used and won't be covered here. There's not enough space!)
You can create a style sheet in a separate file and then link one or more web pages to it - this is called linking, amazingly enough. Or, you can embed style definitions directly into the <head> section of individual web pages, using the <style> tag - we humans call this embedding.
Now it doesn't take a genius to work out that linking is more powerful than embedding. If you link many pages to one style sheet file, you only have to change a style in that one file, and all the linked pages will change their appearance. With embedding, you'd have to change the <style> tags for each page...
However, embedding can be used in tandem with linking. Say you've done a perfect style sheet which makes everything in <b></b> tags appear blue, and 100 pages link to it. But then you realise that your 99th page would look much better if the stuff in <b></b> looked red, just for that one page! No problem - then you embed a style into just that page, using the <style> tag. Embedded styles override the styles defined in the linked style sheet, so for this one page the bold stuff will look red, not blue. Clever! (This is why they're called cascading style sheets, by the way.)
So you get the general idea. Let's get stuck in.
The nuts and bolts of it all
Let's examine a simple style sheet, and then see how you would link a web page to it.
p { text-align: justify;
font-family: Verdana, Arial, Sans-Serif; }
h4 { color: #ff4400; margin-top: 45px; }
The meaning of these values is shown inTable 7-1.
Table 7-1. Values of the list-style property and their results
Figure 6-26. The consequences of a missing background image
Given this reason alone, it's always a good idea to specify abackground color when using a background image, so that your white
Figure 11-17. A comparison
Furthermore, if we view the web page using a browser without stylesheets, it will come out looking like Figure 11-18.It may not be as pretty, but it's still quite readable.
Figure 11-18. The styled page without any styles
11.1.3.1. Cleaning up
There are a few places where the CSS version isn't quite theis divided in half to determine the half-leading(6px), and the half-leading is subtracted fromboth the top and bottom of the content-height to arrive at an inlinebox which is, in this case, 12px high. This12-pixel inline box is centered vertically within the content-heightof the element.
So far it sounds like we've done the same thing to each bit oftext. This is not quite the case. The inline boxes don'tactually line up, as we can see in Figure 8-50,