Cascading Style Sheets Tutorial

AlphaZone Computer Resource Center

This tutorial assumes that you know something about HTML. If you are unfamiliar with the basics of HTML then head to our Basic HTML Tutorial. Otherwise, let's get started!

CSS is short for Cascading Style Sheets. Style Sheets give you precise control over things such as font sizes, table border colors, positioning of text boxes and more.

Style Sheets may not work correctly in older browsers. 4.0 or above is recommended for full use of Style Sheets.

In order to get started you will need a generic page. So go ahead and copy this:

<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Test Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Now on to how to put Style Sheets on your page!

Putting Style Sheets On Your Page

There are two ways to insert Style Sheets into your page. One way is to insert the style sheet directly into the page. It must go between the <head> and the </head> tag.

Here is an example of a style sheet in a page:

<html>
<head>
<title>Test Cascading Style Sheets Page</title>
<style type="text/css">

</style>
</head>
<body bgcolor=#000000>
<center>
<font class="bigfont">Test!</font><br>
<font class="mediumfont">Test!</font><br>
<font class="smallfont">Test!</font><br>
</center>
</body>
</html>

The other way to insert style sheets is to call them from a file. Here is an example of that:

<html>
<head>
<title>Test Cascading Style Sheets Page</title>
</head>
<body bgcolor=#000000>
<link rel="stylesheet" href="teststyle.css" type="text/css">
<center>
<font class="bigfont">Test!</font><br>
<font class="mediumfont">Test!</font><br>
<font class="smallfont">Test!</font><br>
</center>
</body>
</html>

In this case the file teststyle.css would contain the style sheet, everything from <style> to </style>, for example:

As you can see, both of these pages look exactly the same! Either one of these ways will work the same, however including it in the page usually keeps load time a little lower.

Now, on to explaining the guts of the Style Sheets, and how to make them work for you!

Declaring Selectors

There are three parts to a style sheet, the selector, the property, and the value. This page will explain what the first one is, a selector, and how to use it.

The following text that is in red is a selector.

Selectors simply classify what the properties and values will apply to.

There are many different ways to refer to a selector to get it's properties to do what you want them to do. The three main ways are through defined selectors, IDs, and classes.

To use the first way, a defined selector, just specify what you want to change. For example, if you would like to make it apply to all text between a <h1></h1> you would make the selector "h1", like in the following example:

There are many different defined selectors. There are a list of the most currently used ones at the bottom of this page with examples.

Another way to apply styles using selectors is through a class. This is shown in the following text:

Then "Test" would have the properties listed under the selector ".mediumfont" applied to it. It's that simple, just make it the same with a "." before it in the style sheet.

Another way to apply styles with selectors is IDs. Here is an example of this:

The style sheet for this would look like the following:

In this case "Test" would again have the properties applied to it that are under the "smallfont" ID.

To define an ID just put a "#" before the selector name in the style sheet.

The three ways we have just talked about do not only have to be applied to fonts or text. You can apply them the same way with tables, boxes, and more.

Below are a list of the most common defined selectors:

Selector	Way It Works
body	Default text properties for all text on the page.
A:link	Defines properties for links.
A:active	Defines properties for links that are active.
A:visited	Defines properties for links that are visited.
A:hover	Defines properties for links that your mouse is over.
A.test:link	Allows you to use <a class="test">link</a> to define link properties.
A.test:active	Allows you to use <a class="test">link</a> to define link properties that are active.
A.test:visited	Allows you to use <a class="test">link</a> to define link properties that are visited.
A.test:hover	Allows you to use <a class="test">link</a> to define link properties that your mouse is over.
TD.test	Allows you to use <td class="test"></td> to define td properties.
h1, h2, h3, h4, h5, h6	Default text properties for text inside <h1> tags and so on.
.test	Allows you to use <font class="test"></font> to define text properties.
#test	Allows you to use <div id="test"></div> to define text properties.

Now that you know how to declare selectors, let see how to declare properties and values for those selectors! On to part four!

Declaring Properties And Values

There are three parts to a style sheet, the selector, the property, and the value. This page will explain what a properties and values are and how to use them.

The previous text that was in red is a property. The blue was the value that is for the property.

As you can see, each property is declared, and then a colon, then it's value(s) are listed. Between properties/values there should be a semicolon. You can use more than one value for each property and it will use them in order, for instance on the a:link selector it will try the Arial font, but if you don't have Arial, it will use Verdana. If you don't have either one it will default to whatever you have specified for the page (body selector).

With that chart, you should have enough information now to create your first Style Sheet! The best way to learn them is to experiment, and keep the chart of properties and values handy! Enjoy!

List of CSS Properties And Values

The table below lists the current properties and values used:

Text Properties
Properties	Values	Examples/Notes
font-family	family-name generic-family	Arial, Tahoma serif, sans-serif
font-size	(pt), (px), (percent)	pt is Point, i.e. 12pt. px is Pixel, i.e. 20px.
font-style	normal, italic, oblique
font-variant	normal, small-caps
font-weight	normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller	Number can be 100, 200, 300, 400, 500, 600, 700, 800, or 900.
word-spacing	normal, 1em	1em, 2em, and so on.
letter-spacing	normal, 1em	1em, 2em, and so on.
text-decoration	none, underline, overline, line-through, blink
vertical-align	baseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent)
text-transform	none, capitalize, uppercase, lowercase
text-align	left, right, center, justify
text-indent	(length), (percent)	Length is in pixels.
line-height	normal, (length), (percent)	Length is in pixels.

Color/Background Properties
Properties	Values	Examples/Notes
color	(color)	Color is in hex code.
background-color	(color), transparent	Color is in hex code.
background-image	none, (location)
background-repeat	repeat, repeat-x, repeat-y, no-repeat
background-attachment	scroll, fixed
background-position	(percent), (length), top, center, bottom, left, center, right

Box Properties
Properties	Values	Examples/Notes
margin-top	(length), (percent), auto	Length is in pixels.
margin-right	(length), (percent), auto	Length is in pixels.
margin-bottom	(length), (percent), auto	Length is in pixels.
margin-left	(length), (percent), auto	Length is in pixels.
padding-top	(length), (percent)	Length is in pixels.
padding-right	(length), (percent)	Length is in pixels.
padding-bottom	(length), (percent)	Length is in pixels.
padding-left	(length), (percent)	Length is in pixels.
padding	(length), (percent)	Length is in pixels.
border-top-width	medium, thin, thick, (length)	Length is in pixels.
border-right-width	medium, thin, thick, (length)	Length is in pixels.
border-bottom-width	medium, thin, thick, (length)	Length is in pixels.
border-left-width	medium, thin, thick, (length)	Length is in pixels.
border-color	(color)	Color is in hex code.
border-style	none, dotted, dashed, solid, double, groove, ridge, inset, outset
width	auto, (length), (percent)	Length is in pixels.
height	auto, (length), (percent)	Length is in pixels.
float	none, left, right
clear	none, left, right, both

Classification
Properties	Values	Examples/Notes
display	block, inline, list-item, none
white-space	normal, pre, nowrap
list-style-type	disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
list-style-image	none, (url)
list-style-position	outside, inside

Alignment
Properties	Values	Examples/Notes
position	static, absolute, relative
left	auto, (length), (percent)	Length is in pixels.
top	auto, (length), (percent)	Length is in pixels.
width	auto, (length), (percent)	Length is in pixels.
height	auto, (length), (percent)	Length is in pixels.
clip	auto, (shape)
overflow	visible, hidden, scroll, auto
z-index	auto, (integer)
visibility	inherit, visible, hidden

Basic HTML Tutorial | Table Tutorial | Frames Tutorial | Meta Tag Tutorial | Forms Tutorial