Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 03 / 12

When two rules disagree

The last rule does not always win. Find out why with a small case.

Learning paths14 min

Let's discover together

  1. 1

    Properties such as color and font-family are normally inherited; margin and border are not inherited by default. A rule applied directly can replace a value that would otherwise be inherited.

  2. 2

    Here all rules are normal author rules without layers or inline styles. Within this scope, .sample is more specific than p; an id selector outweighs a class. The full cascade also considers origin, importance and layers before specificity.

  3. 3

    When earlier conditions tie, the later declaration wins. Two .sample rules with different colors therefore use the last. !important changes priority; it is not a way to fix every conflict or make a stylesheet understandable.

  4. 4

    Predict the sample color, apply and inspect its computed color in the workshop. Swap the two class rules. In the local file, browser developer tools’ Styles panel helps identify overridden declarations.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Compare inheritance, specificity and order in ordinary same-origin rules.

Now it's your turn

Discovery workshop

Predict, change, compare

Without !important, layers or inline styles: .sample { color: navy; } precedes p { color: red; }.
Build your answers and check when you are ready.
A moment to understand

Is it correct that the last rule always wins?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Make two predictions: class versus element, then two identical classes. Record the winning rule and why.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.