Introduction to CSS3: Styling the Web

HTML gives a web page structure and meaning. CSS gives that structure visual form.

If HTML says, "This is a heading, this is a paragraph, this is a button," CSS says, "The heading should be large, the paragraph should be readable, and the button should look clickable."

CSS controls:

• colors,
• fonts,
• spacing,
• borders,
• backgrounds,
• layout,
• animations,
• responsive behavior,
• and the overall visual identity of a website.

---

1. What Is CSS?

CSS stands for Cascading Style Sheets.

It is a stylesheet language that tells the browser how HTML should be presented on screen, on paper, and in other media.

<h1>Learn CSS</h1>
<p>CSS turns plain structure into visual design.</p>

h1 {
  color: #1d4ed8;
  font-size: 3rem;
}

p {
  color: #475569;
  line-height: 1.7;
}

CSS does not change what the content means. It changes how the content looks and behaves visually.

---

2. Why CSS Exists

In the early web, styling was often mixed directly into HTML:

<font color="red" size="5">Important heading</font>

This caused problems:

• Markup became messy.
• Design changes required editing many pages.
• Accessibility tools had more clutter to process.
• Reusing a design was difficult.
• Large sites were hard to maintain.

CSS solved this by separating content from presentation.

<h1 class="important-heading">Important heading</h1>

.important-heading {
  color: red;
  font-size: 2rem;
}

Now the HTML describes meaning, and the CSS describes appearance.

---

3. Separation of Concerns

Modern web development separates responsibilities:

This separation makes projects easier to change. You can redesign a page without rewriting its content.

---

4. The Anatomy of a CSS Rule

A CSS rule has a selector and a declaration block.

h1 {
  color: #2c3e50;
  font-size: 32px;
  text-align: center;
}

Parts:

• h1: selector.
• { ... }: declaration block.
• color: property.
• #2c3e50: value.
• ;: declaration terminator.

The browser reads this as:

Find every h1 element and apply these declarations.

---

5. CSS Comments

CSS comments use this syntax:

/* This is a CSS comment */

Use comments to label sections:

/* Base typography */
body {
  font-family: system-ui, sans-serif;
}

/* Buttons */
.button {
  border-radius: 12px;
}

Do not comment every obvious line. Comment structure, decisions, and unusual behavior.

---

6. Properties and Values

CSS has many properties. Each property accepts specific kinds of values.

.card {
  color: #0f172a;
  background: #fffdf8;
  padding: 1rem;
  border-radius: 16px;
}

Examples:

If a value is invalid, the browser ignores that declaration.

h1 {
  color: banana; /* ignored */
  font-size: 2rem; /* still works */
}

CSS is forgiving. One bad declaration usually does not break the whole stylesheet.

---

7. The Three Ways to Add CSS

There are three main ways to connect CSS to HTML.

A. External CSS

External CSS is the standard approach for real websites.

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

/* style.css */
body {
  font-family: system-ui, sans-serif;
}

Benefits:

• reusable across pages,
• easier to maintain,
• browser can cache it,
• keeps HTML cleaner.

Use external CSS for normal websites and applications.

B. Internal CSS

Internal CSS lives inside a <style> tag.

<style>
  body {
    background: #f8fafc;
  }
</style>

Use internal CSS for:

• small demos,
• one-off pages,
• emails with limited external asset support,
• quick experiments.

Do not use it as your main strategy for a large site.

C. Inline CSS

Inline CSS goes directly on an element.

<h1 style="color: red; font-weight: bold;">Hello World</h1>

Inline styles are hard to maintain and have high priority in the cascade.

Use inline styles only for:

• quick testing,
• dynamic values generated by JavaScript,
• rare one-off cases,
• or email templates when required.

Avoid inline styles for normal component styling.

---

8. Comparing CSS Integration Methods

---

9. How CSS Connects to HTML

Selectors connect CSS rules to HTML elements.

<button class="primary-button">Start Learning</button>

.primary-button {
  background: #2563eb;
  color: white;
}

The selector .primary-button matches elements with class="primary-button".

More examples:

p {
  line-height: 1.7;
}

#site-header {
  position: sticky;
}

a[aria-current="page"] {
  font-weight: 700;
}

Selectors are covered deeply in the next chapter. For now, remember: selectors are how CSS points at HTML.

---

10. Why "Cascading"?

The cascade is the browser's conflict-resolution system.

If multiple rules target the same property on the same element, the browser must choose one.

h1 {
  color: red;
}

.title {
  color: blue;
}

<h1 class="title">Welcome</h1>

The heading becomes blue because .title is more specific than h1.

The cascade considers:

1. importance,
2. origin,
3. specificity,
4. source order.

For beginners, focus first on specificity and source order.

---

11. Source Order

When two rules have the same specificity, the later rule wins.

.button {
  background: gray;
}

.button {
  background: black;
}

The button becomes black.

CSS is read from top to bottom, but source order only decides conflicts after importance, origin, and specificity are considered.

---

12. Inheritance

Some CSS properties flow from parent elements to children.

body {
  color: #1f2937;
  font-family: system-ui, sans-serif;
}

Most text inside the body inherits the color and font.

Inherited properties include:

• color,
• font-family,
• font-size,
• line-height,
• text-align.

Usually not inherited:

• margin,
• padding,
• border,
• width,
• height,
• background.

Inheritance helps you set broad defaults once instead of repeating them on every element.

---

13. Browser Default Styles

Browsers apply default styles before your CSS loads.

Examples:

• headings are bold and large,
• paragraphs have margins,
• links are blue and underlined,
• lists have indentation,
• buttons have native styling.

Your CSS overrides or builds on those defaults.

body {
  margin: 0;
}

Many projects start with a small reset:

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

This makes layout behavior more predictable.

---

14. Units You Will See Often

CSS values use units.

Examples:

.container {
  width: 90%;
  max-width: 1200px;
}

.title {
  font-size: 2.5rem;
}

.article {
  max-width: 70ch;
}

Do not worry about mastering every unit immediately. Start with px, %, and rem, then add others as needed.

---

15. A Simple Project Setup

A beginner project can start with two files:

my-css-project/
  index.html
  style.css

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Starter</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="page">
      <h1>CSS Starter</h1>
      <p>This page is styled by an external stylesheet.</p>
    </main>
  </body>
</html>

style.css:

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

.page {
  width: min(100% - 2rem, 720px);
  margin-inline: auto;
  padding-block: 4rem;
}

This setup gives you:

• responsive viewport behavior,
• external CSS,
• predictable box sizing,
• no default body margin,
• readable typography,
• and centered content.

---

16. CSS Formatting Conventions

Write CSS so future you can read it.

Recommended:

.card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 16px;
}

Guidelines:

• Put each declaration on its own line.
• Use lowercase property names.
• Keep selectors readable.
• Group related rules.
• Avoid unnecessary specificity.
• Prefer meaningful class names.

Hard-to-maintain CSS:

#main .content div.card article h2.title {
  color: red;
}

Better:

.card-title {
  color: red;
}

---

17. DevTools: Your CSS Debugger

Browser DevTools are essential for learning CSS.

Use DevTools to:

• inspect an element,
• see which rules match it,
• see crossed-out declarations,
• edit CSS live,
• view the box model,
• test responsive layouts,
• debug layout overlays for Flexbox and Grid.

When CSS seems confusing, inspect the element. The browser can show you the real computed result.

---

18. Common Beginner Mistakes

Missing Semicolon

.box {
  color: red
  background: white;
}

The missing semicolon after red can break the next declaration.

Correct:

.box {
  color: red;
  background: white;
}

Missing Curly Brace

.card {
  padding: 1rem;

.button {
  background: blue;
}

The .card rule never closes.

Wrong File Path

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

If the file is actually named style.css, the CSS will not load.

Selector Does Not Match

<button class="primary-button">Start</button>

.primary {
  background: blue;
}

.primary does not match .primary-button.

Invalid Value

h1 {
  font-size: large-big;
}

The browser ignores invalid declarations.

---

19. The Beginner CSS Workflow

Use this workflow:

1. Write semantic HTML first.
2. Link an external CSS file.
3. Add a small reset.
4. Set base body typography and background.
5. Style one component at a time.
6. Inspect with DevTools.
7. Resize the browser.
8. Refactor repeated values into reusable classes or variables.

Do not try to design the whole website in one giant CSS block. Build small, test often, and keep selectors simple.

---

20. Complete Example: First Styled Card

HTML:

<article class="lesson-card">
  <p class="eyebrow">CSS Basics</p>
  <h1>Styling the Web</h1>
  <p>CSS controls color, spacing, typography, layout, and motion.</p>
  <a href="/courses/css">Start lesson</a>
</article>

CSS:

.lesson-card {
  max-width: 520px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #d6d3d1;
  border-radius: 24px;
  color: #0f172a;
  background: #fffdf8;
  box-shadow: 0 18px 40px rgb(15 23 42 / 8%);
}

.lesson-card h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1;
}

.lesson-card p {
  line-height: 1.7;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lesson-card a {
  color: #1d4ed8;
  font-weight: 700;
}

This example uses selectors, spacing, color, typography, borders, and shadows. You will learn each of these topics in more depth throughout the CSS course.

---

21. Debugging Checklist

When CSS does not work, ask:

1. Is the stylesheet linked correctly?
2. Is the selector spelled correctly?
3. Does the selector match the HTML?
4. Is the declaration valid?
5. Is there a missing semicolon or curly brace?
6. Is another rule overriding it?
7. Is the property inherited from a parent?
8. Is the browser using cached CSS?
9. Does DevTools show the rule crossed out?
10. Is the CSS file saved?

---

22. Mini Practice

Create a simple page with:

• an external stylesheet,
• a centered container,
• a large heading,
• readable paragraph text,
• and a styled link.

Possible CSS:

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

.container {
  width: min(100% - 2rem, 720px);
  margin-inline: auto;
  padding-block: 4rem;
}

h1 {
  font-size: 3rem;
  line-height: 1;
}

p {
  color: #475569;
  line-height: 1.7;
}

a {
  color: #1d4ed8;
  font-weight: 700;
}

In the next chapter, you will learn selectors and the cascade in detail, which will let you target exactly the elements you want and understand why one rule wins over another.

---