Priority of stylings in classes, ids and inline

How to correctly prioritize CSS?

// navigation


// content

How to override CSS statements without "!important"?

Anyone who has already dealt with CSS instructions on the web will know a whole range of ways to declare them and then overwrite them. An absolute no-go is the declaration "! Important" following the statement. Why this is not needed in 99% of all cases and how to do it right, we explain in this article.

Everyone knows the normal inline statement that each HTML element can get by "style" attribute. Thus it is possible to style a text easily with a red color:

<p style="color:red;">Text is red</p>

However, these instructions become quickly confusing and can not be changed globally. So if we wanted to color the red text on our page in dark red, we would have to search all HTML documents and database entries for this statement, and for example replace "p style =color: red;" with "p style = color: darkred;". This, of course, is not practical.

Therefore, the first settlers of the Web decided to write style instructions in the head of the page:

<style>p {color: red; }</style>

Now all the paragraph elements of the corresponding page would be colored red. If we want to change this, we can customize the color for all elements of the page by simply editing the one line in the header.

However, we might not want to color all paragraph elements in red, but only certain ones. It depends on whether it is a specific element, which only occurs once and can therefore also be navigated via Javascript and its ID, or whether it is a "class" of elements.

p.RedClass {color: red; }
#SingleRedItem { color: red; }

In the respective HTML element, we would specify this class or ID as follows:

<p class="RedClass">Red Text</p>
<p id="SingleRedItem">Red Text, that is unique</p>

Now that we have explained the general methodology of CSS, we are devoting ourselves to the basic structure in which commands are valid. In principle, CSS commands are overwritten. So if you first defined the color red for the class "ClassRot" and under that same class the color white, all the elements would get the color white, unless they were in the HTML code in between. This should never happen due to the declaration of the CSS in the head of the page!

So if we want to override a CSS declaration in the wrong place, only "!important" will help us, because this is primarily against elements that have not received this property, even if the CSS code were in front of the other. Now, let's see what's going on: you're in the wrong place in the CSS! Since it is usual practice to integrate the stylesheets of the frameworks in advance in order to be able to override this definition with your own CSS files, you should never end up at the point where there is no more "! Important".

An additional problem with declaring style attributes with "!important" is the execution of media queries. Because media queries are executed only when bpsw. The screen width is a maximum of 767px, they should always be at the end of your CSS definitions to override any other definitions for certain screen sizes (in our case, smartphones).

If you now have predefined "!important" values in the normal CSS, you can not go back and overwrite them with "!important" in order to get the desired effect. All of this leads to the fact that we generally advise against this instruction and only in exceptional cases. For example, an exception would be if certain commands are not executed or executed incorrectly in Internet Explorer, but we are sure that this is only possible with such a statement.

In summary, it is to say:

  • CSS write statements to files and implement them under one another in <head>
  • Make sure that frameworks are up and media queries are at the end
  • On "! Important" we renounce completely
  • If elements in our CSS appear duplicate, we ask ourselves better why (performance suffers and meaningfulness is more than questionable)
  • If we can no longer style elements with our own CSS, we examine the element with e.g. Chrome or Firefox and look where the style instructions come from. For this, the best solution is to switch off ConcatenateCSS or similar in the test system!

The CSS priority in a nutshell

The following prioritization is used by CSS for almost all browsers:

Later loaded files overwrite previous

(For this purpose simply load bootstrap.min.css first and then overwrite it later in the code with bs_overrides.css). However, you must pay attention to the set of classes, if you have the same file (or more)

More classifications override definitions with less

(E.g. Footer. Headline {font-size: 12px} and .headline {font-size: 14px} generally leads to a header size of 14px, which is limited to 12px in the footer

Inline styles override CSS statements in files

a href = "" style = "display: none" always leads to the non-display of the link
The same applies to instructions in the header of HTML pages (<style> </ style>)

!important is thus a kind of overriding definition and can make sense for emergency solutions, in order to save time

With this command, you could override all of the following prioritizations, so you only need to change the CSS code once - but this is not a good structure, since you will get problems to change this again and get caught up in a devil's circle Can Ergo we use this command only for temporary bug fixes!

In general, the default code for code is: The later the code, the more important they are (with the exception of the deviations for CSS).

Step for step guide
Read the article Priority of Cascading Stylesheets done right
Do all the steps of the article Priority of Cascading Stylesheets done right
Rating: 3.5. 2 vote(s).
2 anonymous votes
No rating done at all.
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings
Click the rating bar to rate this item Please log on to do ratings


comments powered by Disqus