An Introduction to Cascading Style Sheets (CSS)

CSS is an abbreviation of Cascading Style Sheets, a technology or mechanism used for adding style such as colors, spacing, and fonts to the documents on the web. It is with the help of CSS that web developers can design the layout and typography of a web page. Using CSS allows you to have total control over the style of a Hyper Text Document (HTML document) and with the help of CSS technology you can optimize the lay out of a webpage.

Both CSS and HTML can be used in conjunction with each other, with HTML being easier to write and CSS renowned for the ease in which you can change the design and style of your html documents. Using both together can save the average website developer a number of hours.

CSS provides easy accessibility to a site by fully optimizing the HTML code. Style sheets can be made quicker to access by using abbreviations, short hand and grouping. To a casual user of the net, a web page might seem to be virtual and a substance without weight. But, web designers are aware of the weight of a website, which is made heavier by the usage of codes. Using CSS helps to eliminate the need for enormous amounts of HTML code and by using simple style codes you can make the loading time of your website a lot faster.

CSS code is placed in the HEAD tags of an HTML document and the tag used is:

In between the style tags is where you will control the layout of your document. To add background color you will use the following code:

This CSS code will give your document a black background and if you wish to change this all you need to do is change that color code. You can also control add what are known as elements to your CSS. These can include how links will look in your document. These are added in the example below:

The name of the color can also be used instead of the code for the color. You can also choose the color of your headings by placing them in the style links also. For example, if you want all your H3 heading to be blue you would just put:

H3 {    color:blue;    }

You can also assign font size, style, and alignment. Once you have placed this once in your style tags, it will never need to be retyped. All the H3 headings that appear on your webpage will be in this style, unlike HTML where you have to format each header individually.

You can determine the font size and color of your paragraphs using P in your style tag:

P {    font-size: 12pt;    color: black;    text-align:center;    }

As you can see by using CSS in your website design, you can indeed save a lot of time. CSS allows you to set a template for all the colors, fonts and spacing properties of your documents and also reduces the monotony of website building. And finally, it keeps your HTML code clean. This code "cleanliness" provides two benefits. First, it makes your HTML available to a wider range of client devices (PDAs, Smart phones, Speech services, etc). Second, it allows search engine spiders to get to the real content at your site instead of parsing through an extraordinary amount of table based HTML structure code.

2006-03-29 23:41:47