What CSS Reset Does
The code that makes up the CSS Reset was written by Eric Meyer and can be found on his website (you can also view it on this page below). The CSS Reset targets the margin, padding, and borders of the elements on your page, in addition to list styles and font sizes. Many of these settings vary from browser to browser, and removing them can allow you more control over the way your website appears to your users.
To use the CSS Reset, you simply paste it into your CSS file before writing any CSS. It should be pasted at the very top, and any custom styles that you write would be added underneath it. As we will see in class today, adding it after writing CSS will break the original display of your page and requires adding new styles that you may not have planned on adding. There's also a good chance that the Reset would remove some styles that you had to adjust manually, so adding it first saves time during development.
Form Element Styles
Compare the form you see after adding the CSS Reset to the form in the screenshot provided. Note any differences between the two, and think about which styles you might need to apply to correct the way those elements are displaying.
Image Styles
The tags used to wrap the image below and the information about its source are figure and figcapture tags. These are used to markup images like this, where you have an image and related text that describes it or gives credit to the photographer.
The CSS Reset Code
You can find the code for the CSS Reset below. It's just placed in two columns to keep this page from being too long. It is also inside of pre and code tags to preserve formatting. Code inside of those tags will only contain characters that are valid to use in code (not the kinds of apostrophes and quotation marks that cause issues in HTML and CSS).
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}