Building Your First Web Page - Learn to Code HTML and CSS: Develop and Style Websites - page 13

In Practice
Picking back up where we last left off on our conference website, let's see if we can add in
a bit of CSS.
1. Inside of our “styles-conference” folder, let's create a new folder named “assets.”
We'll store all of the assets for our website, such as our style sheets, images,
videos, and so forth, in this folder. For our style sheets, let's go ahead and add an-
other folder named “stylesheets” inside the “assets” folder.
2. Using our text editor, let's create a new file named main.css and save it within
the “stylesheets” folder we just created.
3. Looking at our index.html file in a web browser, we can see that the <h1> and
<p> elements each have default CSS styles. Specifically, they each have a unique
font size and spacing around them. Using Eric Meyer's reset, we can tone down
these styles, allowing each of them to be styled from the same base. To do this let's
head over to Eric's website ( http://meyerweb.com/eric/tools/css/reset/ ) , copy his
reset, and paste it at the top of our main.css file.
Click here to view code image
1. /* http://meyerweb.com/eric/tools/css/reset/
2. v2.0 | 20110126
3. License: none (public domain)
4. */
5.
6. html, body, div, span, applet, object, iframe,
7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8. a, abbr, acronym, address, big, cite, code,
9. del, dfn, em, img, ins, kbd, q, s, samp,
10. small, strike, strong, sub, sup, tt, var,
11. b, u, i, center,
12. dl, dt, dd, ol, ul, li,
13. fieldset, form, label, legend,
14. table, caption, tbody, tfoot, thead, tr, th, td,
15. article, aside, canvas, details, embed,
16. figure, figcaption, footer, header, hgroup,
17. menu, nav, output, ruby, section, summary,
18. time, mark, audio, video {
19. margin: 0;
20. padding: 0;
21. border: 0;
22. font-size: 100%;
23. font: inherit;
24. vertical-align: baseline;
25. }
26. /* HTML5 display-role reset for older browsers */
27. article, aside, details, figcaption, figure,