Then along came CSS with its smooth lines and flexible dimensions. Webmasters could now control the look and feel of their pages without waiting for tables to load or annoying their visitors with ugly frames.
CSS has told the browser how to dsiplay the H1 and H2, and to display both. It seamlessly joins heads, menu bar and background image and text.
CSS has instructed the browser to hide part of the image to the left and then leave enough space to separate it from the main text.
This page is complete unto itself. All CSS is embedded or inline. You can easily see the CSS by choosing Page —› View Source or View —› Page Source from your browser menu. Look over the embedded CSS. Take note of these items:
/*margin-bottom: 0px;height: 100%;*/
- Browsers will ignore anything sitting between the CSS comment tags /* */.
-
#sidebar {float:left; width: 145px; overflow:hidden;} - Defines the style of the sidebar or navigation bar. # indicates ID. ID has more point value than Class(.) does in the CSS scale. The sidebar floats left to the left edge of the browser window. The width has been set to 145px as that is how much of the image I wanted to display. Hiding the overflow conceals the remainder of the image.
#main {float:left; width:70%; margin-left: 15px; text-align:left; margin-bottom: 15px;}- Defines the style of the main DIV. Float: left pushes the div left against the sidebar or navigation bar. Margins were included to put a some space between the divs.
#bottom {background-color: #881b55; background-image: url(../../images/chrybg_2.jpg); background-repeat: repeat-x; clear: both; height: 200px;}- Defines the bottom floral border. Its height was set to accommodate the height of the artwork. Clear: both pushes the bottom div to the bottom of the html page.
The DIV tag plays a major role in CSS layouts. This page employs three DIVs. More>>>