Web Hosting Directory | Web Hosting Resources | Webmaster Resources | Domain Tools | Search Engine Marketing | Forums
  Signup
Today: 1,218   Yesterday: 1,015   Max: 1,872   Total: 464,271   Current Users : 30 (Member 0) 
HTML RESOURCES

WEBMASTER RESOURCES

WEBMASTER TOOLS

JAVASCRIPT RESOURCES

PHP RESOURCES

MISCELLANEOUT RESOURCES

 

Break the <FONT ...> Habit: Getting Started

Let's begin by looking at the basic structure for using styles. Styles are set by adding a <STYLE ...> element to the <HEAD> section of your page. (Later we'll look at loading styles from an external file.) So, for example, the following code, which should be copied into the <HEAD> section, sets a style rule for <H2 ...> elements:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<STYLE TYPE="text/css">
<!--
H2
   {
   color:green;
   font-size:30pt;
   font-style:italic;
   }
-->
</STYLE>

Line 1 opens the <STYLE ...> element. Line 2 opens an HTML comment. The comment hides the styles code from search engines and older browsers that don't understand the <STYLE ...> tag.

style rule diagram Line 3 begins our style rule. A style rule has two parts: the selector, which indicates which element(s) the style applies to, and a list of declarations (surrounded by curly braces) which define how the element should be presented. In line 3 the selector indicates that the rule applies to all <H2 ...> elements.

Line 4 has the opening curly brace that begins the list of declarations. The declaration in line 5 says that the font is green. 6 says that the font should be 30 points tall, and 7 says that the font should be italic. Line 8 closes the curly braces, ending the list of declarations.

Finally, line 9 closes the comment and 10 closes the style element.
The rules automatically apply to all <H2 ...> elements. So if we create a header using an <H2 ...> tag:

<H2>Education</H2>

that header is automatically rendered in green, 30 points, italic:

Education



Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.

 
 
 
What is your major source of website traffic?
 
 
 
 
 
 

ADVERTISEMENT

 
Cheap Web HostingBudget Web HostingEcommerce Web Hosting
Link to UsLink ExchangeAdvertisePrivacy PolicyTerms Of ServiceAbout UsContact UsSitemap
Copyright © 2006 - 2008 Broadband Media, Inc. All rights reserved.