CSS Information

What are Stylesheets?

In the late ‘90s, HTML coders noticed that they were retyping the same old tags again and again on the same page, leading to bigger HTML files and above all, time consumption and frustration. You may have found yourself in the same situation, adding in mountains of <font> tags, despite wanting them all the same; or using tricks like invisible gifs for spacing.

Then, someone had a great idea: have one file that defines all the values that those piles of tags would have done, and then have all your pages checking this file and formatting your pages accordingly. You can therefore leave out most of the formatting tags in HTML and use only nice structural elements (like headings, paragraphs and links) — separating structure and presentation.

In late 1996 CSS (Cascading StyleSheets) became a reality, forged by our good friends the » World Wide Web Consortium (W3C). Your stylesheet acts as a partner to your HTML code; taking care of all the layout, fonts, colours and overall look of your site.

If you ever decide to change the look of your site, you modify that one CSS file (your style sheet) and all the HTML pages reading from that file will display differently. This makes maintenance of your design much easier.

Implementation

CSS files are termed cascading stylesheets because of two reasons: one stylesheet can cascade, or have influence over, multiple pages. Similarly, many CSS files can define a single page.

There are 3 ways to implement css commands into your site:

• Use one CSS file for all your pages. This is the best way to do it.
• Integrate CSS commands into the head of each of your documents.
• Use the style attribute to put CSS code directly into a HTML element.

CSS allows you to use all three of these methods in glorious tandem, inheriting and overriding values as you go (we’ll get on to all that in the next tutorial).

One Central Stylesheet

This is how you should use most of your CSS. You write just one .css file and have all your pages referencing it. This way, a change to anything in this one file will adjust this thing (a font, for example) across your whole site. You could change your entire colour scheme with one modification if you want, over an unlimited number of pages. That’s one of the things CSS was designed for — flexibility.