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
selector{declarations}Each declarations will be followed by
property:valueLet’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}
<STYLE></HEAD><BODY><P CLASS = "S">WELCOME TO STYLE SHEETS
</P></BODY></HTML>
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:
#CAPS{background-color:red}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
