Reset CSS

Nollställ CSS i alla webbläsare

På grund av att alla webbläsare vill visa hemsidor på sitt eget sätt så kan det vara krångligt att få hemsidan att se likadan ut i alla webbläsare. Det här kan vi lösa enkelt med hjälp av en Reset CSS.

Det fungerar så att varje webbläsare har en egen style.css kan man säga. De sätter ett eget typsnitt och storlek om du själv inte valt något. Reset CSS är en CSS-fil med en rad olika CSS attribut som nollställer dessa värden.
Det finns en mängd olika Reset CSS, men Eric Meyers Reset CSS är populärast i skrivande stund 2014.

Klistra in följande i en ny CSS-fil och spara den som reset.css

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}


Hämta därefter in din reset.css innan din style.css i html-filen.

<link rel="stylesheet" href="assets/reset.css">
<link rel="stylesheet" href="assets/style.css">

Andra alternativ

Om du inte vill skapa en ny CSS-fil för din Reset så går det lika bra att klistra in det längst upp i style.css. Men vi känner att det blir mer sorterat på det här sättet.

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus