CSS Introduction & How To Add CSS

CSS (Cascading Style Sheets) is the language that controls how a web page looks. HTML tells the browser what is on the page. CSS tells the browser how big, what color, and where things should appear.

What is CSS?

CSS (Cascading Style Sheets) is the language that controls how a web page looks. HTML tells the browser what is on the page. CSS tells the browser how big, what color, and where things should appear.

Real-life example: HTML is like the walls and rooms of a house. CSS is the paint, lights, furniture, and decoration that make the house feel nice to live in.

CSS was made to separate content (HTML) from design (CSS).
One CSS file can style many HTML pages.
You can change the whole look of a site by editing one stylesheet.

CSS Syntax

A CSS rule has a selector (which element to style) and a declaration block (what styles to apply). Each declaration is a property and a value, separated by a colon and ended with a semicolon.

Real-life example: A selector is like a name tag on a person. The declarations are the instructions: wear a blue shirt, sit in the front row.

Always end each CSS declaration with a semicolon (;). Missing semicolons are one of the most common beginner mistakes.

Basic rule structure

/* selector { property: value; } */
p {
  color: navy;
  font-size: 18px;
  line-height: 1.6;
}

h1 {
  color: #0891b2;
  text-align: center;
}

Three ways to add CSS

You can write CSS in three places: inline on one element, inside a <style> tag in the HTML head, or in a separate .css file linked from HTML. For real projects, use an external file.

Real-life example: Inline CSS is like writing a note on one cup only. Internal CSS is a small rule sheet for one room. External CSS is a master rule book for the whole house.

Inline, internal, and external CSS

<!-- 1. Inline (avoid for big projects) -->
<p style="color: red; font-size: 16px;">Hello</p>

<!-- 2. Internal (OK for tiny demos) -->
<head>
  <style>
    p { color: green; }
  </style>
</head>

<!-- 3. External (best for real sites) -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>

style.css (external file)

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #f8fafc;
}

p {
  color: #334155;
  max-width: 60ch;
}

CSS Comments

Comments help you remember why you wrote certain styles. They are ignored by the browser. Wrap comments in /* and */.

Real-life example: Comments are like sticky notes on a recipe — they help you cook again later, but guests do not eat the notes.

Comment examples

/* This is a full-line comment */

.card {
  padding: 1rem; /* padding inside the card */
  /* border-radius: 8px; — turned off for now */
}

Common CSS Errors

Small typos can break your whole design. Check spelling of property names, always use colons and semicolons, and make sure selectors match your HTML.

Real-life example: A typo in CSS is like dialing the wrong phone number — nothing connects, even if everything else is perfect.

Wrong: colour: blue; (British spelling — use color in CSS).
Wrong: font-size 16px (missing colon).
Wrong: color: blue (missing semicolon before next line).
Wrong: .buton { } when HTML uses class="button".
Wrong: forgetting to link style.css in HTML.

Use browser DevTools (F12 → Elements → Styles). Crossed-out rules mean another rule won. Red warnings mean a syntax error.

Correct vs broken

/* ✅ Correct */
.button {
  color: white;
  background: #0891b2;
  padding: 0.5rem 1rem;
}

/* ❌ Broken — typo in property name */
.buton {
  bakground: red;
}