Creating Web Sites with Style

Style with CSS

To create websites with style we should turn to Cascading Style Sheets. CSS can be used as either an external document referenced by adding

<link rel="stylesheet" type="text/css" href="style.css" />

to the html head, including it within the HTML head section or within the each individual HTML element. I find it simpler to use an external file as any changes can affect all documents linked to it. Some good resources for CSS are w3schools and brainjar.

The BOX model

The Box model is a simple analogy for how some of the css properties behave. Essentially most HTML elements are blocks that contain content. Surrounding this content you have a border, however you may want to have some space between your border and the content, this is called padding. Outside of your block (and it's border) you can separate the element from other HTML elements with a margin. Here's how it looks...

Styling this blog

To style this blog I used the Blogger Simple template and changed the CSS using the advanced options. I choose a simple colour scheme of a white background #336699 (a grey blue), some greys, and a greyish red #993333 for the hover-over effects.

Within the advanced options of the Blogger Design module you can add in your own additional CSS. To do this I viewed the Source code using Firebug in order to find out the names of the HTML element classes. I altered the positioning of some of the elements to make it all nicely lined up. I also inserted a graphic next to my title using code gleaned from uploading custom background images.