HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Selectors & Specificity

CSS selectors allow you to target specific HTML elements to style them.

Element Selector: Targets tags (e.g., p { color: red; })
Class Selector: Targets the class attribute, prefixed with a dot (e.g., .button { background: blue; })
ID Selector: Targets the id attribute, prefixed with a hash. IDs must be unique per page! (e.g., #header { height: 100px; })

Specificity

If there are two or more conflicting CSS rules that point to the same element, the browser follows rules of specificity to determine which one wins.

Hierarchy (from lowest to highest power): Element < Class < ID < Inline Style < !important.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; text-align: center; }
    
    /* Element Selector (Lowest Specificity) */
    p { color: black; font-size: 18px; }
    
    /* Class Selector (Medium Specificity) */
    .highlight { color: blue; }
    
    /* ID Selector (High Specificity) */
    #unique-text { color: green; }
    
    /* !important (Highest Specificity - Use with caution!) */
    .force-red { color: red !important; }
  </style>
</head>
<body>
  <h2>CSS Specificity Wars</h2>
  
  <p>I am a normal paragraph. The element selector made me black.</p>
  
  <p class="highlight">I have the class "highlight". Class beats Element, so I am blue.</p>
  
  <p class="highlight" id="unique-text">I have the class "highlight" AND the id "unique-text". ID beats Class, so I am green.</p>
  
  <p class="highlight" id="unique-text" class="force-red" style="color: orange;">
    I have inline styles (orange), an ID (green), and a class (blue), but another class has "!important" (red). 
    <br><br><span class="force-red"><strong>!important wins everything. I am RED.</strong></span>
  </p>
</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Selectors & Specificity

Selectors & Specificity

Specificity

Try It Yourself

Topics