Essential code snippets

If you’re a pro or just a beginner, these following code snippets could save you lots of time. Sure did for me!

Set the base font size

This piece of code resets the font size of your website to 10px. Everything else that you define in em will be relative to the first line.

body { font-size: 62.5%;  /* 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

Conditional elements

Conditional elements are used when you want a browser to see something that another browser shouldn’t see. This piece of code is almost exclusively used for IE since it’s such a bad browser. Very useful!

<!-- [if IE 6]>
Special instructions for IE 6 here
<!-- [if lt IE 7]>
According to the conditional comment this is less than Internet Explorer 7

Centre content

To centre a div in your designs use the following code:

div#container {margin: 0 auto;}

Controlling position:absolute, relatively

To position content absolutely can be a great way to have control over your design if you do not have dynamic content.

To do this you simply set your parent element to position:relative, and the contained element to position:absolute. So picture your relatively positioned element as the box that contains your absolutely positioned element.

Global reusable rules

The following lines of code can be use globally in all your designs to align images or content left or right.

.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}