Web Design

Cascading Style Sheets – CSS Tutorial

CSS Tutorial

Introduction to CSS

Properties Table
A quick reference table for the css properties!

Using the Style Attribute
Use the style attribute inside an HTML tag to define styles.

Styles in the Head Section
Use the style tag in the head section to define styles.

Classes and IDs
Use classes to define styles.

External Style Sheets
Use style sheets to add the same styles to multiple pages.

Cascading style sheets are a new way of formatting your page layout, text, fonts, images, and almost anything you put on the page. They allow you to position things on your page down to the exact pixel. Also, if a style is declared in the head section of a page, a change to the style changes the style on the entire page. We’ll get to the details in later tutorials, but here is the general idea: Let’s say you created a style for a heading tag, <H3>

In your style, you set the color of your H3 tags to red. Now if you have 10 H3 tags on the page, and decide you would rather have your headings be blue, you would no longer need to go back and change the font color for each heading. All you have to do is change the style of your H3 tags from the color red to blue.

Changing the style once will adjust all of your H3 tags and they will now be all blue instead of red, with a lot less work. This gets even better if you use an external style sheet for more than one page. Changing the style properties in the external style sheet will now adjust every page that uses that style sheet, so you can avoid editing each page individually to change it! In a later tutorial, I’ll show you how to create and use an external style sheet, but for now we’ll stick to learning the basic use of styles on a page. Well, I guess that’s all I have for an introduction. So let’s get started with the first section, which shows you how to add a style as an attribute to an existing tag. It is called Using the Style Attribute.

Text Properties

Property What it Does Possible Values
letter-spacing Controls the amount of space between each letter in a section of text. normal (default)
number of pixels
line-height Controls the amount of vertical space between lines of text normal (default)
number of pixels
percentage
text-align Controls the alignment for a section of text browser decides (default)
left
right
center
text-decoration Controls what the text looks like none (default)
underline
overline
line-through
blink
text-indent Controls the indentation of the first line in a section of text 0 (default)
number of pixels
percentage
text-transform Changes the case of a section of text none (default)
uppercase
lowercase
capitalize
vertical-alignment Controls the vertical alignment of a section of text baseline (default)
sub
super
top
text-top
middle
bottom
text-bottom
word-spacing Controls the amount of space between words (doesn’t work as of yet) normal (default)
number of pixels

Font Properties

Property What it Does Possible Values
font-family Controls the type of font shown on the page browser decides (default)
font family name
font-size Controls
the size of the font
medium (default)
number of pixels
percentage
font-style Controls the style of the font normal (default)
italic
oblique
font-size Controls the size of the font medium (default)
number of pixels
percentage
font-variant Controls the variant of the font normal (default)
small-caps
font-weight Controls the boldness of the font normal (default)
lighter
bold
bolder
100
200
300
400
500
600
700
800
900

Color/Background Properties

Property What it Does Possible Values
color Controls the color of the text browser decides (default)
color name
background-attachment Controls the scrolling of the background scroll (default)
fixed
background-color Controls the color of the background transparent (default)
color name
background-image Allows you to set a background image none (default)
image url
background-repeat Allows different patterns of background repetition repeat (default)
repeat-x
repeat-y
no-repeat
background-position Controls the position of the background on the page 0% 0% (default)
postion in pixels ie {20,20}
percentage ie {5%,7%}
top
bottom
left
right
center

Box Properties

Property What it Does Possible Values
width Controls the width of a section auto (default)
number of pixels
percentage
height Controls the height of a section auto (default)
number of pixels
percentage
border-color Controls the border color of a section default text color (default)
color name
border-style Controls
the style of a border
none (default)
solid
double
border-width Controls the width of a border undefined (default)
number of pixels
thin
medium
thick
border-top-width Controls the width of a border side medium (default)
number of pixels
thin
thick
border-left-width Controls the width of a border side medium (default)
number of pixels
thin
thick
border-right-width Controls the width of a border side medium (default)
number of pixels
thin
thick
border-bottom-width Controls the width of a border side medium (default)
number of pixels
thin
thick
margin-top Controls the width of a margin from the specified side 0 (default)
number of pixels
percentage
margin-left Controls the width of a margin from the specified side 0 (default)
number of pixels
percentage
margin-right Controls the width of a margin from the specified side 0 (default)
number of pixels
percentage
margin-bottom Controls the width of a margin from the specified side 0 (default)
number of pixels
percentage
padding-top Controls the amount of padding from the specified side 0 (default)
number of pixels
percentage
padding-left Controls the amount of padding from the specified side 0 (default)
number of pixels
percentage
padding-right Controls the amount of padding from the specified side 0 (default)
number of pixels
percentage
padding-bottom Controls the amount of padding from the specified side 0 (default)
number of pixels
percentage
float Controls the floating of a section none (default)
left
right
clear Defines whether a section disallows other sections on its sides none (default)
left
right

Classification Properties

Property What it Does Possible Values
white-space Controls the white space formatting of a section normal (default)
pre
nowrap
display Controls the display of a section block (default)
inline
list-item
none
visiblity Controls the visibility of an element inherit (default)
visible
hidden
z-index Controls the layering of an element auto (default)
number

The first way to add a style to you page is to simply declare it inside an HTML tag. The way to do this is to add the style=” ” attribute to an html tag. The general form to add one style property looks like this:

style=”property:value”

To help clarify this, let’s look at an example. If you want the color of some text to look red, the style attribute would look like this:

style=”color:red”

The style sheet property is “color”. The value of the color is “red”. Notice there is a colon in between color and red, not an equal sign, and there are no extra quote marks.

Now, you just insert this into an HTML tag, such as the <DIV> tag. DIV is just a division on a page. Remember to close the tag when you are through or you will have more red text than you bargained for! Here is the sample code:

<DIV style=”color:red”>Wow, I am totally red!</DIV>

This will give you the following:

Wow, I am totally red!

You can also apply more than one property in the style attribute. Place a semicolon after your first property and value, and add another. So if we want the text to be red and to be italic, we would do the following:

<DIV style=”color:red; font-style:italic”>I’m some red-hot italic text!</DIV>

Now we will have text that is both red and italic:

I’m some red-hot italic text!

In this way, you can add any number of properties to the section of text. Just separate them with semicolons:

<DIV style=”color:red; font-style:italic; font-weight:bold; font-family:Arial”>
Now I’m also bold and have an Arial font!
</DIV>

Now you would get this:

Now I’m also bold and have an Arial font!

Don’t worry about learning all of these properties right now, we’ll get to examples of all of the css properties in later tutorials. This is just showing you how to use the style attribute for now. If you want to see a page with a listing of the css properties, check out the CSS Properties Tables and browse through the listings. You can even use the style attribute now to test some of them out if you’d like.

Well, if you want to move on to the next section, you can see how to add the style properties to tags by using the <STYLE></STYLE> tags in the head section of your page.

Well, the style attribute was okay, but you may have noticed it did not make anything much easier than it was to use several html tags. Well, now we are going to see a method of using style sheets that will begin to make life a little easier because you won’t have to write the same thing numerous times on one page to get the effect you desire.

To do this, we are going to declare a style inside the head section of the page. A style in the head section must begin with the <STYLE> tag and end with the </STYLE> tag. Below is an example that declares the style for the <SPAN> tag in the head of the document. (The SPAN tag is a division in a page. It won’t break to the next line after you close the tag, like the DIV tag does) :

<HEAD>

<STYLE>
<!–
SPAN { color:red; font-style:italic }
–>
</STYLE>

</HEAD>

The whole thing begins with the <STYLE> tag. Right after the STYLE tag you will notice that we begin an html comment. This hides the contents of the STYLE tag from browsers that do not recognize it, so it won’t be printed on your page.

Now you see this line:

SPAN { color:red; font-style:italic }

This line declares that every time you use the <SPAN></SPAN> tags in your page, the text between the tags will be red and italic. Notice you do not use the less-than “<” or greater-than “>” signs around the SPAN declaration. Also, rather than using equal signs or quote marks, we place the style properties inside two curly brackets { } to declare the style properties. The properties are each separated with a semicolon. For more on the style properties and values, see the previous section for more on the syntax for declaring a style property and its value.

Now that you have that in your head section, you can just use the <SPAN></SPAN> tags to make yur text red and italic, rather than writng out two tags for it each time you need the effect:

<SPAN>I am red and italic,</SPAN> but I am not. <BR>
<SPAN>I am red and italic too!</SPAN>

This will give you the following:

I am red and italic, but I am not.
I am red and italic too!

Now if you were using Netscape, you probaly did not see the red and italic text above. Netscape doesn’t seem to support this feature yet, so here is what it will look like when Netscape puts out a new browser supporting this feature:

I am red and italic, but I am not.
I am red and italic too!

You can declare a style this way for almost any tag, but sooner or later you’ll run out of tags, or you will not want EVERY instance of a certain tag to do the same thing. In the next section, we will see a way to get around this problem u
sing classes and IDs rather than declaring a style for the tag itself.

Now that you know how to use styles in the head section, you may like to use a method besides defining a tag to have the same style each time you use it. What if you want to have a section of text with a red font and another with a green font, but do not want to use up all the tags you have for a section of text? Well, using a class allows you to change the style of something without the need to use up a tag each time you wish to have a new style.

To define a class, go to the head section of your document, and then go inside the <STYLE> and </STYLE> tags. A style definition would look like this:

<HEAD>
<STYLE type=”text/css”>
<!–
.redfont { color:red }
–>
</STYLE>
</HEAD>

The name of our class is “redfont”. Notice the dot that comes right before the name of the class. This notifies the browser that this is a class definition and not a tag definition. After that, we define the style the same way we did before.

So, if you want to declare one class that gives you a red font, and another that gives you a green font, you would type the following:

<HEAD>
<STYLE type=”text/css”>
<!–
.redfont { color:red }
.greenfont { color:green }
–>
</STYLE>
</HEAD>

Okay, now that we have our classes set up, we need to see how to use them later on in the body section of the page. To use your class, all you need to do is add the class=” ” attribute to the tag you wish to have the style of your class. So, if you wanted a line of text to be red, you could add the class attribute to a <DIV> tag, like this:

<DIV class=”redfont”>I am red, so I’m important.</DIV>

Now you will get the text in a red font:

I am red, so I’m important.

Now, if you would like to have a section with a red font and a section with a green font, but wish to use the DIV tag for both, you can!

<DIV class=”redfont”>I am red, so I’m important.</DIV>
<DIV class=”greenfont”>I am green, so there.</DIV>

And now you have what you wanted:

I am red, so I’m important.
I am green, so there.

Now that you know about classes, you may want to see an ID. These are used in the same way, but rather than using a dot before the name, you use a number sign (#).

<HEAD>
<STYLE type=”text/css”>
<!–
#redfont { color:red }
#greenfont { color:green }
–>
</STYLE>
</HEAD>

And when you wish to use the ID later, use the ID=” ” attribute:

<DIV ID=”redfont”>I am red, so I’m important.</DIV>
<DIV ID=”greenfont”>I am green, so there.</DIV>

And you get the same thing we got with the class definition:

I am red, so I’m important.
I am green, so there.

Using classes and ids, you can begin to see what style sheets can do for you. If you had a bunch of text sections in green and wanted them all to be light green instead, you would only need to change the style definition of the class “greenfont” in your head section, rather than changing 5 or 6 <FONT> tags.

If you would like this effect to work accross multiple pages, then you will want to use an external style sheet. This will enable you to use a set of styles in each page that is linked to the style sheet.

Well, suppose you would like to be able to use one group of styles- but you want to use them on many pages at once. This can be done through the use of external style sheets.

To begin, open your text editor and create a new blank document. Now, type in just the following information:

DIV { font-family:Arial }
.redfont { color:red }

Now, save the file as “style1.css” (You can use any name you wish, just be sure you have the .css extention at the end).

To link to a style sheet, you need to add the <LINK> tag inside the head section of your html document. Here is the general form:

<LINK rel=”stylesheet” type=”text/css” name=”anyname” href=”url”>

The rel=”stylesheet” attribute just says to look for a stylesheet. The type=”text/css” tells the browser the mime type of the document, which is a cascading style sheet. The name=” ” attribute allows you to give the style sheet a name if you wish. The href=” ” attribute is where you place the url of the style sheet. You can use an absolute or relative url, as long as you point the browser to the .css file you wish to use.

Now, open up an HTML file you would like to add these styles to. Go to the HEAD section of that page (between the <HEAD> </HEAD tags). Now, type in the following HTML to link to the style sheet you created a minute ago: (Be sure both files are in the same directory)

<HEAD>
<LINK rel=”stylesheet” type=”text/css” name=”style1″ href=”style1.css”>
</HEAD>

You must add the LINK tag to every page that you want to use the style sheet on. If you don’t, some of your pages will not work correctly, and that messes up what you wanted to do.

Now, any time you use the DIV tag in one of your pages linking to the style sheet, you will get an Arial font:

<DIV>I am Arial!</DIV>

And….

I am Arial

And when you use the “redfont” class, you will get a red font:

This line is <SPAN class=”redfont”>really</SPAN> important!

And….

This line is really important!