Stylesheets Tutorial

[Shane]

Part 1 - Introduction

Introduction
CSS (Cascading Style Sheets) is a great new technology which is taking the web by storm. The strange thing is, very few people have actually heard of it. You have probably seen Stylesheets in action on many websites. Anywhere you see a text link change color when you move your mouse over it probably uses stylesheets.

Why Should I Use Them?
This is actually a very good question. Why should you learn a new web language just so that links on your site change color? Some people even say this is tacky. CSS actually has a lot more use than that. Image being able to change what an HTML tag does, to be able to update a whole site by changing one file. It is possible with CSS.

Cascading Style sheets let you do many things you could never do before. If you want to change the <a> tag to always display text in bold, red, underlined you could do it with Cascading Style sheets. If you later decided you wanted it green, font size 6 with no underline you could change it just as easily. You can even link to a stylesheet file from the pages on your site. When you update the stylesheet file you can see the updates in the rest of your site.

Stylesheets also allow you to do things you never could with HTML. You can set background colors for text, you can indent text using centimetre values and you can place items exactly where you want them on a page. Most of this can be done from a linked file and can be updated quickly.

Stylesheets can be included in your pages in three ways. A linked file on your server, at the top of the page which applies to everything on the page or an inline style which works like a normal HTML tag.

Part 2 - Inserting Stylesheets & Rollovers

Introduction
After the last part you should know that CSS is an extremely powerful web language which can create amazing websites.

How To Include Stylesheets
There are 3 ways to include stylesheets on your page. You can create a link to an external file in the head of your document. This is very useful if you would like to make sitewide updates by changing one file. The second way is to include the stylesheet information in the head of the document. This allows you to have a style applied to the whole page without being the same as the rest of the site. Finally you can have inline styles, which let you change the style of one piece of text.

At this point I should mention that linked stylesheets are not supported by Netscape apart from versions 6.x

To insert a linked stylesheet you need to put the following into the head of your document:

Code: Select all

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

The URL of the stylesheet can either be relative or can use an http://

To insert a stylesheet into the head of a page insert the following into the head of your document:

Code: Select all

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

Stylesheet in here

-->
</style>

Inline styles are added differently and I will cover these in detail next week.

Rollover Links
One of the most popular uses of stylesheets is to create mouse rollover effects on links on your site. They are extremely easy to create and are very versatile.

The code you should insert should either go in a file (saved as a .css) for linked stylesheets or in the <style> section of your pages:

Code: Select all

A:link {text-decoration: underline; color: #0000FF}
A:visited {text-decoration: underline; color: #990099}
A:hover {text-decoration: none; color: #FF0000}
A:active {text-decoration: none; color: #FF0000}

Here is an explanation of what it all means:

Code: Select all

A:

This tells the browser you are making changes to the <a> tag (for links).

link
visited
hover
active

This tells the browser what to do to each type of link (hover is when the mouse is over the link).

The information inside the {} tells the browser what to apply to each tag.

Code: Select all

text-decoration: underline;
text-decoration: none;

This tells the browser whether the text should be underlined or not.

Code: Select all

color: #FF0000

This tells the browser the color to make the text (using an RGB code). You can also add:

Code: Select all

text-weight: bold;

to the stylesheet to make that text bold.

When you are adding new elements you must always remember to have a ; after each one.

Part 3 - Inline Styles, Classes & Font Effects

Introduction
In the last part I showed you how to make hyperlink mouseovers and how to use linked and whole page stylesheets. In this part I will show you how to just apply your styles to one part of the text and how to format fonts using stylesheets.

Inline Styles
Inline styles are added into an HTML tag so that you can just change the content of that tag. Apart from that, they are used exactly the same as a normal stylesheet. To include one in your H1 tag for example:

Code: Select all

<H1 STYLE="stylesheet information">Text</H1> 

The stylesheet information included is the same as what you would put inside the { } of a standard stylesheet.

Classes
Another way of making different styles for different parts of your text is to use classes. These allow you to, for instance, have three different types of <p> tag stylesheet changes on your site. To do this you give each one a class. This is basically a word which corresponds to a change. For example you could have two classes called 'maintext' and 'footnote' for your <p> tag with different formatting information.

In your stylesheet you would have:

Code: Select all

P.maintext (stylesheet information}
P.footnote {stylesheet information}

Then in your HTML you would have the following:

Code: Select all

<p class="maintext">All the information</p>

<p class="footnote>All the information</p>

in your HTML to use the different styles.

Other Font Formatting Options
Here are some of the other things you can do to your font's using stylesheets and the code they require. All of these should be placed inside the { } of your stylesheet or in inline styles. If you use more than one you should separate each with a semicolon:

Code: Select all

font-family: fontname, "font name", font;

This sets the font the text will be displayed in. If the font has more than 1 word in the title use quotes. Each font should be separated with a comma.

Code: Select all

font-size: 16pt;

This is the font size and can be specified using standard point sizes using pt after it or with one of the following:

px - pixels
in - inches
cm - centimeters
mm - millimeters

Code: Select all

font-style: italic;

This either makes fonts italic or normal (by changing italic to normal above)

Code: Select all

font-weight: bold;

This makes text bold or normal (as above). You can also use numbers to represent how bold the text is from 100-900.

Code: Select all

text-decoration: underline;

As well as putting an underline on your text this can put an overline (a line over the text) and strike through (using line-through). To take all lines away use underline.

Part 4 - Other Stylesheet Effects

Introduction
In this, the final part of the Stylesheets Tutorial, I will show you some of the other useful effects you can do with Stylesheets. Many of these are very good for making nice looking websites. Note that on this page all blue text should be placed within the { and } in your stylesheet on in an inline style.

Indenting and Aligning Text

One clever effect you can achieve with stylesheets is to indent text

Code: Select all

text-indent: 1cm 

You can use this with the normal units (see part 3).

You can also use stylesheets to align text:

Code: Select all

text-align: left

This may not seem particularly special as you can align text with HTML but the benefit of stylesheets is that now you can use justify as well as left, right and center.

Positioning Objects
Here is what you have always been looking for on when making a web site. You can exactly position anything on a web page, just like in a Desktop Publisher! To do this you should use:

Code: Select all

position: absolute; left: 100px; top: 100px

This would place whatever you applied this to 100 pixels from the top of the page and 100 pixels from the left. Again you can use any of the length units you learned earlier. You can also use percentage values.

This is an extremely useful tag as it can be used to place objects with precision.

Colors and Backgrounds
The first, and most simple, color option you can do with stylesheets is to set the text's color using:

Code: Select all

color: #FF0066 

This does the same as an HTML color (using HEX) but you can also use the following:

Code: Select all

color: RGB(53,36,102)

This specifies the color in RGB values, like in PhotoShop or PaintShop Pro. This could be very useful if you are trying to match colors.

Code: Select all

background-color: #FF0066 

This will put a background color on a piece of text (like using a highlighter), very useful for making some of a page stand out. You can also use RGB values for this, like above.

Code: Select all

background-image: url(http://www.yourwebsite.com/file.gif) 

Instead of applying a background color to some text, this will put a picture in the background. It works best on a paragraph of text. The image will tile, just like a web page background.

Conclusion
As you can see from this tutorial, stylesheets are one of the most useful technologies available on the web. Using stylesheets you can make your site easy to update and can add new effects to make it stand out from the crowd.