|
Beginner Tip:
Presenting Your Page With Style
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
World Wide Web Consortium (W3C) developed Cascading Style Sheets (CSS) in an effort to return HTML to its original purpose: separating information from presentation. HTML is primarily concerned with document structure, while style sheets control how the content looks (fonts, colors, italics, etc).
Think of your web page as a building. The HTML code is the blueprint used to define how the building is constructed and style sheets describe its interior design (colors, wall coverings, etc).
Developers who understand the purpose, strengths, and current limitations of style sheets use them to quickly create pages that display consistently across browsers and download faster.
Style Sheet Advantages and Disadvantages
Style sheets offer many advantages over current layout techniques:
- Greater page layout control: Design pages that display consistently across browsers.
- Decreased development and maintenance time: Define or update the presentation of every page in your web site from a single document if you use linked style sheets.
- Decreased download time: Style sheets eliminate the need to include FONT tags and other HTML tags that define style. Less code means faster download!
|
The main disadvantage of style sheets is lack of consistent browser support. Browsers earlier than Microsoft Explorer 3.0 and Netscape Navigator 4.0 don't support them at all. Higher browser versions support CSS inconsistently. Developers have two choices: only use CSS rules that both browsers recognize, or create a different style sheet for each browser version.
Basic CSS Concepts Are Easy To Grasp
It's surprising how simple this powerful tool really is. You only need to understand a few basic concepts to get started:
- Rule: A declaration that describes how a page element should be displayed. A style sheet is a collection of rules.
- Basic Syntax: A selector (what is affected) is changed by the declaration (the effect you want). The syntax necessary to make H1 tags the color red would be:
Selector Declaration - H1 {COLOR: red}
- Properties and Values: A rule declaration is broken into two parts: the property of the text (font-face, color, etc) and the value you apply to the property.
This is displayed as:
TAG {property: value} Note the curly braces!
- Inheritance: The ability of one property to inherit the properties of an enclosing tag. For instance, if you set the <BODY>color to red, lists defined with the <LI> tag will also be red unless you make another rule that sets <LI> to a different color. Inheritance allows you to make your rules as broad or as specific as the page requires.
- Cascade: More than one style sheet can affect the presentation of a document. If style sheet instructions conflict, several rules govern which style sheet will "win". This can become quite complicated - it's not a technique for beginners.
|
Create A Simple Style Sheet For Your Web Page
Let's create a simple style sheet that will display consistently across browsers. Our style sheet will have the following rules:
- BODY font is Verdana, with Comic Sans MS and Serif named as alternate fonts.
- BODY color is Red.
- H1 Heading size is 18 pt., color is Blue
- H2 Heading size is 14 pt.
- P size is 10 pt.
|
Simply insert the following text inside your <HEAD> tag
<STYLE TYPE = "text/css">
BODY {FONT-FAMILY:
verdana, "Comic Sans MS",
serif; COLOR: red;}
H1 {FONT-SIZE: 18pt; COLOR: blue;}
H2 {FONT-SIZE: 14pt}
P {FONT-SIZE: 10pt}
</STYLE>
|
Your web page will display like this.
This technique embeds a style sheet in your page. A more advanced technique is to create a standalone style sheet document and then link those styles in each of your web pages. Use this method to make maintenance even easier - you merely edit your style sheet document to change the whole site.
Important Points To Remember
- Enclose properties and values in curly braces {}.
- Font colors: Note that we specified the color blue for the H1 heading tag. Since we didn't specify a color for the H2 heading tag or paragraph tag, both will inherit the color red from the BODY rule. All the tags inside the BODY tag inherit the FONT-FAMILY attribute.
- Font selections: Always list several different fonts to protect your page from browsers with limited font support. List the font you prefer first, then others in descending order. It's always a good idea to include a basic font family name (like serif) at the end. In this example, a browser that doesn't recognize Verdana will display in Comic Sans. If the browser doesn't recognize Comic Sans, the display defaults to a basic serif font.
- Fonts with more than one word in the name must be enclosed in quotation marks ("Comic Sans MS"). Generic font names are never enclosed in quotes.
- Separate multiple property declarations in a tag with semi-colons.
|
Future HTML Versions Will Require Style Sheets
So why go to all this trouble?
The W3C is moving quickly to adopt style sheets as the standard. Some commonly used tags like <FONT> and <CENTER> are deprecated in HTML 4.0. Deprecated means they are marked for deletion in future versions. HTML will support them for a long time, but you should become familiar with the alternatives now.
This may seem like a lot of work at first, but you'll appreciate it when you develop sites with many pages and layout options. Despite their limitations, Cascading Style Sheets are a valuable tool for developers.
Experiment with simple style sheets on your site and learn to present your pages with style.
|
