Free songs

Introduction to CSS Style Sheets

Post 14 of 22
CSS style sheets preview

We assume that you at least have a good understanding of xhtml and if not you can go to our series of articles related to xhtml browse the areas you think you lack in understanding.

CSS style sheets brings a new revolution to the way we use to style, format and layout web pages, the old html tricks which required to put formatting definition into each tags we wish to format and using tables for layout purpose is now obsolete and no longer a valid or recommended practice to follow but some still do and I hope you won’t. Let me give you an example just FYI to give you a clear picture what I am talking about.

Old Practice Used To Formatting Html Elements Before CSS Style Sheets.

Suppose I have a paragraph tag I want to green color the text and font verdana inside the <p> tags
so have include the formatting within the paragraphs tags <p font color=”green” font face=”verdana”> , This is old html formatting technique.

Limitations And Barriers For Using Old Methods To Format Html Elements.

Old html formatting definition can grow big as you add new formatting rule.  Suppose you have a single page with 10 <p> tags you have to repeat the code to keep formatting consistent throughout the whole website and you can imagine the level of complexity it brings when your site starts to grow, you will be in a nightmare situation if you have 100 or even any number above 0 to edit the formatting of website and keep consistent throughout the page or website.

Giant search engines likes Google, Bing & Yahoo doesn’t like the old way, because it brings lots of complexity to the html document which kills almost all the semantic meaning in html document structure and make harder for search engines to reach to the actual content of a website.

Why Use CSS Style Sheets

Well CSS Style Sheets saves you from lot of headache and time consuming style editing stuff, you can control the formatting and layout of whole website powered by single CSS style Sheet file, let it be 1000 pages website or more, moreover you can change a look of your entire website by editing styles of a single CSS Style Sheet file isn’t it amazing just like a dream come true for designer and developers.

CSS Style Sheets also helps you to keep your xhtml document structure separate from the formatting and layout while keeping the semantic meaning intact of website.

CSS Style Sheets is easy to learn and understand logically, however there are two major concerns for new designers and developer where they gets frustrated is how to control the overall page layout and form style and layout, stay relax we won’t left you  scratching your head in the end.

Html Tables vs Divs

As I mentioned earlier tables were used to control the layout of forms and webpage you should I avoid to do so, use <div> tags instead to create a separate division block and position it with CSS.

Overdoing with Div tags

It’s is completely legal to use table if you wish you display tabular data and is more better than using div not for layout purpose, some designers and developer overdo with div instead of using tables when the goal is only to display a tabular data. Suppose you have 8 columns of data and 10 rows you need approximately 100 div tags to control the layout and lots of CSS in the process and loose the semantic meaning of a content like which values belongs to which category in case is better to go with tables instead of divs.


Use Div tags for positioning
Use table to show tabular data

We will be using a third party code editor like sublimetext2 you have to pay for this but  notepad++ is an open source and available for free download.


This article was written by salman