We’ve all browsed the world wide web. The universal markup language for webpages is HTML (hypertext markup language). If you try to view the source of the webpage you’re viewing, you’ll get HTML code, which HTML, consisting of sets of opening and closing tags to describe the elements to be displayed on the page, along with their parameters. Since HTML version 4.0 was introduced, this allowed for the use of style sheets, or CSS. With the use of CSS, a style for an element of a class of elements could be defined, significantly reducing the overhead of maintaining webpages.
Let’s say you have a group of cells in a table, that all have to have the same parameter values such as background color, font size and font color, you could simply assign these values to everything within a certain class and indicate that the cell belongs to that class of elements. So instead of repeating these values over and over in your HTML code, you could simply assign a class to the element and then everything would be “styled” automatically as per the specifications in your style sheet.
Style sheets can be linked to any webpage as an external file and to as many pages as you like, so you could simply apply the same styles to any new page added onto your site. If you decided to change the parameters, such as changing the background color, font etc., then all you have to do is updated this in your style sheet and your changes will show up in all the pages that are using the same style sheet (.CSS file).
Before the advent of style sheets, tables were used to maintain the layout of the webpages, in order to align the different elements such as the different sections on the page. Though it works, it is a messy way of doing it. With this approach, you may sometimes need to nest tables, which means that you might have to put table within tables to ensure the proper alignment between two elements and this leads to messy code which can be hard to read.
With style sheets, you no longer need to use tables to maintain your layout. This can now be done with divisions or DIV, an html element. Each div can also have its own style, allowing you to define parameters such as width, height, position (both absolute and relative), background color, text color, link (visited, active etc) colors. This makes for much cleaner and simpler code and even allows you to maintain the page layout more easily than with tables. Thanks to DIV and CSS, you simply decide where you want to place the different sections on your webpage and style them the way you like.
