HTML has a basic structure however, now that CSS has arrived its structure is becomming less and less. Because of this, HTML pages are becoming less cluttered, and easier to read.Lets see an example...
Prior to CSS, in order to asign a specific color, font, size, or other characteristic to all h2 headings we had to use the HTML font element for each occurrence of that heading type. A heading to be centred on the page in italic, red, Times New Roman might be written:
<h2 align="center"><font color="red" size="+4" face="Times New Roman, serif"><em>Usage of
CSS</em></font></h2>
The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain; if all level two headings were to be rendered in this style, the markup had to be used for each one separately. Furthermore, a person reading the page with a web browser loses control over the display of the text; if they would rather see the heading in blue, they cannot easily do so, as the site author has explicitly defined the heading color to be used.
With CSS, the h2 element can be used to give the text structure, while the style sheet gives the text its presentational characteristics. The above might be written:
<h2>Usage of CSS</h2>
While the following block in an accompanying style sheet defines the same style for all default h2 headings across the web site:
h2 {
text-align: center;
color: red;
font: italic large "Times New Roman", serif;
}
As you can see, the presentation has now become separated from the structure. CSS can define color, font, text alignment, and additional attributes that html could not. Both of the code snipits above would render asthe example below, however the ammount of actual HTML code can be greatly reduced by using CSS.
Lets continue by taking a look at the HTML syntax and see how CSS's syntax differs.