Learn how to work with StyleSheets

The mechanism that applies a style across one or more pages is termed as cascading style sheets or CSS. Style sheets are used to control all aspects of graphic presentation of a Web page like fonts, background-color, background-image, margins etc.

These designing elements are subjected to scripting which can modify the document after it is downloaded, thus making Style sheet an integral part of DHTML. DHTML stands for Dynamic Hyper Text Markup Language. It’s an extension to HTML.

How to write Style Sheets?

Generally the syntax for coding style sheets is


Each declarations will be followed by


Let’s now look at an example:

h1{font:arial} or h4{color:red} 

Embedding a Style Sheet

The <STYLE> tag is used to embed style information within a document. It should be declared in <HEAD> section of an HTML document.

Ways to apply Style Sheets

There are two kinds of Selectors namely Class selector and ID selector. Following example shows how to declare a simple style rule and apply them inside the <Body> tag of HTML:

<HTML><HEAD><TITLE>Style sheet</TITLE><STYLE>.S{color:olive}




The ID selector is same as Class selector except the difference that here ‘#’ is used instead of ‘.’ symbol. Let’s now look at its syntax:


Inside the <BODY> tag you should apply the above selector as

<p id = "CAPS">This is the ID selector</p> 

That’s all about the Style rules. Now it’s time to learn all important properties and their corresponding values. You will find some of them here and more from the Web site of W3C.

List of important properties used in Style sheets

Font-Family: Verdana, Arial, courier etc (You can separate multiple fonts by commas)

Font-Size: 8pt, 12pt etc

Font-Weight: Bold or Normal

Text-Decoration: Underline, Overline, None

Text-Align: Left, Right, Center

Color: Red, Blue or #000000 (Font-Color)

Background-Color: Red, Blue or #000000

Leave a Comment