November 23, 2008 at 13:55Reset Styles Using CSS Reset
- Transfer
This article is the first of a series on CSS taming. Today we’ll look at CSS Reset technology .
Each browser sets its default style values for various HTML elements. Using CSS Reset, we can level this difference to ensure cross-browser styles.
For example, you use the element a in your document. Most browsers, like Internet Explorer and Firefox, add a blue color and underline to the link . However, imagine that after five years someone decided to create a new browser (let's call it UltraBrowser). The browser developers did not like the blue color and the underscore was annoying, so they decided to highlight the links in red and bold . It is on this basis that if you set the base value of styles for element a, then it is guaranteed to be the way you want to see it, and not how UltraBrowser developers prefer to display it.
Example 1 : displaying the default p element .
In the first example, I placed 3 paragraphs ( p ) with no established styles inside the div element , to which I set a blue background and an orange border.
By default , you will see that in Firefox there is a gap between the top border of the div container and the top border of the first paragraph. A similar situation is with the lower border of the container. However, in Internet Explorer we no longer see the gaps that were observed in Firefox.
So which browser is still right? In fact, it does not matter. What is really important is the completely different display of indentation in different browsers, if we do not use our own styles to define them.
This example is, of course, simplified. In practice, CSS Reset is used to reset those rules that may call into question the cross-browser style of your styles.
A little lower, we will touch on the features of working with resetting styles in practice, but for a start we will plunge into the history of the formation of this technique.
CSS Reset was first applied back in 2004 (even dinosaurs roamed the web) by Andrew Krespanis . In his article, he advised using a universal selector ( * ) at the beginning of the CSS file to set all elements to zero padding (margin and padding).
The universal selector works like a regular expression, capturing every element in its path, indiscriminately and without mercy. Since we did not specify any other selectors before it , any indentation is removed from all elements in the document (this is only in theory, in reality, it happens somewhat differently ). This solves the problem of the first example and tells the browser who is the boss. You can look at the result in the second example .
But now we don’t have any indentation at all, including between separate paragraphs! What to do? Do not lie or be afraid: below our reset, we will describe the rule we need. You can do this in different ways: specify the indentation at the bottom or top of the paragraph, specify it in percent, pixels or in em.
Most importantly, the browser now plays according to our rules, and not us according to it. I decided to do in a similar way:
As a result, we got what can be seen in the third example .
Shortly thereafter, CSS guru Eric Meyer conducts further research on the indentation reset technique described above. In them, he touches on the work of Tantek Chelik and his set of CSS rules undohtml.css , in which not only indentation was reset, but also the basic values of other attributes were set: font styles, list styles.
After numerous alterations and refinements, we come to a wonderful solution called CSS Reset. In it, the reset of values is done more accurately: using directly the names of the elements, and not the universal selector. It also sets default values for “problematic” elements, such as tables in which border-collapse is not handled correctly by some browsers.
Of course, there are other similar solutions ( YUI Reset CSS from Yahoo!). You can create your own, which will meet the needs of your layout.
Let's dwell on some points of using the reception in the real world.
Above, I pointed out two ways to reset styles: simple, based on the use of a universal selector (which I do not recommend using) and complex, using styles from Eric.
In addition, you can use development from Yahoo! (YUI CSS Reset), which you can pick up directly from their server .
You can create your own styles for resetting if you are solving a specific problem in your project. Despite this, there is no step-by-step guide on creating your own CSS Reset. Rely on your own principles and your own style.
To help you make the right choice, here are a couple more links:
Resetting styles after setting your own styles for elements is the wrong approach. In this case, nothing good should be expected from the browser display. Remember that you should always include CSS Reset first, and then all other styles.
Yes, I understand, it sounded funny, but this is one of the main mistakes of developers from small to large. Many just forget about it.
Some may ask a logical question: why is this happening? The answer is simple: the rules written below in the text of the CSS file (and even lower in their order of connection in the document) overwrite the rules announced earlier.
Let's not go far from the topic and continue. We apply the styles of Eric Meyer to our example, but after describing our properties, as shown in example 4. Mathematicians would say the following: "What was required to prove."
I should (no, I was by no means forced to) mention this advice. Using a separate file for CSS Reset is a common practice supported by a large number of developers.
In fact, I adhere to the position of creating one large CSS file due to the greater productivity of this approach. But in this matter, I tend to agree with the majority: CSS Reset should be moved to a separate file (usually called reset.css). In this case, you can use it in various projects without making any effort to separate it from other CSS rules.
Despite the fact that this concept works, its application is most often not desirable due to incompatibility with some browsers (for example, this selector is not correctly processed in Internet Explorer). You should only use this technique for simple, small, static, and predictable pages (if you had to do this).
This tip is especially important when you are developing solutions such as themes for CMS. You cannot predict in advance how it will be used and how it will be modified. It is better to describe the fundamental CSS rules for all elements than to use the unpredictable (albeit smaller in volume) mechanism of universal selectors for this.
Another reason I don't like the separate CSS Reset file is the potential redundancy of subsequent CSS property declarations. Repeating your individual styles among the entire set of CSS files is a bad idea and should be avoided. Of course, sometimes we are too lazy to painstakingly go through a set of styles and combine some of them, but you should at least try!
Back to Eric Reset CSS. It sets the default values for line-height, color and background of the body element as follows:
Suppose you already know what the body element will look like :
In this case, there is no need to create a new selector to describe your properties - you can simply include them in CSS Reset. Let's do it:
Don't be afraid to modify CSS Reset itself. Adjust it for yourself, make it work for yourself. Change, rebuild, clean and add as you need in your specific case.
Eric Meyer said the following: “This is not the case when everyone should use CSS Reset unchanged.”
Perhaps the first mention of resetting padding with the universal selector in the WSG mailing list.
Eric Meyers studies the mechanism of operation of the universal selector.
Jonathan Snook provides an alternative view of CSS Reset and explains why he avoids them. Opinion of one of the respected Web developers.
Tripoli is another popular CSS Reset that is subdivided into several versions. You can choose the one that suits you.
Why is this needed?
Each browser sets its default style values for various HTML elements. Using CSS Reset, we can level this difference to ensure cross-browser styles.
For example, you use the element a in your document. Most browsers, like Internet Explorer and Firefox, add a blue color and underline to the link . However, imagine that after five years someone decided to create a new browser (let's call it UltraBrowser). The browser developers did not like the blue color and the underscore was annoying, so they decided to highlight the links in red and bold . It is on this basis that if you set the base value of styles for element a, then it is guaranteed to be the way you want to see it, and not how UltraBrowser developers prefer to display it.
Simple example
Example 1 : displaying the default p element .
In the first example, I placed 3 paragraphs ( p ) with no established styles inside the div element , to which I set a blue background and an orange border.
By default , you will see that in Firefox there is a gap between the top border of the div container and the top border of the first paragraph. A similar situation is with the lower border of the container. However, in Internet Explorer we no longer see the gaps that were observed in Firefox.
So which browser is still right? In fact, it does not matter. What is really important is the completely different display of indentation in different browsers, if we do not use our own styles to define them.
This example is, of course, simplified. In practice, CSS Reset is used to reset those rules that may call into question the cross-browser style of your styles.
A little lower, we will touch on the features of working with resetting styles in practice, but for a start we will plunge into the history of the formation of this technique.
How it all began?
CSS Reset was first applied back in 2004 (even dinosaurs roamed the web) by Andrew Krespanis . In his article, he advised using a universal selector ( * ) at the beginning of the CSS file to set all elements to zero padding (margin and padding).
*
{
margin: 0;
padding: 0;
}
The universal selector works like a regular expression, capturing every element in its path, indiscriminately and without mercy. Since we did not specify any other selectors before it , any indentation is removed from all elements in the document (this is only in theory, in reality, it happens somewhat differently ). This solves the problem of the first example and tells the browser who is the boss. You can look at the result in the second example .
But now we don’t have any indentation at all, including between separate paragraphs! What to do? Do not lie or be afraid: below our reset, we will describe the rule we need. You can do this in different ways: specify the indentation at the bottom or top of the paragraph, specify it in percent, pixels or in em.
Most importantly, the browser now plays according to our rules, and not us according to it. I decided to do in a similar way:
* {margin: 0; padding: 0; }
p {margin: 5px 0 10px 0; }
As a result, we got what can be seen in the third example .
Shortly thereafter, CSS guru Eric Meyer conducts further research on the indentation reset technique described above. In them, he touches on the work of Tantek Chelik and his set of CSS rules undohtml.css , in which not only indentation was reset, but also the basic values of other attributes were set: font styles, list styles.
After numerous alterations and refinements, we come to a wonderful solution called CSS Reset. In it, the reset of values is done more accurately: using directly the names of the elements, and not the universal selector. It also sets default values for “problematic” elements, such as tables in which border-collapse is not handled correctly by some browsers.
Of course, there are other similar solutions ( YUI Reset CSS from Yahoo!). You can create your own, which will meet the needs of your layout.
Apply CSS Reset
Let's dwell on some points of using the reception in the real world.
1. Determine how you will reset styles
Above, I pointed out two ways to reset styles: simple, based on the use of a universal selector (which I do not recommend using) and complex, using styles from Eric.
In addition, you can use development from Yahoo! (YUI CSS Reset), which you can pick up directly from their server .
You can create your own styles for resetting if you are solving a specific problem in your project. Despite this, there is no step-by-step guide on creating your own CSS Reset. Rely on your own principles and your own style.
To help you make the right choice, here are a couple more links:
2. Your CSS Reset is the first thing a browser should see.
Resetting styles after setting your own styles for elements is the wrong approach. In this case, nothing good should be expected from the browser display. Remember that you should always include CSS Reset first, and then all other styles.
Yes, I understand, it sounded funny, but this is one of the main mistakes of developers from small to large. Many just forget about it.
Some may ask a logical question: why is this happening? The answer is simple: the rules written below in the text of the CSS file (and even lower in their order of connection in the document) overwrite the rules announced earlier.
Let's not go far from the topic and continue. We apply the styles of Eric Meyer to our example, but after describing our properties, as shown in example 4. Mathematicians would say the following: "What was required to prove."
3. Use a separate CSS document for CSS Reset
I should (no, I was by no means forced to) mention this advice. Using a separate file for CSS Reset is a common practice supported by a large number of developers.
In fact, I adhere to the position of creating one large CSS file due to the greater productivity of this approach. But in this matter, I tend to agree with the majority: CSS Reset should be moved to a separate file (usually called reset.css). In this case, you can use it in various projects without making any effort to separate it from other CSS rules.
4. Try to avoid using a universal selector.
Despite the fact that this concept works, its application is most often not desirable due to incompatibility with some browsers (for example, this selector is not correctly processed in Internet Explorer). You should only use this technique for simple, small, static, and predictable pages (if you had to do this).
This tip is especially important when you are developing solutions such as themes for CMS. You cannot predict in advance how it will be used and how it will be modified. It is better to describe the fundamental CSS rules for all elements than to use the unpredictable (albeit smaller in volume) mechanism of universal selectors for this.
5. Avoid Redundant Property Descriptions When Using CSS Reset
Another reason I don't like the separate CSS Reset file is the potential redundancy of subsequent CSS property declarations. Repeating your individual styles among the entire set of CSS files is a bad idea and should be avoided. Of course, sometimes we are too lazy to painstakingly go through a set of styles and combine some of them, but you should at least try!
Back to Eric Reset CSS. It sets the default values for line-height, color and background of the body element as follows:
body
{
line-height: 1;
color: black;
background: white;
}
Suppose you already know what the body element will look like :
- background-color: #cccccc;
- color: # 996633;
- You want to horizontally repeat a specific background image.
In this case, there is no need to create a new selector to describe your properties - you can simply include them in CSS Reset. Let's do it:
body
{
line-height: 1;
color: # 996633;
background: #ccc url (tiled-image.gif) repeat-x top left;
}
Don't be afraid to modify CSS Reset itself. Adjust it for yourself, make it work for yourself. Change, rebuild, clean and add as you need in your specific case.
Eric Meyer said the following: “This is not the case when everyone should use CSS Reset unchanged.”
Additional materials
[WSG] Zeroing default padding / margin
Perhaps the first mention of resetting padding with the universal selector in the WSG mailing list.
Universal selector
Eric Meyers studies the mechanism of operation of the universal selector.
No CSS Reset
Jonathan Snook provides an alternative view of CSS Reset and explains why he avoids them. Opinion of one of the respected Web developers.
Tripoli - a CSS standard for HTML rendering
Tripoli is another popular CSS Reset that is subdivided into several versions. You can choose the one that suits you.