Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Quick Reference Sheets for Webmasters

Quick Reference sheets are packed full of useful information for all webmasters.

HTML Reference Sheet

Style Sheets

Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages.

In the scientific environments in which the Web was conceived, people are more concerned with the content of their documents than the presentation. As people from wider walks of life discovered the Web, the limitations of HTML became a source of continuing frustration and authors were forced to sidestep HTML's stylistic limitations. While the intentions have been good -- to improve the presentation of Web pages -- the techniques for doing so have had unfortunate side effects. These techniques work for some of the people, some of the time, but not for all of the people, all of the time.

They include:

  • Using proprietary HTML extensions
  • Converting text into images
  • Using images for white space control
  • Use of tables for page layout
  • Writing a program instead of using HTML

These techniques considerably increase the complexity of Web pages, offer limited flexibility, suffer from interoperability problems, and create hardships for people with disabilities.

Style sheets solve these problems at the same time they supersede the limited range of presentation mechanisms in HTML. Style sheets make it easy to specify the amount of white space between text lines, the amount lines are indented, the colors used for the text and the backgrounds, the font size and style, and a host of other details.

For example, the following short CSS style sheet (stored in the file "special.css"), sets the text color of a paragraph to green and surrounds it with a solid red border:

p.special
{
color : green;
border : solid red;
}

Authors may link this style sheet to their source HTML document with the link element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="special.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="special">
This paragraph should have special green text.
</p>
</body>
</html>

Instead of using an external style sheet, authors may also use inline styles which is accessed by the style attribute of all html tags. For example, the above can be accomplished with an inline style as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inline Style Example</title>
</head>
<body>
<p style="color:green;border:solid red;">
This paragraph should have special green text.
</p>
</body>
</html>

For more information on style sheets, please look at the CSS Reference Sheet.