1 00:00:00,000 --> 00:00:03,990 One of the terms that you'll probably come across from time to time as you 2 00:00:04,000 --> 00:00:07,990 become more familiar with CSS is the term CSS reset. 3 00:00:08,000 --> 00:00:11,990 A CSS reset is simply the term used to describe a collection of styles that 4 00:00:12,000 --> 00:00:15,990 designers use to deal with the browser's default style sheets. 5 00:00:16,000 --> 00:00:19,990 As we discussed a little earlier, all browsers have a default style sheet that 6 00:00:20,000 --> 00:00:24,990 will be applied to the page if they're not overwritten by the author's styles. 7 00:00:25,000 --> 00:00:29,990 Using a CSS reset, a designer can essentially nullify those styles and start 8 00:00:30,000 --> 00:00:32,990 from scratch without having to worry about what effect the browser's default 9 00:00:33,000 --> 00:00:35,990 styles might have on their own designs. 10 00:00:36,000 --> 00:00:39,990 For the most part, there are couple of basic properties that most CSS resets 11 00:00:40,000 --> 00:00:41,990 establish a baseline for. 12 00:00:42,000 --> 00:00:46,990 Those are margins, padding, borders, font-size, and line-height. 13 00:00:47,000 --> 00:00:49,990 Now I said "for the most part" because there are many different variations of CSS 14 00:00:50,000 --> 00:00:54,990 resets out there and some of them are considerably more complex than others. 15 00:00:55,000 --> 00:01:00,990 To use a reset, you simply add your baseline styles to the top of your main style sheet. 16 00:01:01,000 --> 00:01:05,990 It's important that these styles are the first styles your browsers encounter, as 17 00:01:06,000 --> 00:01:10,990 you want to reset the values site wide and then go back over them and overwrite 18 00:01:11,000 --> 00:01:12,990 them with the site's specific styles. 19 00:01:13,000 --> 00:01:17,990 If the reset styles are added below the site's custom styles, all your hard work 20 00:01:18,000 --> 00:01:21,990 is undone, and the reset values become the site's styling. 21 00:01:22,000 --> 00:01:26,990 As a way of introducing you to CSS resets, I want to show you Eric Meyer's 22 00:01:27,000 --> 00:01:31,990 popular Reset CSS file, and I am going to do that by going to his site 23 00:01:32,000 --> 00:01:35,990 meyerweb.com, and just you can do an article search, if you wanted to, for "Reset 24 00:01:36,000 --> 00:01:38,990 Revisited," and you'll find the latest version of it. 25 00:01:39,000 --> 00:01:42,990 Now Eric was one of the first developers to work on CSS resets and many 26 00:01:43,000 --> 00:01:46,990 designers, developers, and systems have adopted his approach over the years, 27 00:01:47,000 --> 00:01:48,990 and even used his file. 28 00:01:49,000 --> 00:01:53,990 Now rather than go through this code line by line and bore you to tears, I'd 29 00:01:54,000 --> 00:01:56,990 rather just discuss what each section is doing as a way of building a bigger 30 00:01:57,000 --> 00:01:59,990 picture about what exactly a CSS reset does. 31 00:02:00,000 --> 00:02:01,990 So I am just going to scroll down a little bit here, 32 00:02:02,000 --> 00:02:04,990 so I get a little bit more into the code. 33 00:02:05,000 --> 00:02:07,990 So this first really, really big block a code here 34 00:02:08,000 --> 00:02:13,990 takes most of the common HTML elements and resets their padding, margin, and 35 00:02:14,000 --> 00:02:17,990 border to 0, essentially eliminating any of those browser default values. 36 00:02:18,000 --> 00:02:23,990 It's also going to set the font-size to 100%, and it ensures cross browser 37 00:02:24,000 --> 00:02:26,990 stability with font settings in baseline alignments. 38 00:02:27,000 --> 00:02:30,990 From there it goes on to ensure block-level display for newer HTML file elements, 39 00:02:31,000 --> 00:02:34,990 it gives a consistent value for line-height and then goes ahead, and removes 40 00:02:35,000 --> 00:02:36,990 the styling from list. 41 00:02:37,000 --> 00:02:39,990 Now as you can see below this, there is actually a little bit more than just that 42 00:02:40,000 --> 00:02:42,990 going on here, but by now I think you get the idea. 43 00:02:43,000 --> 00:02:46,990 Now the flip side of this of course is that if you remove the default styling of an 44 00:02:47,000 --> 00:02:49,990 element, you have to remember to put your own styling back. 45 00:02:50,000 --> 00:02:53,990 If you eliminate the default margins on paragraphs, for example, you have to 46 00:02:54,000 --> 00:02:57,990 remember to give them a value later on in your styles, or all your paragraphs 47 00:02:58,000 --> 00:02:59,990 wouldn't have any spacing between them at all. 48 00:03:00,000 --> 00:03:04,990 Now, that's one of the reasons that some designers are critical of using a CSS resets. 49 00:03:05,000 --> 00:03:08,990 If you plan on setting your own margins for paragraphs in your styles, you're 50 00:03:09,000 --> 00:03:12,990 essentially doing the work twice by resetting the value to 0 and then setting it 51 00:03:13,000 --> 00:03:14,990 again to the desired value. 52 00:03:15,000 --> 00:03:18,990 CSS resets can also cause the browser to do a lot of work. 53 00:03:19,000 --> 00:03:22,990 Depending upon the complexity of the reset, you could be asking the browser to 54 00:03:23,000 --> 00:03:27,990 go through and style every single element before even beginning to apply the 55 00:03:28,000 --> 00:03:31,990 site's actual styling, and this can add a lot of overhead to your sites, for a 56 00:03:32,000 --> 00:03:33,990 minimal amount of value on occasion. 57 00:03:34,000 --> 00:03:38,990 Now other designers love the fact that a CSS reset gives them a consistent 58 00:03:39,000 --> 00:03:39,990 baseline to build sites from. 59 00:03:40,000 --> 00:03:43,990 Instead of having to remember which items they need to overwrite for a site and 60 00:03:44,000 --> 00:03:47,990 which they don't, going ahead and using a reset consistently when designing 61 00:03:48,000 --> 00:03:52,990 sites means that you know exactly where you're starting from every single time. 62 00:03:53,000 --> 00:03:53,990 There's a lot of value in that. 63 00:03:54,000 --> 00:03:56,990 Should you use a reset or not? 64 00:03:57,000 --> 00:03:58,990 Honestly, there is simply a personal preference 65 00:03:59,000 --> 00:04:02,990 that depends on how you as a designer like to work. 66 00:04:03,000 --> 00:04:08,990 In fact, the need for a CSS reset can even vary from one project to the next. 67 00:04:09,000 --> 00:04:13,990 Eric Meyer even says in the introduction to his reset that it's not designed to be used as is, 68 00:04:14,000 --> 00:04:19,990 that it should be altered and customized to meet the needs of the designer or the project. 69 00:04:20,000 --> 00:04:21,990 Unfortunately, I'll be honest with you here, 70 00:04:22,000 --> 00:04:24,990 designers have gotten into the habit of just copying and pasting CSS 71 00:04:25,000 --> 00:04:26,990 resets into their styles. 72 00:04:27,000 --> 00:04:30,990 Now, this approach may give them the default baseline to work from, but in my 73 00:04:31,000 --> 00:04:34,990 opinion, it actually creates a more work for them in the long run. 74 00:04:35,000 --> 00:04:39,990 By exploring the styling needs of a site carefully and then planning for how a 75 00:04:40,000 --> 00:04:44,990 reset can benefit that site, a designer can take a standard reset and tweak it so 76 00:04:45,000 --> 00:04:47,990 that the reset is efficiently setting default styling for that project. 77 00:04:48,000 --> 00:04:52,990 My own personal approach to using resets is actually a really minimal one. 78 00:04:53,000 --> 00:04:55,990 I simply prefer the zero out default values for elements that I know I'm 79 00:04:56,000 --> 00:04:59,990 going to use in the site, and I don't have a set reset that I use for every single project. 80 00:05:00,000 --> 00:05:03,990 I have simply just like guiding principle to use smaller efficient resets, if 81 00:05:04,000 --> 00:05:04,990 I need them at all. 82 00:05:05,000 --> 00:05:11,990 Now if you want to learn more about CSS resets, I recommend checking out cssreset.com. 83 00:05:12,000 --> 00:05:15,990 This is an awesome resource that explains a little bit about what a CSS reset 84 00:05:16,000 --> 00:05:20,990 is and how to determine if you need one, and it provides you with the links to 85 00:05:21,000 --> 00:05:23,990 some of the more popular CSS resets in use today. 86 00:05:24,000 --> 00:05:25,990 You noticed Eric Meyer's resets there, 87 00:05:26,000 --> 00:05:28,990 there's the YUI CSS, and a lot more of them. 88 00:05:29,000 --> 00:05:32,990 Now if you read the documentation for these resets and go ahead and explore the 89 00:05:33,000 --> 00:05:36,990 code that's provided, you will gain a greater appreciation for dealing with 90 00:05:37,000 --> 00:05:40,990 browser default styles, when it's appropriate to use these resets, and where 91 00:05:41,000 --> 00:05:51,000 the use of a CSS reset fits into your own design philosophy.