Learn CSS in 10 DaysDay 1: Welcome to CSS
books.chapter 1Learn CSS in 10 Days

Day 1: Welcome to CSS

What You'll Learn Today

  • What CSS is and how it relates to HTML
  • Three ways to include CSS in your pages
  • Basic syntax: selectors, properties, and values
  • How to specify colors
  • Fundamental selectors (element, class, ID, universal)

What Is CSS?

CSS (Cascading Style Sheets) is the language that controls how web pages look. While HTML defines the structure and content, CSS handles the visual presentation.

flowchart LR
    subgraph Web["Building Blocks of a Web Page"]
        HTML["📄 HTML<br>Structure & Content"]
        CSS["🎨 CSS<br>Appearance & Design"]
        JS["⚡ JavaScript<br>Behavior & Interactivity"]
    end
    HTML --> CSS --> JS
    style HTML fill:#3b82f6,color:#fff
    style CSS fill:#8b5cf6,color:#fff
    style JS fill:#f59e0b,color:#fff

The same HTML can look completely different just by swapping out the CSS. That is the power of separating content from presentation.

Three Ways to Include CSS

1. External Stylesheet (Recommended)

Write your CSS in a separate file and link it from HTML.

<!-- index.html -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
h1 {
    color: #3b82f6;
}

2. Internal Stylesheet

Place CSS inside a <style> tag in the HTML <head>.

<head>
    <style>
        h1 {
            color: #3b82f6;
        }
    </style>
</head>

3. Inline Styles

Apply styles directly on an HTML element.

<h1 style="color: #3b82f6;">Title</h1>
Method Pros Cons
External stylesheet Reusable, cacheable Extra file to manage
Internal stylesheet Self-contained in one file Cannot share across pages
Inline styles Immediate effect Hard to maintain, not recommended

Best practice: Always use external stylesheets. They dramatically improve code reuse and maintainability.

CSS Basic Syntax

selector {
    property: value;
    property: value;
}

h1 {
    color: #3b82f6;
    font-size: 32px;
    text-align: center;
}

flowchart LR
    subgraph Rule["CSS Rule"]
        Selector["h1<br>Selector"]
        Property["color<br>Property"]
        Value["#3b82f6<br>Value"]
    end
    Selector --> Property --> Value
    style Selector fill:#3b82f6,color:#fff
    style Property fill:#22c55e,color:#fff
    style Value fill:#f59e0b,color:#fff
Term Description Example
Selector The target element(s) to style h1, .class, #id
Property The visual aspect to change color, font-size
Value The setting for the property red, 16px, center
Declaration A property-value pair color: red;
Rule A selector + declaration block h1 { color: red; }

Fundamental Selectors

Element Selector

Targets elements by their tag name.

p {
    color: #333;
}

h1 {
    font-size: 2rem;
}

Class Selector

Uses a . (dot) followed by the class name. This is the most commonly used selector.

<p class="highlight">Important text</p>
<p class="highlight">Another important paragraph</p>

.highlight {
    background-color: #fef3c7;
    padding: 8px;
}

ID Selector

Uses # followed by the ID name. Use this for one unique element per page.

<header id="main-header">
    <h1>Site Title</h1>
</header>

#main-header {
    background-color: #1e293b;
    color: white;
}

Universal Selector

Uses * to select every element on the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

flowchart TB
    subgraph Selectors["Fundamental Selectors"]
        Elem["Element Selector<br>p { ... }"]
        Class["Class Selector<br>.name { ... }"]
        ID["ID Selector<br>#name { ... }"]
        Uni["Universal Selector<br>* { ... }"]
    end
    style Elem fill:#3b82f6,color:#fff
    style Class fill:#22c55e,color:#fff
    style ID fill:#f59e0b,color:#fff
    style Uni fill:#8b5cf6,color:#fff

Tip: For everyday styling, stick with class selectors. ID selectors have high specificity, which makes them difficult to override later.

Specifying Colors

CSS offers several ways to define colors.

/* Named colors */
color: red;
color: blue;

/* Hexadecimal */
color: #ff0000;
color: #3b82f6;
color: #333;          /* shorthand for #333333 */

/* RGB */
color: rgb(59, 130, 246);

/* RGBA (with transparency) */
color: rgba(59, 130, 246, 0.5);

/* HSL */
color: hsl(217, 91%, 60%);

/* HSLA */
color: hsla(217, 91%, 60%, 0.5);
Format Example Characteristics
Named red, blue Intuitive but limited palette
Hex #3b82f6 Most widely used
RGB rgb(59, 130, 246) Intuitive numeric notation
HSL hsl(217, 91%, 60%) Hue, saturation, lightness

Tip: Modern CSS also supports slash notation like rgb(59 130 246 / 0.5) as an alternative to rgba().

Commonly Used CSS Properties

Text Properties

p {
    color: #333;              /* text color */
    font-size: 16px;          /* font size */
    font-weight: bold;        /* weight */
    text-align: center;       /* alignment */
    line-height: 1.6;         /* line spacing */
    text-decoration: none;    /* decoration (underline, etc.) */
}

Box Properties

.box {
    background-color: #f1f5f9;    /* background color */
    border: 1px solid #e2e8f0;    /* border */
    border-radius: 8px;           /* rounded corners */
    padding: 16px;                /* inner spacing */
    margin: 16px 0;               /* outer spacing */
}

CSS Comments

/* This is a comment */

/*
   Multi-line
   comments are fine too
*/

h1 {
    color: #3b82f6; /* primary color */
}

Practice: Your First Styled Page

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Debut</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="main-header">
        <h1>My Website</h1>
        <p>Beautifully styled with CSS</p>
    </header>

    <main>
        <section>
            <h2>What Is CSS?</h2>
            <p>CSS is the language that defines the <span class="highlight">visual appearance</span> of web pages.</p>
            <p class="note">It works hand-in-hand with HTML.</p>
        </section>

        <section>
            <h2>What We Learned Today</h2>
            <ul>
                <li>CSS basic syntax</li>
                <li>Types of selectors</li>
                <li>How to specify colors</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 My Website</p>
    </footer>
</body>
</html>

styles.css

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Header */
#main-header {
    background-color: #1e293b;
    color: white;
    text-align: center;
    padding: 32px;
}

#main-header h1 {
    font-size: 2rem;
}

#main-header p {
    color: #94a3b8;
}

/* Main content */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 16px;
}

section {
    margin-bottom: 32px;
}

h2 {
    color: #3b82f6;
    margin-bottom: 16px;
}

.highlight {
    background-color: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
}

.note {
    color: #64748b;
    font-style: italic;
}

ul {
    padding-left: 24px;
}

li {
    margin-bottom: 8px;
}

/* Footer */
footer {
    background-color: #f1f5f9;
    text-align: center;
    padding: 16px;
    color: #64748b;
}

Summary

Concept Description
CSS The language that defines visual presentation
External stylesheet Link via <link> — the recommended approach
Selector Specifies which elements to style
Property: value What to change and how
Class selector .name — the most frequently used selector
Color formats hex, rgb, hsl, and more

Key Takeaways

  1. Always write CSS in external stylesheets
  2. Use class selectors for everyday styling
  3. Keep colors consistent throughout your project
  4. Set box-sizing: border-box on every element

Exercises

Exercise 1: Basics

Create an HTML file with an external CSS file. Change the heading color, body font size, and page background color.

Exercise 2: Applied

Create three classes (.success, .warning, .error) that display message boxes with green, yellow, and red backgrounds respectively.

Challenge

Take a simple personal profile page and apply external CSS to give it a polished, professional appearance.

References

Next up: On Day 2, we explore Selectors and the Cascade — the mechanism behind CSS's name and the key to understanding how styles are applied.