IT Evolution Presentation
Give it some style and make it look good!

All the styles for IT Evolution will be documented here. To assist this effort during CSS development, I use a Semantic Mark-up Sample, which I can target to get my site look and feel themed nicely.

On-Going Updates

It is going to be a certainty that I will change some of the properties and values shown on this page. If you want to confirm my most up-to-date styles, then please check out my current style-sheet in actual use:

CSS Level 3 Style-Sheet

style.css

Reset

Add selectors as required, rather than changing all defaults. If I go with a full reset, I use Eric Myers' Reset.

selector1, selector2 /*, add selectors as required */ {
  margin: 0;
  padding: 0;
  border: 0;
  /* add properties as required */
}

Typography

As I try to do in my style-sheets, we will work our way down, from the body tag, through the mark-up to the foot of the document.

Body

Let font properties inherit from body.

  • font-size: 100% equals 16px (Most browser's default setting)
  • Easy to scale. font-size: 75% equals 12px (75% of 16 = 12)
  • Percentage scales well across browsers.
  • Keep line heights without a unit of measurement. (16px times 1.25 equals 20px line height) and (12px times 1.25 equals 15px line height)
  • Adjusting the body size will automatically maintain the line-height ratio. I am using the golden ratio, which is 1.62, which gives more white-space between lines and makes for easy reading for the majority.
  • If you adjust the size, perhaps in an alternate accessibility style-sheet, say font-size: 120%;, everything will stay in proportion if we use em as the unit of measurement for all child elements.
body {
  background: #C99269;
  font: 100%/1.62 "lucida grande", tahoma, verdana, arial, sans-serif;
}

Paragraph.

Presentation Feature List

This page is under development and will have the following features:

  • I have dropped the linear layout style-sheet from my frameworkYes
  • Begin with the CSS level 3 main site style-sheetNo
  • Have an alternative style-sheet purely for accessibilityYes
  • Work on the vendor specific style-sheetsNo
  • If something is not for any other page on the site then embed the code to avoid HTTP requestsYes
  • If something is purely for a single element, then use in-line styleYes
  • For every style rule I use, where practicable, document it hereNo