Styling Headers, Paragraphs and Main Columns of DIV-Based CSS Tables - Styling main divs, paragraphs, and headers
(Page 3 of 4 )
As I explained in the previous section, my intention here is simply to add some additional CSS styles to certain elements of the sample web page created earlier to improve its visual appearance. In simple terms, I’m going to style the <h2> headers, paragraphs and main divs of the page in question, a process that’s performed by the following CSS code:
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 14pt Arial, Helvetica, sans-serif;
color: #036;
}
p{
font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
color: #333;
}
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#navbar, #maincol, #sidebar{
display: table-cell;
}
#navbar{
width: 20%;
padding: 15px;
background: #ccf;
}
#maincol{
width: 50%;
padding: 15px;
background: #eee;
}
#sidebar{
width: 30%;
padding: 15px;
background: #9cf;
}
As you can see, in this case I modified the styles that correspond to the <h2> headers, paragraphs and main divs of the sample layout created previously, making its visual presentation a bit more appealing.
The final result of this styling process can be seen more clearly in the following image:
That wasn’t rocket science, right? However, now the web document constructed with CSS tables looks a bit more appealing! Of course, there’s plenty of room to experiment here, and naturally you’re free to style each element of this sample web page to suit more specifically your personal preferences.
Well, at this point, I have shown you how to apply a few basic CSS styles to certain elements of this basic web document, which has been laid out with CSS tables. Next I will show you how to tie the styles to the structural markup of the document.
This last hands-on example will be developed in the section to come, so jump forward and keep reading.
Next: The complete source code of the three-column web page >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
