If you're like me, adding CSS (cascading style sheets) to your projects is one of the most fun parts of developing a webpage. It's the part of the job that really lets you give your project some color, and bring it to life. However, there are many things about webpage styling that you don't really notice in the beginning.
For example, take this very basic html document I've created:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vincent's Webpage</title>
</head>
<body>
<main>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
</header>
<section class="info">
<p class="description"> paragraph element
<section class="examples">
<ul>Example List
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
<button>THIS IS A BUTTON</button>
<input type="checkbox"> THIS IS A CHECKBOX
<select>
<option>Select Option 1</option>
<option>Select Option 2</option>
</select>
</main>
</body>
</html>
From a quick glance you can see that there are few different html elements incorporated, such has: headers, hyperlinks, paragraphs, list items, buttons, etc.
As you'd expect this is what this very basic webpage would look like:
But ask yourself these questions:
- Why are the headers bold?
- Why is an H1 heading a different size than an H2?
- When you click a hyperlink, why did it turn purple?
We have never added any css styling of our own to these elements and yet here they are, all dressed by themselves with no help from us. They grow up so fast.
Don't let these few unanswered questions haunt you at night. The short and simple answer is: Browser Defaults.
Did you know that different browsers have their own default style settings? It might be hard to tell at first but take a look at this side-by-side comparison between some popular browsers used today.
Some aspects may be more difficult to distinguish amongst browsers such as the hyperlinks and headings. However, this becomes much clearer when we look at certain elements such as the checkbox and the drop down menu items. As you saw, these styles are specific to each individual browser.
Detailed lists of specific browser stylings can be found here:
The purpose for these browser defaults is so that pages are rendered with more uniformity and consistency if we developers don't specify them ourselves. But what if we didn't want our page to incorporate any of the styles that have been preset? Would we have to go in and change/undo every preset style change that the browser set for them? That seems rather excessive. Fortunately for us there are methods which we can use to make that process more efficient. These methods are called CSS Resets.
CSS RESETS
There are a few ways to implement css resets on your page:
The first is the Universal Selector:
Universal Selector - How to Use
In a new css file, we would start this off with an asterisk(*) followed by curly braces {} like so:
*{
}
What this does is target every single element on your page. Typically with this method, we would set the margin and padding to 0 to remove any default user agent styles associated with padding and margin.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now that we added these styling changes we will need to link it in our initial html document like so:
<head>
<title>Vincent's Webpage</title>
<link rel="stylesheet" href="/styles.css">
</head>
Now that it's been linked, we can take a look at how this affected our webpage (I will be using chrome for any examples moving forward).
As you can see, all stylings associated with margins and padding have been set to 0. This is a very simple way to reset many styling changes at once.
The main benefit to this method is that it is a very quick and easy way to remove all formatting. The downside is that if your webpage has a lot of content, this reset would apply to many elements on the page which in turn will affect the speed of the website.
A better way to reset your file is to reset your style on each element individually. This way, you're only applying the reset styles when they are needed as opposed to every single element that might exist out there which will result in faster speeds on your site.
ERIC MEYER'S CSS RESET
Eric Meyer's version of CSS Reset is one of most widely used and popular implementations of this technique.
Eric Meyers CSS RESET TEMPLATE
Eric Meyer's CSS Reset - How to Use
Eric Meyer's reset template is essentially a "plug-and-play". You can just copy it into a css file and link it to your html doc.
<head>
<title>Vincent's Webpage</title>
<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/styles.css">
</head>
NOTE: It is very important that you place the link before your own style.css link. This is because the page is rendered from top-down, meaning you want to reset your css BEFORE you add your own styling to it.
For the purposes of this example, our previous styles.css has been commented out to show what reset.css will do to our webpage.
From there on, you can design and style the page the way you want.
To summarize CSS Reset, it is an effective way of resetting the styling of HTML elements down to a consistent baseline. This will give the developer a peace of mind knowing that any user's viewing their page via different browsers will not be affected. Performing a css reset is by no means a requirement, but as you go on to develop webpages in the future, it is a great technique to understand in order to save you much time and headaches.
While CSS reset is a good thing to learn, it doesn't come without its own flaws, such as being hard/nearly impossible to debug. It is also non-modular, meaning that there are no section breaks in styles. This is where Normalize.css comes into play.
NORMALIZE.CSS
Normalize.css is a tool developed by Nicolas Gallagher & Jonathan Neal as an alternative to CSS resets.
Nicolas Gallagher
Jonathan Neal
An important distinguishing feature of Normalize.css from CSS resets is that it doesn't aim to completely create a clean slate when it comes to styling, rather it's goal is to maintain a consistent style across different browsers. Instead of resetting all the preset styles, it preserves the useful defaults.
There are many reasons why one would wish to use this tool over a css reset:
Preserved Defaults
To elaborate on what preserved defaults entails, normalize.css keeps you from having to re-style what you've already reset from using a css reset.Less Clutter
When it comes to your debugging tools, reset css usually has a long inheritence chain that can just be an absolute nightmare to stare at.
- Modular Unlike css resets, Normalize.css is modular, meaning that your project is divided into separate sections, making it much easier for you to pick and choose which styles to apply to each of them.
- Well Documented This project was created to help teach users how separate browsers render their elements by default. Each section of their code has comments to describe its purpose specific to each browser.
This is just a small snippet to show you what I mean. The repository is very intuitive and helps to provide the user with insight into how it works.
Supported Browsers
Currently, normalize.css supports the following browsers:
- Chrome
- Edge
- Firefox ESR+
- Internet Explorer 10+
- Safari 8+
- Opera
Notable users of Normalize.css
- TweetDeck
- GitHub
- SoundCloud
- Guardian
- Medium
- Boostrap
Normalize.css - How to Use
The repository for normalize.css can be found here.
Once forked, you can add the link of your file location to your index.html as we've done previously with our reset.css and styles.css files.
From there, you have two options:
- You can modify the preset settings inside of the normalize.css files to your liking.
- Leave normalize.css untouched and overwrite those changes in your own .css file. Just be sure to add your .css file under the normalize.css file in your html document.
TO SUMMARIZE
Reset CSS resets all styles that come with a browser's user agent. It can however, be excessive as it may make many unnecessary overwrites in the styling. It can be difficult to identify bugs and it is non-modular. You can create your own reset by using the universal selector reset or you can utilize Eric Meyer's template.
Normalize.css doesn't affect all default stylings. It will instead preserve the useful ones. It corrects bugs and common browser inconsistencies and is well documented and intuitive to use.
IN CONCLUSION
Both CSS Reset and Normalize.css have their benefits. It's not necessarily better to use one over the other but it's essential to understand the differences in order to decide which route you wish to take when designing your webpage. Reset CSS is essentially a clean slate, allowing you freedom to style your page from the ground up whereas Normalize.css helps break it down into sections for more modularity.
Both help to achieve the same goal - to get default stylings out of the way to give you creative freedom to style your page the way you wish to.
Top comments (0)