HTML

In HTML you can always have both and none will have priority over the other . It does not matter what they are. The two information are different with different functions, so they coexist and in the example posted they do not conflict. Then both are applied without problems. The problem occurs when the same name is used for the two attributes. Keep this in mind. I will show below what happens when there is conflict in CSS.

I remember that id must be unique for every document, but class can be repeated for multiple elements and one element can have more than one class (not everyone knows this). In other words there can not be more than one element with the same ID, but there can be as many elements as you want with the same class. That is, the ID is a unique identifier of the document object and the class is a marker to say that that object has certain characteristics, possibly in common with other objects in the document. Making an analogy with the questions here in SOpt think of id as the title of the object, and class as being tags for the object.

You should only use both if you have a reason to use it. In fact do not put any of these attributes in the object if it is not useful for anything.

CSS

In CSS you will treat each individually. To set the style for class in CSS you will do with the . (starting with dot) directive. For id the policy used is # . All you can do with one gives to do with the other in terms of styles in CSS.

If you have a conflicting setting for both the id will have priority over class (this would not be the case for your example). Think, you are more likely to want to give a more specific style to that object than a more generic style, which is the case of the class that serves several objects. The browser will ignore the class because the identifier has a style definition that probably fits best for the object, after all this definition was created with this specificity.

Then browser will render using the style of id . It is he who will be "accepted" in the first place. It does not matter what order it was declared in HTML or CSS.

I'll repeat, this is only relevant when there are two styles with the same name.

#secao {
    color: #0000FF
}
.secao {
    color: #000000
}

<div id="secao" class="secao">Texto</div>

The text will be blue and not black.

!important does not affect anything if there is not really a conflict between the two. This directive is only useful when there is conflict, when there are two different definitions for the same thing. See what happens when we use it in the class that conflicts with the identifier.

#secao {
    color: #0000FF
}
.secao {
    color: #000000 !important
}

<div id="secao" class="secao">Texto</div>

I placed GitHub for future reference .

If you need to use !important you have a bad chance the code is badly written.

JavaScript

For Javascript it makes a difference using id , you need to use it to identify the specific element you want to manipulate by code. Even with JS and, of course, jQuery, you can even add a new class to an element but you can not do the same with id otherwise you will have trouble correctly identifying what you are doing.

More relevant information to read in Which css selector takes priority?

The present answers already address the subject well, I only complement those with some notes.

Summary

The priority of CSS properties in an element is treated as follows:

properties with the expression !important , then those that are assigned in id that have not been subscribed by the expression, and finally those in class (s) that have not been subscribed by the expression or by the id .

To exemplify

In CSS, the rule is that id is a selector that has to be unique on the page, largely because of its JavaScript applications, which give it a precedence over any class present in the same element as well as styles applied directly to the element's tag.

However, it should be noted that !important exists to make a value of its CSS property more important than all others, regardless of id or class :

div{                    /* estilo na tag */
  color:green;
}
.blue{                  /* estilo via class */
  color:blue;
}
#red{                   /* estilo via id */
  color:red;
}
.grey{                  /* estilo expresso como IMPORTANTE */
  color:grey!important;
}

<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important +  CLASS</div>

Note that the Mozilla Developer Network considers the use of !important bad practice:

  Using !important is a bad practice because it makes debugging difficult because you break the natural cascade in your style sheets.

Combinations

We can also complete the answer with the question of selector combinations.

When we assign CSS properties to an element, we can assign the same via class , id , tag , but also with a combination.

Here is an example of a combination with id + class that prevails over the above rules, but does not prevail over expression !important :

div{                        /* estilo na tag */
    color:green;
}
.blue{                      /* estilo via class */
    color:blue;
}
#red{                       /* estilo via id */
    color:red;
}
.grey{                      /* estilo expresso como IMPORTANTE */
    color:grey!important;
}

#red.bubu {                 /* combinação prevalece sobre as regras de ID */
    color:black;            /* ou class com excepção do que tem a expressão IMPORTANTE */
}

<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important +  CLASS</div>

<div id="red" class="blue bubu">
    <small>A minha cor via ID + CLASS deveria dar vermelho, mas foi subscrito pela combinação "#red.bubu" para preto.</small>
</div>

Disambiguation about using id

I've got the idea that the general concept is that " id should not be used for styles", this concept should be considered incorrect and I'll prove:

The use of id for CSS styles is perfectly valid and has, for example, the same utility that JavaScript gives you, that is, to reach a specific element on the page.

If styles in id were not valid, why would W3C have wasted time implementing hundreds of rules that bring numerous jobs to the browsers that implement them and the programmers who have to know them?

And the answer can be found in the documentation:

7.5.2 Identifying elements: id and class attributes

  

The id attribute has several HTML roles:

     

As a selector for style sheet .   As a anchor for hypertext links.   As a way of referring to a particular element of a script >.   As the name of a declared OBJECT element.   For general purpose processing by user agents (for example, for identifying fields when extracting data from HTML pages in a database, translating HTML documents into other formats, etc.)

The id selector has higher precedence than the class selector. So when you have both, id will always be applied.

.foo { color: blue }
#intro, #intro1 { color: red }

<p class="foo">Hello!</p>
<p id="intro1">Hello!</p>
<p id="intro" class="foo">Hello!</p>

A practical example also in JSFiddle .

Recommendation: Avoid using id to assign styles, as id must be unique per page.

The answers are already very good, but studying about found an example that can easily discover the predominance

W3C has created a way to calculate selector specificity. To understand in a simple way, we basically distribute different weights to the applied rules:

• CSS inline : 1000 points;
• ID : 100 points;
• Classes, pseudo-classe e atributos : 10 points;
• Elementos : 1 point.

In practice, we can do calculations like the following examples:

p.foobar: 1 class + 1 element = 11 points.

div#foobar .foo .bar: 1 ID + 1 element + 3 classes = 131

Define the values you find necessary, but remember that the order of predominance is in the sequence I described above.