CodeX Cider Logo
CodeX Cider
CSS Topics
🎨 CSS Design✨Lesson 1 of 16

CSS Introduction

Today we learn CSS: how a rule picks an HTML element with a selector, then sets a property to a value so the browser can paint the page.

⏱️~5 min read🟢Beginner⚡Jump to Code Editor

What you'll learn in this lesson

  1. 01HTML is the skeleton, CSS is the style & interior
  2. 02Anatomy of a rule: Selector, Property, and Value
  3. 03Why the semicolon (;) is the vital punctuation
  4. 04How the browser reads and applies declarations
  5. 05First live rule: styling headings and text
🎨 Anatomy of a CSS RuleSyntax Diagram
h1{
color:#4f46e5;
text-align:center;
}
1. Selector (h1): Points to who you want to paint on the page.
2. Property: What feature to change (color, font-size, margin).
3. Value + Semicolon: The setting to apply, sealed with a ;.
  1. 1

    Why CSS Was Created: The Separation of Meaning and Style

    In early HTML, developers used tags like <font color="red"> and <center> scattered across every line. If a company decided to change its brand color, engineers had to manually update hundreds of pages and thousands of tags.

    Cascading Style Sheets (CSS) was invented to separate content from design. HTML dictates what an element is (a heading, a paragraph, a button). CSS dictates how it should look (color, size, spacing, animations).

  2. 2

    The 3 Essential Ingredients of Every CSS Rule

    Every line of CSS you will ever write follows this exact pattern:

    • Selector: Tells the browser which elements to target (e.g., p, h1, or .card).
    • Declaration Block: Everything inside curly braces { ... }.
    • Property & Value: Each instruction is written as property: value;, with a colon in between and a mandatory semicolon at the end.
  3. 3

    How the Browser Reads and Paints Your Rules

    When a browser parses an HTML document, it simultaneously constructs the CSS Object Model (CSSOM). It matches each selector against the DOM elements, calculates computed styles, and paints the pixels directly onto the display canvas.

    If a single semicolon is omitted, the browser cannot know where that declaration ends, causing subsequent styles in that block to quietly fail.

  4. 4

    Hands-On Practice: Styling Text with Pure CSS

    Look at the code below. Notice how the selector p targets all paragraphs, setting a clean electric blue color, 16px font size, and centering the text alignment.

  5. 5

    The Golden Rule: Never Forget the Semicolon

    In CSS, semicolons are not decorative—they are statement terminators. Treat every line inside { } as an imperative command that must be sealed with ;.

Interactive Live Editor
styles.css
Click & type to editHTML5
Browser Preview

Line by line

  1. p {

    The selector. This rule tells the browser to find and style every <p> element on the page. The opening curly brace starts the declaration block.

  2. color: #0284c7;

    Sets the foreground text color to a modern ocean blue. The semicolon terminates the command.

  3. font-size: 16px;

    Sets the typography height. 16px is standard default base size on the web.

  4. text-align: center;

    Aligns text horizontally along the center of its container. The closing } completes the rule.

Try it yourself

In the interactive editor above, write a CSS rule that targets every h1, makes its color #4f46e5 (electric indigo), sets its font-size to 32px, and centers it.

Hint: Use the same anatomy: h1 { color: ...; font-size: ...; text-align: ...; }

💡 View Solution (if stuck)
h1 {
  color: #4f46e5;
  font-size: 32px;
  text-align: center;
}
Quick Knowledge Check

What happens if you accidentally omit the semicolon (;) at the end of a CSS property value?

Common mistakes

  • 1.Forgetting the semicolon. The next declaration merges with it and both fail silently.
  • 2.Writing properties without curly braces or without a selector.
  • 3.Using equal signs color = red; instead of a colon color: red;.

Interview prep (Click to reveal)

Q: What does CSS stand for and what does 'Cascading' mean?▼

CSS stands for Cascading Style Sheets. 'Cascading' means styles flow down and inherit from parent to child, and when multiple rules compete for the same element, the cascade calculates specificity and source order to decide the winner.

Q: What are the three parts of a CSS rule?▼

1. Selector (identifies the element), 2. Declaration Block (enclosed in curly braces), and 3. Declarations (composed of property: value; pairs).

Q: What is the fundamental difference between HTML and CSS?▼

HTML defines the structure, semantic meaning, and content of a page. CSS defines the visual presentation, layout, colors, typography, and responsive adjustments.

Next lessonHow to Add CSS