Cascading Style Sheets Tutorial

This simple Cascading Style Sheets Tutorial will help you understand and start using css on your own website pages in minutes. What you need to know for Easy Cascading Style Sheets

A Style Sheet is simply a set of instructions used by web pages to define style of the page. They can be used to define all sorts of properties, such as size, shape, color, and positioning. They can be applied to all sorts of objects, such as paragraph, one section of a page, or can be used to define how the page acts as a whole. Style Sheets are very flexible and very powerful.

CSS can be set up in three different places:

  • In the head of a document. This is called embedded.
  • In an HTML tag within the body of your document. The name of this is inline.
  • In an external document that is then linked or imported into your HTML documents. This is called external.

I would recommend always use external style sheets rather than embedded styles. This external style sheet can be applied to a hundred different pages, without having to retype the information. Also, perhaps more importantly, if you want to change the appearance of your pages, you simply change one file, instead of making changes to all your pages.

Creating external CSS file:

You can write your css styles manually, but if you are not familiar with HTML code, I would recommend to use some simple software to do this. I found this great StyleSheet Maker sotware made by CoffeCup, which makes the whole proccess very easy. Infact I started using it myself, because it saves me quite some time of manual writing and the results are absolutely the same. It's only $30 so I think it is very cost effective tool. Click here to download StyleSheet Maker trial version and continue the tutorial

Creating a New Style Sheet To start a new Style Sheet, simply click on the button . Now you are ready to start Creating New Style Definitions.
When you want to test your style sheet, click on the button or the button. This will open the browser with a list of text in common tags, so you can see how text will look in each tag.

Finally, when you are done editing your style sheet, you will have to Apply the Style Sheet to your Web Page.

Defining a New Style

There are three ways to define a new style.

This will define a style for an existing tag. Simply click the arrow box, and select a tag from the list. This is usefull if you want all the tags on your page to have a certain property. For instance, if you want all visited links to have a certain color, select A:visited from the list, then define the properties of the style.

Here you can define a style with a name of your choosing. For example, you could define a style sheet named Bob. Then, in your page any time you want to apply the style Bob to a tag, you would use class="Bob". This is useful if you want some tags, but not all to have a certain style. For instance:

<P class="Bob">Hello</P>

The word first Hello would have the properties of Bob, while the second would not.

An ID is similar to a Class, except you should only use ID once per document. For instance, if you defined an ID named Tom, you should not do this:

<P ID="Tom">Hello</P>
<P ID="Tom">Welcome to my website</P>

ID's should only be used once, especially if you plan to do any scripting, as this may lead to errors in your script. If you need to use a certain style more once, use a Class identifier instead of ID.

After you have defined a new style, the next step is to Edit the Properties of your Style. This will define exactly how the style will act when you apply it to your page.

Editing the Properties of your Style

This is the elementary function of style sheet maker- defining how your styles will be displayed. After you have Defined your Style, you will now have to define the properties of that style. Make sure you define the properties of your style within the brackets for that style, like this:

.Bob { font-family: Arial; font-size: 14px; color: #FF0000; }

You may find it easier to read if you put each style on a new line, like this:

font-family: Arial;
font-size: 14px;
color: #FF0000;

To make things easier, we have a set of wizards for defining styles. Just put your cursor within the brackets, and then click on the appropriate button:

Font Properties

Color and Background Properties





After using the wizard, the appropriate code will be inserted at your cursor. You can define any number of properties for any style. Just make sure all the properties appear within the brackets.

Applying your Styles to a Webpage

There are two different methods of adding a Style Sheet to your web page: embedding the style sheet on your page, and linking to an external style sheet. To embed the style sheet in your page, all you need to do is copy everything between the <style> and </style> tags, and insert it on your page, between the <head> and </head> tags.

If you want to link to an external style sheet, you will first need to save the style sheet to the same directory your web page is saved in. After saving, click on the button , that will display the code needed to link to the external style sheet. Simply cut this code, and insert it on your web page between the <head> and </head> tags.

Get rid of your tables, and use Style Sheet Maker for positioning

HTML Tables are a great tool for positioning text and images on your webpage. Don't you just love trying to keep tack of all those tags? Things get even worse when you start putting tables within tables within tables. Pretty soon the code gets so confusing, you don't know which way is up. With Style sheets, all the confusion goes away. Just define a style sheet to handle positioning of elements on the page.

Here is example. Say we have two images, one of Bo, and one of Luke, and we want to position these images on our on our page. Using style sheet maker, we can position the images by creating ID's for each image:

#Bo { margin-left: 200px; margin-top: 300px; }
#Luke { margin-left: 400px; margin-top: 300px; }

Now we can apply the styles to our image tags, like this:

<IMG ID="Bo" src="bo.jpg">
<IMG ID="Luke" src="luke.jpg">

Now the image bo.jpg will be placed on the page 200 pixels from the left side of the screen, and 300 pixels from the top side of the screen, while the image luke.jpg will be placed on the page 200 pixels from the left side of the screen, and 300 pixels from the top side of the screen.

This method of positioning is much easier than using tables, and more exact than using simple alignment tags.

Contact us