Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most common problems that designers face when writing their styles is failing to account for the default margins and padding inherent in most browsers. Every browser has a default style sheet that assigns properties to common elements like paragraphs and headings, and every browser's style sheet is just a little bit different from the others. It can be extremely frustrating to try to track down why you have that little bit of extra space between paragraphs in your styles, when in fact, the problem was with the default styling from a browser, not your style sheet.
Now, to deal with this, and to make it a little bit easier to have pages look consistent across multiple browsers, many designers use a CSS Reset. A CSS Reset is typically a grouped selector that simply resets the values like padding and margin to 0, stripping off all the default values found in most browsers. So let's go ahead and build one. Again, this is a page with no styling whatsoever. You can see the main.css is empty, other than all the headers and the sections that we have here. So if I preview this page in my browser currently, I still see styling.
So even though my CSS file doesn't have a single bit of styling in it, my headings are of certain size. They are of certain color, there is a certain amount of space between them, and the paragraphs. There is a certain amount of space between all my lists and the list items, things like that. So we've got a lot of styling going on here, even though we had absolutely nothing to do with it. So all these properties are currently being applied from, in this case Firefox default margins and paddings, and styling. If you have another browser open, you will be seeing that browser's default styling. So I am going to go ahead and close this, and we're going to go back and write our selector.
Now, sometimes it's a little bit easier just to write certain selectors by hand, and this is one of those. So I'm going to select my main.css and switch to Code view. What I want to do is I want to scroll down, and this is another reason why we are doing it by hand, I want to find this limited-scale reset content feature because that is where this goes. So I am going to place my cursor just inside that area, and I am just going to start by using some of the elements that I know I am going to be using in my page and some of the elements that I know I am going to be using on my page that I am going to want to style myself.
So I am going to type in h1, h2, h3, h4, h5, h6. Now, by the way, I am going to pause here for just a minute. Most of you probably already know this, but if you don't, the comma is used to group selectors together. So essentially, we're saying apply the same styling to the h1, the h2, the h3, so forth and so on. They don't all have to be element selectors. You could put descendent selectors, class selectors, you can group any selector types together. It does not matter. So right after h6 I am going to hit comma again.
I'll do p, address, blockquote, div, ul, li. Now, you will note that I am not using a lot of elements here. I know you're probably tired of typing, but trust me there is a lot more that you can strip this out of. These are just elements that I know I am going to be using and I know I am going to style separately in my style sheet. So I am going to go ahead and open up a curly brace. Hit Return or Enter to get down the next line, and I am going to type in margin: 0; padding: 0; and note that I am using code hinting and code completion to help really speed that process up.
So when I am done typing in margin: 0 and padding: 0, I'll just close my curly brace, and there is my limited-scale reset. Now, you'll note here that I'm only doing the margin and the padding. I am not doing any typography. I am not doing any line height. I am not doing any color resets here. Some resets are extremely detailed. They will tackle almost every single element you could possibly use, and they will reset every single property that you probably set for that. I am not a fan of that. The reason I'm not a fan of that is because you now have to remember to go back in and change all the stuff.
Well, let me show you what I mean. Do a Save All, and preview that in your browser. You see how all the spacing went away? So the font size is still there obviously; the color is still there, that sort of thing, but any type of margins, padding, spacing, gone. If I want to make sure that my spacing has done correctly, now I have to write the styles myself. Well, that's okay because that's what I wanted to do. But I want to make sure that if I have some type of esoteric tag that I almost never use but somehow makes it into my site, I don't want to zero that out, because the answers are, I won't remember that I zeroed it out, and I'll be left with an element that I am like, hmm, why isn't that styling incorrectly? So it's a personal decision as to which elements you want to involve in your reset.
It's also a personal decision as to which properties you want to reset. Do you want to reset font-size? Do you want to reset color? Do you want to reset margins and padding? Whatever default value you want to reset, you can go ahead and pass that into your CSS Reset. Not every CSS Reset is just one selector like ours is, either. Some of them are multiple selectors, because they're stripping off properties that not all tags share. So your CSS Reset might be a lot more complex based on what you are trying to do with it. So as I mentioned, the downside to stripping all of those default margins and padding is that now I am going to have to remember to write those styles, and put it back.
So any elements that I know I am going to style of the course of my style sheets, I'll go ahead and reset those. Now other elements, I will wait and write specific values for them, if necessary. But the browser default value will still be available if the element is used in the page without me realizing it. Like many things in CSS, the use of the Reset usually comes down to personal preference.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.