Introduction to CSS

📚 Lesson 1 of 30  •  ⏱ 8 min read  •  Beginner

What is CSS?

CSS stands for Cascading Style Sheets. While HTML builds the structure of a page, CSS controls how it looks — colors, fonts, layout, spacing, animations.

Without CSS, every web page would be plain black text on a white background. CSS is what makes websites beautiful.

Three Ways to Add CSS

HTML 
<!-- 1. EXTERNAL (best practice) — separate .css file -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

<!-- 2. INTERNAL — inside <style> in <head> -->
<head>
  <style>
    body { background: #1a1a2e; color: white; }
  </style>
</head>

<!-- 3. INLINE — directly on the element (use sparingly) -->
<p style="color: red; font-size: 18px;">Red text</p>

CSS Syntax

A CSS rule has a selector (what to style) and a declaration block (how to style it):

CSS 
selector {
  property: value;
  property: value;
}

/* Example */
h1 {
  color: #6c63ff;
  font-size: 2rem;
  font-weight: 700;
}

Your First Styled Page

CSS — style.css 
/* Reset default browser styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

h1 {
  color: #6c63ff;
  font-size: 2.5rem;
  text-align: center;
  padding: 2rem;
}

p {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 1rem;
}

The Cascade — Why CSS is "Cascading"

When multiple rules target the same element, CSS uses a priority system to decide which wins:

  1. Specificity — more specific selectors win (#id beats .class beats tag)
  2. Order — later rules override earlier ones
  3. !important — overrides everything (use rarely)
CSS 
p { color: black; }          /* specificity: 1 */
.text { color: blue; }       /* specificity: 10 — wins over tag */
#intro { color: red; }       /* specificity: 100 — wins over class */
p { color: green !important; } /* wins over everything */
← Finish HTML Course First Next: Selectors →