CSS Theory #1: Conflicts between Selectors

When there are multiple declarations for the same element then:

1. Declarations marked “! important” are used first.

It should only be used as a last resort, to fix code. It is more of a hack, and should not be used normally. An example in CSS:

p {
    color: green !important;
}

2. Inline style (style attribute in HTML code).

You should not style in HTML, unless it is really, really small and in the <head> section.

*****************************

When all of your code is in the style.css section then:

1. ID (#) selector is given priority.

  • Multiple ID’s → then last id in the code will work.

2. Class (.) or pseudo-class (:) selector is next.

  • Multiple classes’ → then last class in the code will work.

3. Element selector (p, div, li, etc.) is next.

  • Multiple elements → then last selector in the code will work.

4. Universal selector (*) has the lowest priority when it is the selected style.

*****************************

To add multiple classes to the same selector, you simply add a space between the names. Like so:

<p class=”copyright text”>Copyright &copy; 2022 by Ann.</p>

This entry was posted in Web Developer Course and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *