Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

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. Published under the terms of the Open Content License Design by Interspire