All HTML page elements by default have their own defined values. And, unfortunately, they are not treated equally by different browsers. As a result, the design of the site suffers, its design changes when you change the browser (Internet browser). The purpose of the style reset procedure is to reduce browser inconsistencies in things like line heights, margins, heading font sizes, etc.
CSS Reset Script Examples
There is an opinion that every self-respecting webmaster should write his own CSS reset code. But I am a supporter of a different approach, take a ready-made solution, understand it and correct it if necessary.
Eric Meyer CSS Reset
The reset script by Eric Meyer, according to the author himself, is intentionally very general. For example, it does not set any default background color for the body element. Therefore, it should be modified, edited, extended, and otherwise customized to suit your needs. Add the colors you want for pages, links, and so on.
/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse:c ollapse; border-spacing: 0; )
Yahoo! (YUI 3) Reset CSS
YUI 3 CSS Style Reset mitigates conflicting styling of HTML elements by browsers just like any other CSS reset script to create a solid foundation for building websites and web applications.
/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ /* TODO will need to remove settings on HTML since we can"t namespace it. TODO with the prefix, should I group by selector or property for weight savings? */ html( color:#000; background:#FFF; ) /* TODO remove settings on BODY since we can"t namespace it. */ /* TODO test putting a class on HEAD. - Fails on FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit ... */ address, caption, cite, code, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( font-size:100%; font-weight:normal; ) q:before, q:after ( content:""; ) abbr, acronym ( border:0; font-variant:normal; ) /* to preserve line-height and selector appearance */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , select ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*to enable resizing for IE*/ ) /*because legend doesn't inherit in IE * / legend ( color:#000; ) /* YUI CSS Detect ion Stamp */ #yui3-css-stamp.cssreset ( display: none; )
Reset normalize.css styles
Normalize.css is a custom CSS file that allows browsers to render all elements more consistently and according to modern standards. Its authors explored the differences between the default styles of different browsers in order to correct only those styles that need to be normalized.
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document =================================== ===================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows phone and in iOS. */ html ( line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Sections ============================================= =========================== */ /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section ( display: block; ) /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and safari. */ h1 ( font-size: 2em; margin: 0.67em 0; ) /* Grouping content ============================ ===========================================*/ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Add the correct margin in IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Text-level semantics =============== ================================================= ========= */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Remove the bottom border in Chrome 57- and Firefox 39- . * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * Prevent the duplicate application of `bolder ` by the next rule in Safari 6. */ b, strong ( font-weight: inherit; ) /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong ( font-weight: bolder; ) /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Add the correct font style in Android 4.3-. */ dfn ( font-style: italic; ) /** * Add the correct background and color in IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Add the correct font size in all browsers. */ small ( font-size: 80%; ) /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup ( font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; ) sub ( bottom: -0.25em; ) sup ( top: -0.5em; ) /* Embedded content ============================================== ========================== */ /** * Add the correct display in IE 9-. */ audio, video ( display: inline-block; ) /** * Add the correct display in iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Remove the border on images inside links in IE 10-. */ img ( border-style: none; ) /** * Hide the overflow in IE. */ svg:not(:root) ( overflow: hidden; ) /* Forms =============================== ========================================== */ /** * Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input ( /* 1 */ overflow: visible; ) /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select ( /* 1 */ text-transform: none; ) /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( outline: 1px dotted ButtonText; ) /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ white-space: normal; /* 1 */ ) /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Remove the default vertical scrollbar in IE. */ textarea ( overflow: auto; ) /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Correct the cursor style of increment and decrement buttons in Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interactive ============ ================================================= ============ */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu ( display: block; ) /* * Add the correct display in all browsers. */ summary ( display: list-item; ) /* Scripting =================================== ===================================== */ /** * Add the correct display in IE 9-. */ canvas ( display: inline-block; ) /** * Add the correct display in IE. */ template ( display: none; ) /* Hidden ==================================== ==================================== */ /** * Add the correct display in IE 10- . */ ( display: none; )
Reset via universal selector * (asterisk)
At first glance, this may seem like the simplest and most successful solution, why describe all HTML elements and assign values to them, when you can use the * selector, because it applies to all HTML.
* ( margin: 0; padding: 0; )
But unfortunately this is not a good practice. It is very hard (and time consuming compared to other CSS resets) for the browser to apply rules to every element in a document, especially on large web pages, and can also break many good default styles.
Reset Styles and WordPress
If you want to use one of the above methods reset CSS styles for a WordPress site, then this can be done in two ways.
The first is that you need to copy the reset code to the top of your style.css file. WordPress themes(after the lines about the authorship and the title of the topic, that is, after the text framed by a fraction and an asterisk /* ... */.
@import "reset.css";
If there is an @import directive in CSS, then it should be at the very beginning of the table (before all the rules). Otherwise, the browser may ignore it.
On the other hand, in order to improve performance, CSS tables styles, as a rule, on the contrary, are combined into one file. Therefore, using @import without a real need is not worth it.
As you can see, resetting styles in WordPress is nothing special.
Thanks
The following sources were used in writing this article.
By default, the browser sets its own settings for some properties in css. But the trouble here is that there are a lot of web browsers and everyone can set their own rules. What solution? Learn how to reset css settings to default and overwrite them with your own. But this article will be devoted to how this can be done.
CSS Reset or Reset Defaults
CSS Reset is a set of styles that reset some parameters, installed by the browser default. Each web developer writes this file for himself individually, and someone takes a ready-made solution. This is where I propose to start. There are many good style reset options, but my favorite is this one by Eric Meyer:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video (
margin: 0;
padding: 0;
border: 0;
font-size: 100%
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section (
display:block;
}
body (
line-height: 1;
}
ol, ul (
list-style: none;
}
blockquote, q (
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after (
content: "";
content: none;
}
table (
border-collapse: collapse;
border-spacing: 0;
}
I will comment the code a bit. Firstly, it resets the inner and outer margins for all the necessary elements. Secondly, there is support for HTML5 elements. They have a rule that will allow them to display correctly in some versions of browsers. Thirdly, the typical settings for convenient operation with tables (removed indents between cells and double borders). Also, the standard markers for lists and quotes for quotes have been dropped. These parts of the code should be removed if you want to use the default styling.
How to reset css settings yourself
With a more or less normal possession of css, you can try to write a couple of rules yourself. For example:
*{
margin: 0;
padding: 0;
}
This is perhaps the simplest command. The asterisk in this case represents all selectors, so the styles will be applied to all elements on the web page, resetting their margins and padding. You will be surprised, but these simple lines of code may be enough to provide cross-browser compatibility in many web browsers. All other rules can be added at will. I also recommend adding display: block to all HTML5 tags.
Where to place css reset rules
Here above I offered you the code, but where to insert it? There are two options here:
- Paste it at the very beginning of the main style sheet on your site
- Create a new css file on the server and save the code to it, then save and connect to all pages BEFORE the main style.css table.
For more information on connecting css stylesheet to html see
In my opinion, the second option is worse because it worsens performance by adding one extra file to the download. On the other hand, it will be easier for you to manage these rules. But for the sake of performance, I recommend using the first option.
Resetting the settings is one of the measures to ensure the cross-browser compatibility of the site, that is, the same display in different web browsers. Of course, these are not all measures that will provide the same appearance, I will write about the rest in the future on this blog. Subscribe if interested.
This article is the first in a series on CSS taming. Today we will look at the technology CSS Reset.
Why is this needed?
Each browser sets its own default style values for various HTML elements. FROM using CSS Reset we can level this difference to ensure cross-browser styles.For example, you are using the element a in your document. Most browsers like Internet Explorer and Firefox, add a link Blue colour 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 were annoyed by the underline, 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. Despite this, there is no walkthrough to create 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:
- Less is more - my choice of Reset CSS (Ed Elliot).
2. Your CSS Reset is the first thing the browser should see
Resetting styles after setting your own styles for elements is not the right approach. In this case, nothing good should be expected from the display by the browser. Remember that you should always include CSS Reset first, and then all other styles.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
I must (no, I was by no means forced) to mention this advice. Using a separate file for CSS Reset is a common practice supported by big number developers.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
Although this concept works, it is often not desirable due to incompatibilities with some browsers (for example, this selector is handled incorrectly in Internet Explorer). You should only use this technique for simple, small, static, and predictable pages (if you have to).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
Another reason I don't like a separate CSS Reset file is the potential redundancy of subsequent CSS property declarations. Repetition of your individual styles among the entire set of CSS files is bad manners 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 we should at least try!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; )
Let's say you already know what the element will look like. body:
- background-color: #cccccc;
- color: #996633;
- 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; )
Don't be afraid to modify the CSS Reset itself. Customize it for you, make it work for you. Modify, rebuild, remove and add as needed in your particular case.
Eric Meyer said the following about this: "this is not a case where everyone should use CSS Reset without changes."
CSS Default CSS for HTML Elements (2)
Each browser is different, so:
- Firefox (Gecko):. Or go to resource://gre-resources/ and look at html.css .
- Chrome/Safari (WebKit):
- Chrome (Blink):
- Internet Explorer (Trident), earlier versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/
Where can I find CSS for browser default CSS?
Many HTML elements have some css properties by default which can sometimes lead to unknown/unwanted behavior. For example, input fields are displayed differently in different browsers. I'm looking for a place that covers the new CSS3 properties and the new HTML5 elements.
I've seen in other (much older) questions (such as default CSS style sheets in browsers) that offer a CSS reset solution. This solution is sometimes not necessary, often I would like to keep some basic properties (for example, highlighting input fields in Chrome). In other words: I don't want to get rid of things just because I don't know what they do .
So, is there a site that can give me all this information (or maybe most)?
The GitHub repository for all W3C HTML specifications and default CSS style sheets for developers can be found
1.
2. Standard styles for Internet Explorer
3.
4. Standard Styles for Opera
5. Standard Styles for HTML4 (W3C specification)
6. Standard Styles for HTML5 (W3C specification)
Example, according to the default W3C HTML4 specification:
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre ( display: block; unicode-bidi: embed ) li ( display: list-item ) head ( display: none ) table ( display: table ) tr ( display: table-row ) thead ( display: table-header- group ) tbody ( display: table-row-group ) tfoot ( display: table-footer-group ) col ( display: table-column ) colgroup ( display: table-column-group ) td, th ( display: table-cell ) caption ( display: table-caption ) th ( font-weight: bolder; text-align: center ) caption ( text-align: center ) body ( margin: 8px ) h1 ( font-size: 2em; margin: .67em 0 ) h2 ( font-size: 1.5em; margin: .75em 0 ) h3 ( font-size: 1.17em; margin: .83em 0 ) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu ( margin: 1.12em 0 ) h5 ( font-size: .83em; margin: 1.5em 0 ) h6 ( font-size: .75em; margin: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, strong ( font-weight: bolder ) blockquote ( marg in-left: 40px; margin-right: 40px ) i, cite, em, var, address ( font-style: italic ) pre, tt, code, kbd, samp ( font-family: monospace ) pre ( white-space: pre ) button, textarea, input, select ( display: inline-block ) big ( font-size: 1.17em ) small, sub, sup ( font-size: .83em ) sub ( vertical-align: sub ) sup ( vertical-align: super ) table ( border-spacing: 2px; ) thead, tbody, tfoot ( vertical-align: middle ) td, th, tr ( vertical-align: inherit ) s, strike, del ( text-decoration: line-through ) hr ( border: 1px inset ) ol, ul, dir, menu, dd ( margin-left: 40px ) ol ( list-style-type: decimal ) ol ul, ul ol, ul ul, ol ol ( margin-top: 0; margin-bottom: 0 ) u, ins ( text-decoration: underline ) br:before ( content: "\A"; white-space: pre-line ) center ( text-align: center ) :link, :visited ( text-decoration: underline ) :focus ( outline: thin dotted invert ) /* Begin bidirectionality settings (do not change) */ BDO ( direction: ltr; unicode-bidi: bidi-override ) BDO ( direction: rtl; unicode-bid i: bidi-override ) * ( direction: ltr; unicode-bidi: embed ) * ( direction: rtl; unicode-bidi: embed ) @media print ( h1 ( page-break-before: always ) h1, h2, h3, h4, h5, h6 ( page-break-after: avoid ) ul, ol, dl ( page-break-before: avoid ) )