Step 3: Tips and Tricks
Below are a couple of CSS rules that make working with CSS a bit easier. I recommend to copy all these rules into the top of your CSS files and then to write you own rules below them.
CSS code:
/* Reset browser default styles: */<br /><br />
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {<br />
padding: 0;<br />
margin: 0;<br />
font-size: 100%;<br />
font-weight: normal;<br />
}<br />
<br />
/* border-box so that border widths aren't added to the total width of the element: */<br />
html {<br />
box-sizing: border-box;<br />
}<br /><br />
*, *:before, *:after {<br />
box-sizing: inherit;<br />
}<br />
<br />
/* Clearfix to make floated elements behave correctly: */<br />
.cf:before, .cf:after { content: ""; display: table; }<br />
.cf:after { clear: both; }<br />
.cf { zoom: 1; }<br />
<br />
/* In order for the percentage heights to work we need this: */<br />
html, body { height:100%; }<br />
Below the rules explained in detail:
CSS Reset
To get rid off the browser default styles:
/* Reset browser default styles: */<br />
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {<br />
padding: 0;<br />
margin: 0;<br />
font-size: 100%;<br />
font-weight: normal;<br />
}<br />
CSS Border Box
Makes working with floating elements easier. With this in place you don't disregard border width and paddings when you're calculating the total width of elements next to each other.
/* border-box so that border widths aren't added to the total width of the element: */<br /><br />
html {<br />
box-sizing: border-box;<br />
}<br /><br />
*, *:before, *:after {<br />
box-sizing: inherit;<br />
}<br />
CSS Clear fix
Container elements or other adjacent elements behave unexpectedly when working with CSS floats. With the clear fix in place you won't have these issues.
/* Clearfix to make floated elements behave correctly: */<br /><br />
.cf:before, .cf:after { content: ""; display: table; }<br />
.cf:after { clear: both; }<br />
.cf { zoom: 1; }<br />
<br />