CeaRO Corporation

Section 4 - CSS

Time to add a bit more style to the web pages. So far we looked at HTML4 and 5, MySQL and PHP. Together these are used for content and logic. We try to keep the elements that determine the 'look and feel' of the site out of that. That is where CSS comes in.

CSS stands for Cascading Style Sheets. 'Style' speaks for itself, 'Cascading' refers to a structure with parents, children, sibblings, thus creating a hierarchy of elements. Distinct elements are identified by div tags, each with their own name atrribute. Elements that share properties across div's, can get an extra class attribute. These div's and classes, as identified in your HTML code, are used by the code in the CSS files to identify what elements the 'style' code refer to.

If you looked at the HTML code, or its generating PHP code, for the previous sections you may have noticed we were already including id and class names then. By creating a CSS file telling the browser how and where to show these different id's and classes, we can control 'style', including positioning of the id elements.

All we need to add to the HTML file is one little line in the header, saying what CSS file we are going to use. In reality, we did add more div's, especially container type div's, by which we mean that we put the other div's inside these div's. This helps especially with the location control of the page. It is the kind of thing you would do to determine combinations and location of a top banner, columns in the middle part, followed by a footer. When you look at the end result, isn't it amazing that apart from a few paragraphs of changed text (the one you are reading) the content is essentially the same as in the previous section. Yet the page looks entirely different.