Cascading Style Sheets Tutorial
CSS is another word for Cascading Style Sheets.

CSS is used to design a web page, and give it a good style.

We normally use css in the head tags of web pages.

<head></head>

We use this html code to allow our web pages to have this css style.

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

This should be used if you would like to use CSS on only one web page.

If you are creating a lot of web pages, and you would like to use the same style, then I suggest using an external stylesheet :

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

You are required to upload your stylesheet to your website as a css file. So, that means you must have a css file on your computer, if you would like to upload the css file to your website. You can just change the ending of a notepad on your computer from '.txt' to '.css' , and you have a css file. But, you have just created your css file, now you will need to give the file some content, so that it will give your web page a certain style. After you added in the content of the css file, you can upload it to your website, and you will find a link of your css file soon. Use that link, and add it in this code that should be placed in your head tags.

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

All you need to do is replace 'stylesheet.css' with the link of your css stylesheet that you uploaded to your website. And then add it to your head tags.

Now that cleared up a few things, it is time to teach you what goes into the css file.

First, let us view one css code :

Have a good look at that image. It contains this css code below :

body
{
background-color : #000000 ;
} The text, "body", is a selector, and the bottom is it's content. After the selector is seen, you will see a curly bracket pointing left. This is the opening of the content for a certain selector. The text that says, "background-color" , is the property, and the "#000000" is the value of that property. The colon ( colon = : ) is used to give a value to a property. And, a semi-colon ( semi-colon = ; ) is used to end the declaration. A declaration is a style that is attached to a certain selector of a css stylesheet.

So, this is what a declaration looks like :

{
background-color : #000000 ;
}

Legend :

Sign in green = curly brackets

Sign in red = colon

Sign in blue = semi colon

So, we have learnt a few things about css, but now let us go deeper.

There are two types of selectors. Remember what a selector is? ( If you can not remember what a selector is, then read above. )

The two selectors are called, the id selector and the class selector.

Legend :
Sign in green = curly brackets
Sign in red = colon
Sign in blue = semi colon

ID Selector

The id selector can be used to give style to one element on a web page. In the css stylesheet, the id selector has a ??? sign ( # ).

Example :

Add this css code to your css stylesheet :

#iStyle
{
color: blue;
text-align:left;
font-weight:bold;
font style:italic;
}

Now, add in some text on your web page between your body tags :

<p id="iStyle">iWebBuddy.com</p>

Now, add in some extra text, without the "id" attribute.

<p>Is my favourite website</p>

Now, here is a preview of that example : Click Here To View Preview !

Notice how to style of the text is different. The first sentence, says "iWebBuddy.com". And, the it looks different to the default style. After adding the css code ( id selector method ) in your css stylesheet, you can use the id selector ( <p id="iStyle">text will be placed here</p> ) to do this to any text you choose on your web page.

Class Selector

The class selector is normally used to give style to one or more elements on a web page. In the css stylesheet, the class selector has a full stop sign ( . ).

I will add this css code to my css stylesheet :

.iStyle{
color: silver;
font-weight: bold;
}

Now, I will add some content in my body tags :

<p class="iStyle">iWebBuddy.com</p>

Or

<div class="iStyle">iWebBuddy.com</div>

Difference Between The ID Selector And The Class Selector

The difference between the id selector and the class selector are :

You have to choose which selector you would like. ( The id selector or the class selector )

<p class="?">

<p id="?">

In the css stylesheet, to create a id selector, you will need this sign - #

In the css stylesheet, to create a class selector, you will need this sign - .

The id selector can only give style to one element on a web page, while the class selector can give style to one or more elements on a web page.

Example :

So, I will create a css stylesheet with this :

#iD{
background-color:silver;
}
.class{
color:blue;
}

Then, I add it in my style tags, and place them in my head tags. Now, my content will be after the first body tag.

<p id="iD">Hello</p>

<p id="iD">I am a iWebBuddy.com fan</p>

<p id="iD">Come and join us please</p>

</div>

Notice how I placed them. Did you notice how I only used one class attribute, but the way I placed it, the effect was used on all three elements?

Here is a preview of the results from doing this : Click Here To View Preview !

Now that you have learned CSS, you will be able to design your web pages using cascading style sheets.