3.1 CSS Introduction

Updated Jul 7, 2026

3.1 CSS Introduction

Updated Jul 7, 2026

CSS (Cascading Style Sheets) is the language used to style webpages.

HTML provides the structure of a webpage, while CSS controls its appearance.

Without CSS, webpages contain only plain content.

With CSS, webpages become colorful, responsive, and visually appealing.

CSS is used to:

Change colors
Set fonts
Add spacing
Create layouts
Build responsive websites
Add animations

HTML vs CSS

HTML defines the content.

<h1>Hello World</h1>

CSS changes how it looks.

h1 {
    color: blue;
    font-size: 40px;
}

Result:

Large Blue Heading

Think of it this way:

HTML
      ↓
Structure

CSS
      ↓
Appearance

Why CSS?

HTML alone only structures content.

<h1>Frontend Development</h1>

<p>Learn HTML and CSS.</p>

Without CSS:

Frontend Development

Learn HTML and CSS.

With CSS:

h1 {
    color: navy;
}

p {
    color: gray;
}

The webpage becomes easier to read and more attractive.

CSS Syntax

A CSS rule consists of a selector, a property, and a value.

selector {
    property: value;
}

Example:

h1 {
    color: blue;
}

Breakdown:

h1      → Selector
color   → Property
blue    → Value

A rule can contain multiple properties.

h1 {
    color: blue;
    font-size: 40px;
    text-align: center;
}

Three Ways to Add CSS

CSS can be added to HTML in three different ways.

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

<h1 style="color:red;">
    Hello World
</h1>

Output:

Red Heading

Multiple styles can also be applied.

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

Advantages:

Quick for testing
Easy for small examples

Disadvantages:

Hard to maintain
Repetitive
Not reusable

Example:

<h1 style="color:red;">
    Title
</h1>

<h2 style="color:red;">
    Subtitle
</h2>

Internal CSS

Internal CSS is written inside a <style> element within the <head>.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {
    color: blue;
}

</style>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

Output:

Blue Heading

Multiple rules can be added.

<style>

h1 {
    color: blue;
}

p {
    color: gray;
}

</style>

Advantages:

Good for small projects
No separate CSS file

Disadvantages:

Cannot be reused across pages
Difficult to maintain in large projects

External CSS

External CSS stores styles inside a separate .css file.

This is the most common and recommended approach.

Create a CSS file.

styles.css

h1 {
    color: blue;
}

Then link it in HTML.

<head>

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

</head>

Example:

<h1>Hello World</h1>

h1 {
    color: blue;
}

Advantages:

Reusable
Cleaner HTML
Easier maintenance
Better for large projects

Disadvantage:

Requires a separate file

Comparing CSS Methods

Method	Location	Recommended
Inline CSS	Inside an element	❌ Rarely
Internal CSS	`<style>` element	⚠ Small projects
External CSS	Separate `.css` file	✅ Best Practice

Cascading Order

CSS stands for Cascading Style Sheets.

Multiple CSS rules may target the same element.

The browser decides which rule has higher priority.

Example:

<h1 id="title">
    Hello
</h1>

h1 {
    color: blue;
}

#title {
    color: red;
}

Output:

Red Heading

The ID selector is more specific than the element selector.

CSS Priority

When multiple rules conflict, CSS follows this general order.

Inline CSS
      ↓
ID Selector
      ↓
Class Selector
      ↓
Element Selector
      ↓
Browser Default Styles

Example:

<h1
    id="title"
    class="heading"
    style="color:green;">
    Hello
</h1>

h1 {
    color: blue;
}

.heading {
    color: red;
}

#title {
    color: purple;
}

Output:

Green

The inline style overrides every other rule.

The Cascade

If two rules have the same priority, the last rule wins.

p {
    color: blue;
}

p {
    color: red;
}

Output:

Red Paragraph

Because the second rule appears later.

Best Practices

Prefer External CSS.

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

Avoid excessive inline styles.

Bad:

<p style="color:red;">
    Hello
</p>

Organize your stylesheet.

/* Typography */

h1 {

}

/* Buttons */

button {

}

Reuse classes whenever possible.

.btn {
    background: blue;
}

<button class="btn">
    Save
</button>

Real-World Example

index.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h1>
    Frontend Development
</h1>

<p>
    Learn HTML, CSS, and JavaScript.
</p>

</body>

</html>

styles.css

h1 {
    color: navy;
}

p {
    color: gray;
}

Key Takeaway

CSS controls the presentation of a website.

HTML
      ↓
Structure

CSS
      ↓
Appearance

JavaScript
      ↓
Behavior

For professional web development:

Use HTML for structure.
Use CSS for styling.
Use JavaScript for interactivity.
Prefer External CSS for clean, reusable, and maintainable code.

3.1 CSS Introduction

Updated Jul 7, 2026

3.1 CSS Introduction

Updated Jul 7, 2026

CSS (Cascading Style Sheets) is the language used to style webpages.

HTML provides the structure of a webpage, while CSS controls its appearance.

Without CSS, webpages contain only plain content.

With CSS, webpages become colorful, responsive, and visually appealing.

CSS is used to:

Change colors
Set fonts
Add spacing
Create layouts
Build responsive websites
Add animations

HTML vs CSS

HTML defines the content.

<h1>Hello World</h1>

CSS changes how it looks.

h1 {
    color: blue;
    font-size: 40px;
}

Result:

Large Blue Heading

Think of it this way:

HTML
      ↓
Structure

CSS
      ↓
Appearance

Why CSS?

HTML alone only structures content.

<h1>Frontend Development</h1>

<p>Learn HTML and CSS.</p>

Without CSS:

Frontend Development

Learn HTML and CSS.

With CSS:

h1 {
    color: navy;
}

p {
    color: gray;
}

The webpage becomes easier to read and more attractive.

CSS Syntax

A CSS rule consists of a selector, a property, and a value.

selector {
    property: value;
}

Example:

h1 {
    color: blue;
}

Breakdown:

h1      → Selector
color   → Property
blue    → Value

A rule can contain multiple properties.

h1 {
    color: blue;
    font-size: 40px;
    text-align: center;
}

Three Ways to Add CSS

CSS can be added to HTML in three different ways.

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

<h1 style="color:red;">
    Hello World
</h1>

Output:

Red Heading

Multiple styles can also be applied.

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

Advantages:

Quick for testing
Easy for small examples

Disadvantages:

Hard to maintain
Repetitive
Not reusable

Example:

<h1 style="color:red;">
    Title
</h1>

<h2 style="color:red;">
    Subtitle
</h2>

Internal CSS

Internal CSS is written inside a <style> element within the <head>.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {
    color: blue;
}

</style>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

Output:

Blue Heading

Multiple rules can be added.

<style>

h1 {
    color: blue;
}

p {
    color: gray;
}

</style>

Advantages:

Good for small projects
No separate CSS file

Disadvantages:

Cannot be reused across pages
Difficult to maintain in large projects

External CSS

External CSS stores styles inside a separate .css file.

This is the most common and recommended approach.

Create a CSS file.

styles.css

h1 {
    color: blue;
}

Then link it in HTML.

<head>

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

</head>

Example:

<h1>Hello World</h1>

h1 {
    color: blue;
}

Advantages:

Reusable
Cleaner HTML
Easier maintenance
Better for large projects

Disadvantage:

Requires a separate file

Comparing CSS Methods

Method	Location	Recommended
Inline CSS	Inside an element	❌ Rarely
Internal CSS	`<style>` element	⚠ Small projects
External CSS	Separate `.css` file	✅ Best Practice

Cascading Order

CSS stands for Cascading Style Sheets.

Multiple CSS rules may target the same element.

The browser decides which rule has higher priority.

Example:

<h1 id="title">
    Hello
</h1>

h1 {
    color: blue;
}

#title {
    color: red;
}

Output:

Red Heading

The ID selector is more specific than the element selector.

CSS Priority

When multiple rules conflict, CSS follows this general order.

Inline CSS
      ↓
ID Selector
      ↓
Class Selector
      ↓
Element Selector
      ↓
Browser Default Styles

Example:

<h1
    id="title"
    class="heading"
    style="color:green;">
    Hello
</h1>

h1 {
    color: blue;
}

.heading {
    color: red;
}

#title {
    color: purple;
}

Output:

Green

The inline style overrides every other rule.

The Cascade

If two rules have the same priority, the last rule wins.

p {
    color: blue;
}

p {
    color: red;
}

Output:

Red Paragraph

Because the second rule appears later.

Best Practices

Prefer External CSS.

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

Avoid excessive inline styles.

Bad:

<p style="color:red;">
    Hello
</p>

Organize your stylesheet.

/* Typography */

h1 {

}

/* Buttons */

button {

}

Reuse classes whenever possible.

.btn {
    background: blue;
}

<button class="btn">
    Save
</button>

Real-World Example

index.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h1>
    Frontend Development
</h1>

<p>
    Learn HTML, CSS, and JavaScript.
</p>

</body>

</html>

styles.css

h1 {
    color: navy;
}

p {
    color: gray;
}

Key Takeaway

CSS controls the presentation of a website.

HTML
      ↓
Structure

CSS
      ↓
Appearance

JavaScript
      ↓
Behavior

For professional web development:

Use HTML for structure.
Use CSS for styling.
Use JavaScript for interactivity.
Prefer External CSS for clean, reusable, and maintainable code.