Flawless website design: CSS reset

Table of contents:

Flawless website design: CSS reset
Flawless website design: CSS reset

When the browser opens the site, it automatically completes the style rules with default values. Different versions of different browsers have different CSS rule values. If the developer did not specify the desired value correctly or did not describe the desired rule at all, the browser uses its own version. The idea of resetting CSS on site load allows you to level differences between browsers and display the desired content always and on all devices in the same way in most cases.

The essence and execution of the idea

HTML elements of the page are placed according to CSS rules. The developer is not required to specify all the rules for all elements and can use the default values. In most cases, this is an acceptable solution. If the task of identical display of a web resource on different devices in windows of different browsers is relevant, then it is advisable to set the critical rules to the desired values.

CSS reset examples
CSS reset examples

The example shows various options for the recommended reset set. CSS rules are cast to "null"condition. In fact, the idea is to specify the values of the critical rules, and then build the design of the site on a "clean" basis.

When designing a site, you can create a separate file for setting critical values for all CSS rules used. Use such a "powerful" idea as "":

{ set of values for all rules }

is not the best solution. Many style files start with this reset CSS option. HTML5 offers a wide range of possibilities for shaping the structure and content of the page, so when developing your own option for setting initial values, a selective path is preferable rather than deciding to comb everything in bulk with one brush - "".

Description of page styles can be lengthy. It is up to the developer to use the "" or refer to each specific rule, class, or identifier.

CSS Custom Value Setting

There are many sets of recommended values of folk rules and lists of tags that are subject to reset to the "zero" state roaming the Internet:

  • there are competent opinions;
  • proposed, theoretically sound options;
  • author's work of CSS aces;
  • there are many private crafts.

Downloading a generic reset.css file is not a problem, but it's not always the best thing to do.

Lots of reset CSS options
Lots of reset CSS options

On the left (1) a collection of "productive" solutions from several CSS gurus. Right (2) - a pair of styles, whichit is quite enough to display a simple page for placing a picture of an online store product. Simplicity is the key to success: simple, understandable and changeable.

There is no doubt: the knowledge and skills of colleagues are instructive and practical, but in each case a reasonable solution is more productive.

CMS and manual work

All popular content management systems (CMS) include style files. Some of these styles provide equivalent display of sites in different browsers on any hardware. It is quite difficult to figure out where what is described, which rule or property is inherited or specified.

Layout: adaptive knowledge and skills
Layout: adaptive knowledge and skills

Using a CMS removes the problem of how to include reset.css and use it, but limits the developer when it is necessary to correctly and accurately influence the design of a web resource.

Own version of the set of values and tags to be reset is preferable. When creating a site from scratch - this is the only reasonable option. Applying the knowledge and skills of colleagues and analytically studying every reset.css file found on the Internet is an interesting task, but not promising.

Website quality design
Website quality design

A high-quality web resource uses a certain set of tags, minimizes their number and strives for simplicity of content presentation. Taking as a basis a file written for Yahoo, Google or Yandex is practical, but it is always wiser to use your own, less authoritative, more modest, but self-sufficientoption.

Appropriateness of resetting CSS

English terminology fits perfectly into programming, but in the context of the terms reset and CSS, the meaning of the first is not at all about resetting the second - cascading style sheets. This is not a case of Windows rebooting, when it goes into itself and does not react to anything other than "Reset".

A perfectly executed site should control not only itself, its functionality and dialogue with the visitor. The developer must consider all options for displaying the desired design in all possible browsers on all available computing platforms.

Unique website design
Unique website design

The task is impossible (browsers are constantly progressing, and devices are constantly increasing in number and functionality), but something can still be done here.

Setting initial styles correctly is the real point of a CSS reset. The developer organizes all the styles he intends to use and makes a list of tags to which the favorite styles will be applied. This work is carried out in close cooperation with the development of inheritance issues and the combination of various style rules for a compact description of semantic blocks of content that include semantically related elements.

Style system - flawless foundation

The systematization of styles is determined by the theme of the site, the task being solved, and the experience of the developer. The actual product may be significantly affected by other factors.

Organizing Styles
Organizing Styles

The logic behind the reset CSS idea is the idea to formulate the foundation not only instyle system, but also in the functioning of the site as a whole. A web resource is a specific goal, the implementation of the required functionality, the rules for displaying information and dialogue with the visitor.

Popular topic

Editor's choice

  • Restore Skype account: step by step instructions, return access to your account
    Restore Skype account: step by step instructions, return access to your account

    Don't know how to recover your Skype account? Or do you want to know your friend's Skype password? The article discusses several ways to restore the user's page, as well as recommendations for storing and selecting pin codes

  • Why can't I follow on Instagram? All possible reasons
    Why can't I follow on Instagram? All possible reasons

    We subscribe to people with a specific goal - to find friends, like-minded people of interest, to learn something new for ourselves. And sometimes it is very strange to see that the Instagram system does not allow you to "follow" the profile you are interested in. This error occurs quite often, no one is immune from this trouble. Let's analyze the main reasons why Instagram does not allow you to subscribe to people

  • How to find out who "liked" a person on Instagram. Proven Methods
    How to find out who "liked" a person on Instagram. Proven Methods

    Everyone who is trying to start the path of a blogger or has already achieved some success in this field, hopes that the content that he shares with readers will not be left without attention. The main indicator of page popularity is “likes”. “Thumbs up” is also put when they want to attract the attention of potential subscribers

  • How to restore a channel on YouTube: detailed instructions, simple and effective tips
    How to restore a channel on YouTube: detailed instructions, simple and effective tips

    This article describes how to restore a channel on YouTube after deleting it. To understand this task, it will be useful to familiarize yourself with some terminology. There is a difference between deleting and blocking a YouTube account

  • How to remove a contact from "Vatsap" and how to block an unwanted interlocutor
    How to remove a contact from "Vatsap" and how to block an unwanted interlocutor

    WhatsApp is a popular messenger. It has many features that users are not even aware of. One of these is the ability to block contacts. It helps to get rid of annoying interlocutors. And how to remove a contact from WhatsApp and how to block it? You can perform these actions in different ways