If you would like to submit an article, click the button below.
By: Satwinder Kaur, Thu Jul 19th, 2007
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's 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 and requires you to make the changes in every text you want to modify. Hence this doesn't resolve the purpose of time saving.
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.
Put the code written below under the HEAD section
Put the code written below under the BODY 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
div { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
Following is the code to include the css file, this will be placed under the HEAD section
Put the code written below under the BODY section
A post graduate in Computers from India, has a working experience of 5 years as an IT manager in a private bank in Internet related technologies.
Currenly the creator of the website www.learnwebsitebuilding.com, a complete and comprehensive guide for website building