Let us suppose a scenario where your website, having 10 html pages, requires the modification in the way the text looks...color, font or size. If you are using the simple html coding then you are required to open all the pages individually and modify the text on each page. While you are doing this you might be thinking that instead of editing each page individually...if you were able to modify the font at one place to reflect the changes in all the 10 pages. That is where CSS comes into picture.

What is this CSS? It stands for Cascading Style Sheet.

How does it help to resolve the above mentioned problem...CSS is a style language or tool which is used to add the layout to the website. Now I'll explain step by step how we can save the time if we have to edit the look of the text on all the pages. There are basically three methods to do the same.

Method 1 : In-line (the attribute style)

This method uses the HTML attribute STYLE of a tag and requires you to make the changes in every text you want to modify. Hence this does not resolve the purpose of time saving.

This text has been modified using the attribute of the basic tag

Method 2 : Using the STYLE tag in the HEAD section.

This method is better but not the best as each page would required to be opened and changed for the modifications.

This text will show the text style defined in the STYLE tag defined in HEAD Section

Method 3 : External (link to a style sheet)

An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk. This is the recommended method as change in one .css file will reflect the change in all the html files which will include the style defined in css file

Let's assume all the html files are in html folder and css files are in style folder
Following is the code for stylefont.css

h1 {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Following is the code for stylefont.html

This text will show the text style defined in the h1 tag of the css file

Satwinder Kaur
http://www.learnwebsitebuilding.com