Frontend Core | VoidX Academy

8. Introduction to CSS

CSS

Introduction to CSS

HTML gives your page structure. CSS (Cascading Style Sheets) gives it beauty. Without CSS, every website would look like a plain text document from 1995.

🎨 Your First CSS Rule

A CSS rule has two parts: a selector (which element to target) and a declaration block (the styles to apply). Use <style> tags in the <head> to write CSS alongside your HTML:

<style>
    h1 {
        color: #00A3FF;
        font-size: 32px;
        text-align: center;
    }
    p {
        color: #555;
        font-size: 16px;
        line-height: 1.7;
    }
</style>

<h1>CSS Makes Pages Beautiful</h1>
<p>Before CSS this heading was just black text. Now it has color, size, and alignment applied to it.

🎯 Classes — Targeting Specific Elements

Tag selectors like p target ALL paragraphs. Most of the time you want to style only certain elements. Give them a class attribute and target it with a . prefix:

<style>
    .success { color: #28a745; font-weight: bold; }
    .error   { color: #dc3545; font-weight: bold; }
    .info    { color: #007bff; font-style: italic; }
</style>

<p class="success">✅ Payment successful!</p>
<p class="error">❌ Invalid card number.</p>
<p class="info">ℹ️ Your order ships in 2-3 days.</p>

🏷️ IDs — One Unique Element

IDs are like classes but must be unique on the page. Target them with #. Only use IDs when you're sure there's only one of that element:

<style>
    #main-title {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 8px;
    }
</style>

<h1 id="main-title">Welcome to the Platform</h1>

🌊 The Cascade — Which Rule Wins?

When multiple CSS rules target the same element, specificity decides which one wins. More specific selectors beat less specific ones:

#id beats .class beats tag
When specificity is equal, the last rule in the file wins (the cascade)
!important overrides everything (use sparingly!)

8. Introduction to CSS

CSS

Introduction to CSS

HTML gives your page structure. CSS (Cascading Style Sheets) gives it beauty. Without CSS, every website would look like a plain text document from 1995.

🎨 Your First CSS Rule

A CSS rule has two parts: a selector (which element to target) and a declaration block (the styles to apply). Use <style> tags in the <head> to write CSS alongside your HTML:

<style>
    h1 {
        color: #00A3FF;
        font-size: 32px;
        text-align: center;
    }
    p {
        color: #555;
        font-size: 16px;
        line-height: 1.7;
    }
</style>

<h1>CSS Makes Pages Beautiful</h1>
<p>Before CSS this heading was just black text. Now it has color, size, and alignment applied to it.

🎯 Classes — Targeting Specific Elements

Tag selectors like p target ALL paragraphs. Most of the time you want to style only certain elements. Give them a class attribute and target it with a . prefix:

<style>
    .success { color: #28a745; font-weight: bold; }
    .error   { color: #dc3545; font-weight: bold; }
    .info    { color: #007bff; font-style: italic; }
</style>

<p class="success">✅ Payment successful!</p>
<p class="error">❌ Invalid card number.</p>
<p class="info">ℹ️ Your order ships in 2-3 days.</p>

🏷️ IDs — One Unique Element

IDs are like classes but must be unique on the page. Target them with #. Only use IDs when you're sure there's only one of that element:

<style>
    #main-title {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 8px;
    }
</style>

<h1 id="main-title">Welcome to the Platform</h1>

🌊 The Cascade — Which Rule Wins?

When multiple CSS rules target the same element, specificity decides which one wins. More specific selectors beat less specific ones:

#id beats .class beats tag
When specificity is equal, the last rule in the file wins (the cascade)
!important overrides everything (use sparingly!)

8. Introduction to CSS

Introduction to CSS

🎨 Your First CSS Rule

🎯 Classes — Targeting Specific Elements

🏷️ IDs — One Unique Element

🌊 The Cascade — Which Rule Wins?

Knowledge Check

8. Introduction to CSS

Introduction to CSS

🎨 Your First CSS Rule

🎯 Classes — Targeting Specific Elements

🏷️ IDs — One Unique Element

🌊 The Cascade — Which Rule Wins?

Knowledge Check