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 piece of crap. Very useful!
<!--[if IE 6]> Special instructions for IE 6 here <! [endif]--> <!--[if lt IE 7]> According to the conditional comment this is less than Internet Explorer 7 <! [endif]-->
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;}
