Lesson 1: What is CSS? | CSS Tutorial

🎨 Lesson 1: What is CSS?

⏱️ Estimated time: 15 minutes | Difficulty: Beginner

The Stylist

CSS (Cascading Style Sheets) is the language we use to style an HTML document. It describes how HTML elements should be displayed on screen, paper, or in other media.

CSS = Cascading Style Sheets

CSS controls how HTML elements look on a page — colors, fonts, spacing, layout, animations, and more. If HTML is the skeleton, CSS is the skin and clothing!

3 Ways to Add CSS

1. Inline CSS (directly on element)

<p style="color: red; font-size: 20px;">Hello!</p>

2. Internal CSS (in <style> tag)

<head>
  <style>
    p { color: blue; font-size: 18px; }
  </style>
</head>

3. External CSS (separate file — recommended!)

<!-- In HTML -->
<link rel="stylesheet" href="style.css">

/* In style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #1a1a2e;
    color: white;
}

h1 {
    color: #ff2d95;
    text-align: center;
}

CSS Syntax

selector {
    property: value;
    property: value;
}

/* Example */
h1 {
    color: #ff2d95;
    font-size: 2rem;
    margin-bottom: 1rem;
}

Common CSS Properties

color — Text color
background-color — Background color
font-size — Text size
font-family — Font type
margin — Space outside element
padding — Space inside element
border — Border around element
width / height — Dimensions

🎨 Lesson 1: What is CSS?

The Stylist

CSS = Cascading Style Sheets

3 Ways to Add CSS

1. Inline CSS (directly on element)

2. Internal CSS (in <style> tag)

3. External CSS (separate file — recommended!)

CSS Syntax

Common CSS Properties

✅ Quick Quiz