Introduction to CSS

What are Stylesheets?

Cascading Stylesheets, or CSS, are both the same thing. Over the last few years, coders, in their new position as designers, 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 face> tags, despite wanting them all the same; or using 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 many of the formatting tags in HTML and use only structural ones (like headings, paragraphs and links) - separating style and content.

In late 1996 CSS became a reality. They claimed to be component of a webpage that would act as a partner to your HTML designs; taking care of all the layout, font, colour and overall look of your site. At first glance CSS seems primarily geared towards text formatting, but any tag can be used and redefined. If you ever decide to change the look, 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.

CSS's main boon however, is that you define things once, making it far more efficient than defining everything in HTML. This means pages download faster and you have to type less code, as your pages are shorter and neater.

That, and there are dozens of powerful extra formatting options and possibilities available through stylesheet commands that are not possible through normal HTML. You'll see these later on when we get on to things like backgrounds, spacing, layers and borders.

They 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.

Implementation

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

• Use one CSS file for all your pages.
• Put CSS commands into the head of each of your documents.
• Use the style attribute to put CSS code directly into a HTML tag.

One Central Stylesheet

This is the best way to use CSS, in my opinion. You write 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.

To create your stylesheet, open a text editor (NotePad or SimpleText will be fine). Remember in the very first lesson on this site, you learned how to save from a text editor into the .html file format? Well, here you'll be doing roughly the same except your file will have a .css suffix. Just save a blank file as style.css and put it in the same directory as your homepage. Now that you have that, I can show you the command syntax used in CSS:

And now a worked example:

P {font-family: Arial, sans-serif; color: #0000FF; font-size: 12pt; }

Just put that one line into your file for the duration of this tutorial. That's all you need. Having this style declaration in your css file would make all the text in your page enclosed in the <p> and </p> tags Arial font, blue, and sized 12 point.

This is how all the affected paragraphs will be formatted.

Have a look over these guidelines:

• The tag name is what's inside the triangle brackets - these are not included. The tag in this position is called a selector.
• The brackets are {curvy}, not [square] or (round). This does matter.
• After the property name there is a colon, but between each individual part there is a semicolon. Each of these pairs is a declaration.

You could add another line in under your first one. Try this line of CSS and then use some large headings on your page:

h1 {font-family: Verdana, sans-serif; color: red; font-size: 20pt; }

Your stylesheet should look 4 like this. Now that you have something in your file, you'll need to show your pages where their css file is. Put this line of code into the head part of any documents you want to read this file:

<link rel="stylesheet" type="text/css" href="style.css">

rel stands for 'RELationship' - the file's relationship to the page with this link on it, and type shows that it's a text file acting as a stylesheet. Once you've made sure that the href is correct (it can be defined absolutely or relatively) you should see your pages being formatted with your preferred values. You can link multiple stylesheets to each page if you want, like having one file with all your fonts, another for table attributes etc.

Some common tags you may want to redefine are

• h1 to h6
• p
• body
• link
• div

but you can change any tag you want. If you're looking for a list of CSS properties and values, look over » C-Net's Table of Style Sheet Commands.

If you want to affect multiple selectors with the same CSS formatting, add them all together, with commas, like so:

p, div, h1 {color: #00DDFF; font-weight: bold; } /* modifies all 3 main tags */

As above, you can also add comments to your stylesheet using the Java-inspired /*...*/ delimiters. These can give you or anyone else using your stylesheet vital tips about what's going on in your code.

Individual Style Blocks

If you use a common design across all of your site's pages, you should be using the method above. What you should use this for however, is if all your pages are different, with different needs, you can put style commands specifically useful to that page in. To embed style, put this into your head:

<style type="text/css">
<!--
Style stuff
-->
</style>


Just put all your CSS between the comment tags. These are there to stop the code coming up as text on your page. The type attribute here tells old browsers the MIME type of the code, and so allows them to ignore it since they won't understand it. This inline style block (it's not technically a stylesheet when put in this way) can be embedded in the body instead if you want, but it is a good idea to keep it to the top of your document so you can find it easily when you need to.

Using the style Attribute

If you need to modify one tag on its own you can embed style information into it like so:

<p style="color: blue; font-family: Arial; ">

The style formatting will stop as soon as you close the tag with the attribute (p in this case), just like any other attribute, so it will be just this paragraph that will be affected. Also note that there aren't any curvy brackets used here, but the colon/semicolon rule still applies. This is useful for once-off formatting, and overriding previously defined properties. If you find yourself adding the same style to multiple tags, it might be worth your while promoting it to your main stylesheet, to save time and space.

Want to see what a stylesheet looks like? 4 Look at ours! (use Notepad to open)

< Homepage | Full Index | Section Index >