Introduction to CSS | Module 03 | Frontend Learning Roadmap

1. Introduction

You have built HTML pages — but they all look plain and boring. Text in black on a white background with no design at all. That is where CSS comes in.

CSS stands for Cascading Style Sheets. It is the language you use to make websites look good — adding colours, changing fonts, spacing things out, and controlling the layout. Every beautiful website you have ever seen uses CSS.

Think of it this way:

HTML is the skeleton — the structure and content
CSS is the clothing and makeup — the visual appearance
JavaScript is the muscles — the behaviour and interactivity

In this lesson you will learn exactly what CSS is, the three ways to add it to a page, and how to write your first CSS rules.

2. Theory

What is CSS?

CSS is a stylesheet language. It describes how HTML elements should be displayed. A single CSS file can style hundreds of HTML pages at once — change one file and every page updates automatically.

CSS Syntax

A CSS rule has three parts:

selector {
  property: value;
}

Selector — targets which HTML element to style (e.g. h1, p, .card)
Property — what to change (e.g. color, font-size, background-color)
Value — the new setting (e.g. red, 24px, #2563eb)

The selector and braces form a rule block. Each property: value; pair inside is a declaration. Notice the colon between property and value, and the semicolon at the end of each declaration.

The Three Ways to Add CSS

Method	How	When to use
External	Separate `.css` file linked with `<link>`	Always — the professional method
Internal	`<style>` tag inside `<head>`	Quick experiments, email templates
Inline	`style=""` attribute on any element	One-off overrides only — avoid normally

External CSS (Recommended)

Create a file called style.css. Then link it in your HTML <head>:

<link rel="stylesheet" href="style.css">

Now every CSS rule in style.css applies to your HTML page.

What Does "Cascading" Mean?

The "C" in CSS stands for Cascading. This means styles flow downwards through three layers:

Browser defaults — every browser has built-in styles (e.g. h1 is bold and big)
Author styles — the CSS you write
User styles — user-set preferences (rare)

Later rules override earlier ones. More specific rules override less specific ones. This is called the cascade.

CSS Comments

/* This is a CSS comment — it is ignored by the browser */
p {
  color: blue; /* this makes all paragraphs blue */
}

3. Real World Example

Every website uses CSS. When you see a button with rounded corners and a blue background — that is CSS. When you see a navigation bar that stays at the top while you scroll — that is CSS. When text changes colour when you hover over it — that is CSS.

Even this page you are reading right now is styled with CSS. The sidebar, the cards, the code blocks — all created with CSS rules applied to HTML elements.

A typical real-world project has one or more .css files that can be hundreds or thousands of lines long, styling every element on every page of the site.

4. Code Example

Here is a complete HTML file with an external CSS file linked, plus the CSS file itself.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First CSS Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Hello, CSS!</h1>
  <p>This paragraph is styled with CSS.</p>
  <p class="highlight">This one is highlighted.</p>

  <button>Click Me</button>

</body>
</html>

style.css

/* Page background and text */
body {
  background-color: #f8fafc;
  color: #1e293b;
  font-family: Arial, sans-serif;
  padding: 40px;
}

/* Main heading */
h1 {
  color: #2563eb;
  font-size: 2rem;
}

/* All paragraphs */
p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Only paragraphs with class="highlight" */
.highlight {
  background-color: #fef3c7;
  padding: 8px 12px;
  border-left: 4px solid #f59e0b;
}

/* Button styling */
button {
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

5. Code Breakdown

background-color: #f8fafc;: Sets the background colour of the body to a very light grey. #f8fafc is a hex colour code (more on colours in Lesson 3).
font-family: Arial, sans-serif;: Sets the font. Arial is the first choice; if not available, use any sans-serif font. This is called a font stack.
padding: 40px;: Adds 40 pixels of space inside the element, between the content and the edge. Prevents text touching the sides of the screen.
font-size: 2rem;: Sets the font size. rem is a unit relative to the root font size (covered fully in Lesson 4).
line-height: 1.6;: The height of each line of text. 1.6 means 1.6 times the font size — giving comfortable reading space between lines.
.highlight { }: The dot before a name makes it a class selector. It targets any element with class="highlight". Class selectors are covered fully in Lesson 2.
border-left: 4px solid #f59e0b;: Adds a left border that is 4px wide, solid (not dashed), and amber-coloured. Creates a visual accent stripe.
cursor: pointer;: Changes the mouse cursor to a hand icon when hovering over the button, hinting that it is clickable.

6. Common Mistakes

Missing semicolons. Every declaration must end with ;. Forgetting it causes that rule and sometimes following rules to be ignored.
```
/* Wrong */
color: red
font-size: 16px;

/* Correct */
color: red;
font-size: 16px;
```
Wrong file path in link tag. If your CSS file is in a folder called css/, the link must be href="css/style.css", not just href="style.css".
Using = instead of :. CSS uses a colon, not an equals sign: color: blue; not color = blue;.
Confusing color and background-color. color changes the text colour. background-color changes the background behind the text.
Using inline styles everywhere. Inline styles like <p style="color:red"> are very hard to maintain. Always use external CSS files.
American vs British spelling. CSS uses American spelling: color (not colour), center (not centre).

7. Best Practices

Always use an external CSS file — never use inline styles for real projects. Keeps your HTML clean and CSS reusable.
Add comments to organise your CSS — use /* Section: Navigation */ to separate sections.
Use consistent indentation — 2 spaces per level makes CSS readable.
Write one property per line — easier to read and edit than cramming everything on one line.
Group related rules together — all typography rules together, all button rules together, etc.
Use lowercase and hyphens for class names — .nav-link not .NavLink or .navlink.
Link CSS in the <head> — never at the bottom of <body>. The browser needs styles before rendering content.

8. Practice Exercise

Create two files: exercise.html and exercise.css.

In exercise.html, create a page with: a heading, two paragraphs, and a button.
Link exercise.css in the <head>.
In exercise.css, write rules to:
- Set the page background to #e0f2fe (light blue)
- Make the heading colour #0f172a (dark navy)
- Set the paragraph font size to 18px
- Give the button a green background (#16a34a), white text, and 10px 24px padding
Open the file in your browser. Does it look styled?
Add a CSS comment at the top of your CSS file: /* My first CSS exercise */

Tip: If styles are not showing, check the browser console (F12) for errors. Usually a wrong file path or missing semicolon.

9. Assignment

Build a styled personal profile page using external CSS. Your page must include:

Your name as an <h1> heading
A short bio paragraph
A list of your hobbies (unordered list)
A "Contact Me" button

Your CSS must include at least:

A background colour for the page
A different colour for the heading
Custom font size and line-height for paragraphs
Styled button with background, colour, padding, and border-radius
Padding on the body so text does not touch the edges

Save it as profile.html and profile.css.

10. Interview Questions

These are real questions asked in junior developer interviews.

Q1: What does CSS stand for and what is its purpose?

Answer: CSS stands for Cascading Style Sheets. Its purpose is to describe the visual presentation of HTML documents — controlling colours, fonts, spacing, layout, and more.

Q2: What are the three ways to apply CSS to an HTML page?

Answer: External stylesheet (a separate .css file linked with <link>), internal stylesheet (<style> tag inside <head>), and inline styles (the style attribute on individual elements). External is the recommended approach.

Q3: What does "cascading" mean in CSS?

Answer: It means styles flow from multiple sources in a specific order of priority: browser defaults, then external stylesheets, then internal styles, then inline styles. When two rules conflict, the more specific rule wins; otherwise the last-declared rule wins.

Q4: What is the syntax of a CSS rule?

Answer: A CSS rule consists of a selector, followed by curly braces containing one or more declarations. Each declaration is a property-value pair separated by a colon and ending with a semicolon. Example: h1 { color: blue; font-size: 24px; }

Q5: Why is it bad practice to use inline CSS?

Answer: Inline CSS mixes presentation with structure, makes the HTML harder to read, cannot be reused across elements, is very hard to maintain, and has very high specificity which makes it difficult to override later.

11. Additional Resources

MDN Web Docs — CSS: First Steps (search "MDN CSS first steps")
MDN Web Docs — CSS reference (search "MDN CSS reference")
CSS-Tricks — Getting Started with CSS (search "css-tricks getting started")
W3Schools — CSS Tutorial (search "w3schools CSS tutorial")
CSS Validator — validator.w3.org/unicorn (check your CSS for errors)