This tutorial will teach you the basics of using CSS stylesheets and how to implement one into your web page.

CSS Stylesheets, also known as Cascading Style Sheets are very useful when you have a website. For instance, instead of typing all the font properties and background properties for each page, you can type it into one, and use it throughout the whole site. But before we get into all this, you must remember to make your stylesheet page end with a .css. If you dont, IT WILL NOT WORK! if your wondering, you can also use the CSS in the style area of your page, but I find using an actual stylesheet easier, therefore I will NOT cover it.

Hello Tech

Now we are going to get technical. The stuff you put in a css stylesheet is called a rule, or rules. Each rule has two main parts. The selector, which determines which elements are affected and the declaration, made up of one or more property/value pairs. which specifies just what should be done. Below is an example of how a rule works.

h1 {color: red;}

h1 is the selector, {color: red;} is the declaration. Now to break it up into something a little smaller. Inside the declaration, you have the property and value. In this example, color is the property, while red is the value.

*Please note the semi-colon (;). It ends a rule, and you need it after each and everyone you use. If you dont use any, the browser will completely skip over the stylesheets, it will do the same if you have used too many, so be careful.

Onwards To Rules

Before we go any farther, to make your stylesheet easier to read, you may want to add comments. Here is how to do this. Whats bolded is what you can change.

/* This is a stylesheet comment */

Now, its time to learn some basic rules. Remember, whatever is bolded is what you can change.

background {background-color: red;}

In the above example, it would display a page background thats red. You can change the color by changing the bolded red. For instance, you can make it green, blue, or you could use a hex code, such as #000000. If you want to learn more about hex codes, go to the website stuff section, and click the link titled "hex Codes". Now, the other part bolded color, is bolded because you can change it to. For instance, change it to image to make the background and image, and then you would have to change the red to the image url. Or, you could change the color to position and the red to a position on the webpage to tell it where the background should go. One last background example. If you change the color to repeat, and the red to either yes or no, it will tell the browser to repeat the background if you put yes, or not to repeat it if you put no.

border {
border-color: green;
border-spacing: 5;
border-style: dotted;
border-width: 8;
}

The first thing you will notice about the above example is that it is totally different, well, not quite. This time I combined some of the rules. if you look closely, it still follows the earlier examples with the semi-colons. In fact the earlier examples are almost identical, this one just has more rules. I am not going to go in detail about what all the border properties mean, as it is self-explanatory.

font {
font-family: Tahoma;
font-size: 14px;
font-style: bold;
}

This example, as you will notice, is like the one before. Instead of listing one property, it liists many. This one, however, is a little less english like. If you are wondering, font-family refers to the type of font you want, and font-style refers to italics,, bold, or underlined. Font-size is self-explanatory.

Well, I think thats enough examples now. So, now you have your stylesheet, we will say here that you named it stylesheet.css, and your wondering, how do I link it to my pages? Well, here is the code:

http://yoursite.com/stylesheet.css" rel="stylesheet" type="text/css" />

Theres the code. Just place it in the header area on each and every page that you want your stylesheet applied to. Note the only URL (http://yoursite.com/stylesheet.css), just change that url to your stylesheet URL.

Edit: If you would like to apply css coding more directly to your coding, you can use divs. For example, look at the code below: