Reset all css styles. Reset CSS styles, examples of working solutions

Reset CSS(style reset) is zeroing with using CSS, some HTML element settings that browsers set by default. For example, such elements include paragraphs ( tag ), which initially have non-zero vertical margins ( CSS ), bulleted lists(tag ), which already have not only fields, but also markers of a certain type (CSS ) and so on.

Now let's think about what this CSS reset is for, what can it give us? Well, imagine that you have laid out the pages of your site and at the same time did not change the margins of the paragraphs that the browsers offered by default, since their size suited you just fine. But tell me, please, why did you decide that all the browsers in the world that already exist and will appear will create fields of the same size? Moreover, why do you think that those browsers in which you tested your layout will not change the size of these fields in their next versions or will not remove them at all? Can you smell what?

So, by resetting CSS, layout designers simply insure themselves against such misunderstandings, that is, they first reset all “critical” CSS property values ​​for elements, and then add them back as necessary, but with their own sizes. Thus, you can be sure that the site will look the same in all browsers. Of course, you can not reset the styles, but simply set the necessary parameters for the elements during the layout, but there is a risk that somewhere something will be missed and at some point everything will “float”.

Based on the above, one of the features of CSS reset is that after applying it, many HTML elements lose their familiar appearance. And if the loss of margins for paragraphs is something newcomers expect, then, for example, the fact that buttons created with the help of tags or suddenly become outwardly similar to plain text is a complete surprise. But this should not confuse you, because for this the styles are reset, so that the layout designer does not forget to specify them again later.

There are a lot of ways to reset styles, and which one you choose is up to you, but I can tell you one thing - the best reset is the one that you created yourself, based on your experience and habits. If you do not have such experience yet, then you can use one of the options below.

Always specify CSS reset styles at the very beginning of the code, otherwise some of the settings may not work due to style priorities, which are set by browsers when processing the HTML page and CSS code.

Resetting CSS with the Universal Selector

Description of the example

In this example, using universal selector the specified styles are reset immediately for all HTML elements that will be present on the page. As you can see, most of the properties are specified just for safety net, since their values ​​already correspond to those that browsers should substitute by default according to the CSS specification. But as you already know, in practice, all this is completely wrong, and if the property is indeed inherited by elements from their parents in all leading browsers, then the same external margins set by the CSS property are not always initially equal to zero.

But the sizes of frames ( CSS ) and outlines ( CSS ) are not equal to zero by default, but already according to the specification. However, their thickness was reset to zero, so that the layout designer would not forget to specify it explicitly where it is required.

Reset CSS from Yahoo!

Description of the example

The Yahoo company at one time developed its own version of resetting styles. Here, the properties of specific elements are already changed, which allows for greater flexibility in managing them. appearance. For example, here bullets are removed from lists, and quotation marks are removed from the tag using the CSS property . The advantages of this approach are obvious, but the disadvantages include more voluminous and sometimes redundant code. But no one is stopping you from changing any CSS reset to suit your needs. Let's say you can remove some of the things you don't need. tag selectors or not just remove the quotes, but immediately set them the desired appearance.

Reset CSS by Eric Meyer

Description of the example

Another way to reset CSS was proposed by Eric Meyer, a well-known web developer in certain circles. Here he has already added a style reset for HTML 5 tags, which, by the way, at the time of this writing, were still very poorly supported themselves. modern browsers. But you always have to look into the future, right?

In fact, this article could be continued indefinitely, since, I repeat once again, at some point each layout designer comes to his own reset option or does not use it at all, relying on his attentiveness.

Many typesetters use the so-called CSS Reset, which serves to eliminate singularities different browsers. Actually, given file stylesheet resets all CSS properties to default. In this article, I will demonstrate the code for this file and explain how should I use CSS Reset or not.

I have seen many different CSS Reset, they are all about the same. You can use this one:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td (
background: transparent;
border: 0;
font-size: 100%
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body (
line-height: 1;
}
ol, ul (
list-style: none;
}
blockquote, q (
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after (
content: "";
content: none;
}
:focus(
outline: 0;
}
table (
border-collapse: collapse;
border-spacing: 0;
}

I think what is the reason for its use is clear, but that's why, for example, I don't use it, like many other typesetters, it's worth talking about. First, this extra file, Secondly, extra time for processing, but most importantly - I like the default properties. For example, the same fields at the table. After all, all the default properties were made not just like that, but as the most optimal option for displaying various elements. I assure you, nulling padding for table cells, most likely you will return it in the main file. And it is far from a fact that the value will differ from what it was by default. So it turns out that we first remove it, and then return it. And along with the first disadvantages (an extra file and extra code), many layout designers do not use CSS Reset.

Anyway, using style reset is not a bad thing, so you can safely use it if you think that simplifying the adaptation of the site under various browsers really makes your layout easier.

This short article will focus on CSS Reset. What is it?

CSS Reset is the foundation of CSS.

Let's start with the fact that html elements initially have a certain set of properties and values, some of which are defined differently by each browser. And just in order to kind of your html pages does not depend on which browser it is viewed with, and CSS Reset is used.

This is, as it were, the basis, or rather the first rules of the css document.

It is designed to set element property values ​​to desired state, which will be convenient for us to work with in the future. In other words, this is reset css styles.

CSS Reset is essentially a mini framework, a set of css properties for html documents. In the very simple form it looks like this: * (padding: 0; margin: 0) , that is, for all elements of the page, we set zero external and internal padding.

How to create it?

I believe that every web developer should write their own CSS Reset, which will be convenient for them to use. Of course, there are ready-made solutions. Let's look at some of them.

CSS Reset by Chris Poteet.

CSS Reset by Yahoo.

And one more reset styles which I like the most. It is adapted for HTML5.

Reset Styles by Eric Mayer

When laying out websites, it is more correct to write styles reset in a separate reset.css file, and connect it to the main css. This is convenient, this file can be used in many projects by simply copying it to the css folder and including it in the main style file.

• Translation

This article is the first in a series on CSS taming. Today we will look at the technology CSS Reset.

Why is this needed?

For example, you are using the element a in your document. Most browsers like Internet Explorer and Firefox, add a link blue color And underlining. However, imagine that five years later someone decided to create new browser(let's call it UltraBrowser). The developers of the browser did not like the blue color and the underlining was annoying, so they decided to highlight links in red And bold. Precisely based on this, if you set the base style value for an element a, then it is guaranteed to be the way you want it to be, and not how the UltraBrowser developers prefer to display it.

But now we don’t have any indents at all, including between individual paragraphs! What to do? Do not lie and do not be afraid: below our reset, we will describe the rule we need. It can be done different ways: specify the indent below or above the paragraph, specify it in percentage, pixels or em.

Most importantly, the browser is now playing by our rules, not us by his. I decided to do it like this:

* ( margin: 0; padding: 0; ) p ( margin: 5px 0 10px 0; )

As a result, we got what can be seen in the third example.

You can create your own reset styles if you are solving a specific problem in your project. Regardless, there is no step-by-step guide to 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:

1. Less is more - my choice of Reset CSS (Ed Elliot).

2. Your CSS Reset is the first thing the browser should see

Yes, I understand that it sounded ridiculous, but this is one of the main mistakes of developers, young and old. Many people simply forget about it.

Some may ask a logical question: why is this happening? The answer is simple: rules written down in the CSS file (and even down in their order in the document) overwrite the rules declared earlier.

Let's not deviate too much from the topic and continue. Let's apply Eric Meyer's styles to our example, but after descriptions of our properties, as shown in example 4. Mathematicians would say the following: "That is what was required to be proved."

3. Use a separate CSS document for CSS Reset

In fact, I take the position of creating one big CSS file due to the higher performance of this approach. But in this issue I tend to agree with the majority: CSS Reset should be moved to separate file(commonly referred to as reset.css). In this case, you can use it in different projects without making any effort to separate it from other CSS rules.

4. Try to avoid using the universal selector

This tip is especially important when you are developing solutions such as CMS themes. 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) mechanism of universal selectors for this.

5. Avoid Redundant Property Descriptions When Using CSS Reset

Let's get back to Eric's CSS Reset. It sets default values ​​for line-height, color and background of an element body in the following way:

body ( line-height: 1; color: black; background: white; )

1. background-color: #cccccc;
2. color: #996633;
3. You want to repeat a particular background image horizontally.

In this case, there is no need to create a new selector to describe your properties - you can simply include them in the CSS Reset. Let's do it:

body ( line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; )

Eric Meyer said the following about this: "this is not a case where everyone should use CSS Reset without changes."

• Translation

This article is the first in a series on CSS taming. Today we will look at the technology CSS Reset.

Why is this needed?

For example, you are using the element a in your document. Most browsers, like Internet Explorer and Firefox, add a link blue color And underlining. However, imagine that five years later someone decides to create a new browser (let's call it UltraBrowser). The developers of the browser did not like the blue color and the underlining was annoying, so they decided to highlight links in red And bold. Precisely based on this, if you set the base style value for an element a, then it is guaranteed to be the way you want it to be, and not how the UltraBrowser developers prefer to display it.

But now we don’t have any indents at all, including between individual paragraphs! What to do? Do not lie and do not be afraid: below our reset, we will describe the rule we need. You can do this in different ways: specify the indent from the bottom or top of the paragraph, specify it as a percentage, pixels or em.

Most importantly, the browser is now playing by our rules, not us by his. I decided to do it like this:

* ( margin: 0; padding: 0; ) p ( margin: 5px 0 10px 0; )

As a result, we got what can be seen in the third example.

You can create your own reset styles if you are solving a specific problem in your project. Regardless, there is no step-by-step guide to 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:

1. Less is more - my choice of Reset CSS (Ed Elliot).

2. Your CSS Reset is the first thing the browser should see

Yes, I understand that it sounded ridiculous, but this is one of the main mistakes of developers, young and old. Many people simply forget about it.

Some may ask a logical question: why is this happening? The answer is simple: rules written down in the CSS file (and even down in their order in the document) overwrite the rules declared earlier.

Let's not deviate too much from the topic and continue. Let's apply Eric Meyer's styles to our example, but after descriptions of our properties, as shown in example 4. Mathematicians would say the following: "That is what was required to be proved."

3. Use a separate CSS document for CSS Reset

In fact, I take the position of creating one big CSS file due to the higher performance of this approach. But on this issue, 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 different projects without making any effort to separate it from other CSS rules.

4. Try to avoid using the universal selector

This tip is especially important when you are developing solutions such as CMS themes. 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) mechanism of universal selectors for this.

5. Avoid Redundant Property Descriptions When Using CSS Reset

Let's get back to Eric's CSS Reset. It sets default values ​​for line-height, color and background of an element body in the following way:

body ( line-height: 1; color: black; background: white; )

1. background-color: #cccccc;
2. color: #996633;
3. You want to repeat a particular background image horizontally.

In this case, there is no need to create a new selector to describe your properties - you can simply include them in the CSS Reset. Let's do it:

body ( line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x top left; )

Eric Meyer said the following about this: "this is not a case where everyone should use CSS Reset without changes."