CSS Syntax, Inclusion Methods & The Cascade

Understand CSS rule anatomy (selector, property, value), external stylesheets vs internal vs inline, and the cascade.

CSS Rule Anatomy

A CSS rule consists of a selector and a declaration block containing property-value pairs:

/* Selector */
.btn-primary {
    /* Declaration: Property: Value; */
    background-color: #4f46e5;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
}

Three Ways to Apply CSS:

External Stylesheet (<link rel="stylesheet" href="styles.css">): Recommended production approach.
Internal <style> Block: Placed inside the document <head>.
Inline style="..." Attribute: Applied directly to an HTML element (discouraged for scalable design).

Practice Exercises

Exercise 1: Write a CSS Class Rule

Easy

Write a CSS class rule named .card that gives a background color of #1e293b, white text, 1.5rem padding, and 12px border-radius.

Starter Code:

/* Write your CSS rule here */

💡 Hint: Make sure to use correct CSS syntax with curly braces and semicolons.

Solution:

.card {
    background-color: #1e293b;
    color: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
}

Next Lesson CSS Selectors, Combinators & Specificity