CSS Orientation, a short overview of CSS and the relationship between the definitions and the HTML.
CSS covers the rendering of a web page, typically using a file which is separate from the html layout file. The HTML page provides details of the items within the page but the CSS file informs the browser of such items as the layout, fonts, colours and background images.
Items defined within the HTML layout file will be given either a reference id or assigned to a class.
<div id="header">
<div class="fLeft w200"><img src="logo" alt="logo"></div>
<div class="fRight w600"><p>Company slogan</p></div>
<div class="fClear"></div>
</div>
Consider the nested divs above. This will be used to provider a header with the company logo on the left and the company slogan on the right.
The first div is a wrapper for the others. It has been given the ident of header. There can only be the one item with this ident on the rendered page. The next three divs are assigned classes which are then used to position the elements.
When creating a website page, to adhere to the only one ident of the same name rule, I use idents for the major structural elements and then classes where a feature will be re-used, for example to define fixed widths; repeated colour bars and font styling.
Note that many aspects of CSS rendering are related to the DocType defined for a web page. This is particularly so for Internet Explorer. I have seen many of the browsers, such as FireFox, Opera, Chrome, render a web page correctly without specifying that it is a newer DocType (HTML5 or XHTML). However, Internet Explorer needs this to be clarified.
For our header the following is used to render the divs with their content:
p{
color:#00000dd;
}
#header{
background:#ffcc00;
width:700px;
font-weight:bold;
font-size:24px;
}
.fLeft{
float:left;
}
.fRight{
float:right;
}
.fClear{
clear:both;
margin:0;
padding:0;
}
.w200{
width:200px;
}
.w600{
width:600px;
}
In the above extract of CSS the item with a dot is a class and the item with a hash is an ident. The header has been defined to have a width of 700 pixels and the font size and weight defined. This allows the logo and slogan areas to sit side-by-side. The last div is using the class fClear to reset the floating elements for the next item, whatever it might be.
The logo div has been assigned two classes, one to define the float left and one to specify the width. This allows re-use of the class definitions setting the float and defining the widths.
The paragraph tag, as per all HTML tags, can be referenced directly. Here a blue colour has been set for the entire web page.
