How to create a structured and easy to modify website using CSS

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 Sheets.

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.

<DIV style="font-family: arial, verdana, sans-serif; font-weight: bold;"> This text has been modified using the style attribute of the div tag </DIV>

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

<STYLE type="text/css"> div { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } </STYLE>

Put the code written below under the BODY section

<DIV>This text will show the text style defined in the STYLE tag</DIV>

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

<link rel="stylesheet" type="text/css" href="style/stylefont.css" />

Put the code written below under the BODY section

<DIV>This text will show the text style defined in the DIV tag defined in the css file</DIV>
  • Authors Name:Satwinder Kaur
  • Authors Website:www.learnwebsitebuilding.com
  • About The Author:

    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

  • Copyright:© Satwinder Kaur
Check Out Our Sponsors
Bookmarks
RSS Feed    Search
Remortgages