<class home>  <styles>   <back   next>

Styles

Defined:

A style is a group of attributes that are represented by one name. Style sheets are pages holding groups of styles. Style sheets are great for applying formatting accross a web page or your entire site. They are easy to update, making widespread changes on your site (such as changing all headings red or all text in Arial size 12). Mostly style sheets format text but they can also set formatting for other layout objects on your page.

Style sheets refer to using a separate page for your style elements only that will have to be uploaded with your site. The pages have a ".css" extension.

You don't have to use styles in separate pages, you can use what's called "inline" style and put it in the <head> tag of a page and the rest of the page will format the text based on the inline style. Style sheets are just as easy to use and are recommended over inline style because you can link to them from any page on your site and control the style of many pages consistantly.

*note: style sheets work only in browsers later than version 4. So only in Netscape or Internet Explorer version 4 and above. Older browsers will ignore the style you have set up in your style sheets.


What does it look like in the html code:

Inline style: (in the head tag)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>styles: defined</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
a{color:#66CCFF;text-decoration:none}
//.style { }
-->
</style>

</head>
<body>
<a href="http://www.boo.com">boo</a>
</body>
</html>


note:
change the text in yellow to your specific style information.


linking to Style sheet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>styles: defined</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="stylesheet/style.css" type="text/css">
</head>
<body>
<a href="http://www.boo.com">boo</a>
</body>
</html>

note:
change the text in yellow to your path to the style sheet file