Let’s take a simple comparison example:
In the days before CSS if you wanted to get two columns for your text you created an HTML table with two cells:
<table>
<tbody>
<tr> <td>Column 1</td>
<td> Column 2</td> </tr> </tbody>
</table>
This is all fine and dandy but now say in the left column you wanted to have an image but the image needed to be in the top left corner of the first column. To do this you would need to nest a table inside the first cell like so:
<table>
<tbody>
<tr> <td>
<table>
<tbody>
<tr>
<td>
<img src="image"/>
</td>
</tr>
</tbody>
</table>
Column 1
</td>
<td> Column 2</td> </tr> </tbody>
</table>
Then you would have to vertically align the cell so that the embedded table with the image would appear near the top:
<table>
<tbody>
<tr> <td>Column 1
<table>
<tbody>
<tr>
<td valign="top">
<img src="Image"/>
</td>
</tr>
</tbody>
</table>
Column 1
</td>
<td> Column 2</td> </tr> </tbody>
</table>
Now say I just wanted to add some simple stying to the table above like set a width, height and background color. The only way to do this before CSS would have been to write the attibutes directly into the table tags.
<table width="500px" height="500px" bgcolor="#000">
<tbody>
<tr>
<td width="250px">
<table>
<tbody>
<tr>
<td valign="top">
<img src="Image"/>
</td>
</tr>
</tbody>
</table>
Column 1
</td>
<td width="250px"> Column 2</td>
</tr>
</tbody>
</table>
I will not elaborate more but I think by this point you can see how such a system quickly ran into limitations. For instance, if I wanted to create a new page with the same table but a different height, width and background color I would have to copy the entire table and rewrite the attirbutes accordingly. Imagine a situation in which I had a large website with hundreds of different tables and it is decided that instead of a 500px wide table we want that table to be 400px wide. To do this task every single table would have to be manually edited. This was the stuff of nightmares for early trail-blazing web developers.
Now lets consider the same two column scenario but this time using CSS. Remember that CSS lets us keep our structural mark up and styling separate. Below is just the HTML markup for the same two column layout.
<div class="wrapper">
<div class="left-col">
<img src="image"/>
</div>
<div class="right-col">Column 2</div>
</div>
If we break down the HTML above you will notice the class marker for each element. The classes mark the HTML and correspond to its CSS. Here is the CSS which creates a two column layout out of the structure above:
.wrapper {float:left; width:500px; height:500px; background-color:#000;}
.left-col, .right-col {float:left; width: 250px;}
Using the class markers of the element we can specify how the HTML elements are defined on the page without ever touching the markup. The code above basically tells the user’s browser the following: If you see an element with the class “wrapper” then make that element 500px wide by 500px high. If you see an element with a class “left-col” make that element display all the way to the left and make it 250px. If there is an element with the class “right-col” then make that element show up on the right of the first column and make that element 250px wide as well.
The same class can be applied to any element. Now if a change needs to be made only one class needs to edited for the entire site.
The situation is a bit more complex than I have let on above, but this is the general gist of CSS. For a much more in-depth reading please take a look at some resources below. Also feel free to comment here with any questions or suggestions and I will be more than happy to try and answer you.
http://www.w3schools.com/css/css_intro.asp
http://www.cssbasics.com/introduction-to-css/
http://www.yourhtmlsource.com/stylesheets/introduction.html