The best way to gain complete control over CSS styles in a project is by resetting or zeroing-out all default browser styles. This removes any variance which different browsers apply, and allows for a consistent cross-browser base on which you can begin building.
There are a few theories on the best way to do this. I prefer to zero-out everything and add only what I need back-in, and my tool of choice is Eric Meyer’s reset code.
I have customized Eric’s script in the example below to suite my needs but you can find the original version here.
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,
em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, main, mark,
menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span,
strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr,
tt, u, ul, var, video {
background:transparent;
border: 0;
box-sizing: border-box;
font-size: 100%;
font: inherit;
margin: 0;
outline:0;
padding: 0;
text-rendering: optimizeLegibility;
vertical-align: baseline;
}
body {
line-height: 1; /* No unit defined (this is done on purpose). */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section {
display: block;
}
/* One of the good use cases of !important. */
[hidden] {
display: none !important;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}