I threw this practice page together for novices who want to see on-the-fly how CSS works. When you first load the page, it will look very ugly, with different objects having vastly different properties so you can see the difference.
Try sticking this code in there and see the changes:
body {
background:#f4f3e9 url('http://img465.imageshack.us/img465/3052/contentbg1ls.jpg');
font-size: 12px; font-family:verdana,arial,sans-serif;
}
table { width: 90%; margin: 0 auto; }
td { vertical-align: top; }
/* Note: .master_table is the main table with the dashed green border */
.master_table { background:#EAEAE7 url('http://img85.imageshack.us/img85/4557/marblebg2hu.jpg');
margin-top:1em; }
.master_table td { border: 2px solid; border-color: #fff #999 #999 #fff; }
td.master_table_header_td {
border: 3px solid; border-color: #fff #999 #999 #fff; text-align: center; }
.first_list_td { width: 50%; }
td.second_list_td { border:1px solid; }
/* Note: .inner_table is the table with the dashed purple border. */
.inner_table { font-size: 12px; width:100%; }
.inner_table td { border: 1px solid; border-color: #999 #fff #fff #999; }
.firstspan, .secondspan, .thirdspan, .fourthspan { border: 1px solid black; }
.firstspan { color: #669;}
Now replace it with this in and view the changes:
body { }
table { }
td { }
/* Note: .master_table is the main table with the dashed green border */
.master_table { }
.master_table td { }
td.master_table_header_td { }
.first_list_td { }
td.second_list_td { }
/* Note: .inner_table is the table with the dashed purple border. */
.inner_table { }
.inner_table td { }
.firstspan, .secondspan, .thirdspan, .fourthspan { }
.firstspan { }
Nothing is defined, so it's all just lumped together. Now try adding some of your own styles and see what you can come up with. If you come up with something that looks really good, feel free to post it here between the [code][/code] tags to show it off. 
CSS Practice Page
Re: CSS Practice Page
it wont work because u yhave 2 edit it
Re: CSS Practice Page
