There are two ways of styling your pages; regular HTML tags, such as <i>the italic tag</i>, and then there is CSS. CSS, short for 'cascading style sheets', is the new preferred method of making your page more attractive. This is because it is easily modifiable, performs well with javascript, and is much easier on the eyes.

Suppose that you wanted all of the text inside of a table green. This means that inside of each table cell- remember, the <td> tag?- you would need a <font color="#00FF00"></font> tag. But, then, maybe in a month you want it all red? You'd have to go back and change every single font color. That could take days, especially if you have a big site. This is where CSS styles come in.

There are a few ways to style. First is to include a style="" attribute inside your tags, like this:

<div style="color:green">green text</div>

Which isn't a whole lot different than just using font tags. So, to make this code better, you'll need a style sheet either attached to your page, or created inside of your page. Most likely, if you have a large site, you'll make an external sheet and attach it using this code:

The href="class.css" is the location and name of the file. There is more info on creating style sheets on the CSS IIC course.

However, if you want a stylesheet right in your page, you would include it in the head tags, like this:

<head>
	<style>
		td{color:#00FF00;}
	</style>
</head>

To include a style inside of an object, if the stylesheet does not automatically style it by type, you'll use the attribute class="class name". Pretty easy, huh? If you're curious, try loading and playing with this code in your HTML editor. Notice that classes without a period in front of them are automatically applied to tags with that name, and named classes use a period.

<html>
	<head>
		<title>I'm playing with CSS!</title>
		<style>
			span{
				color:#00ff00;
			}
			div{
				border: 1px solid #000000;
				font-family:Verdana;
				font-size:20px;
				color:#FF0000;
			}
			.blue{
				color:#0000FF;
			}
		</style>
	</head>
	<body>
		<span>Span tag!</span><br />
		<div>Div tag!</div>
		<div class="blue">Blue div tag!</dib>
	</body>
</html>