Notes/CSS3/Types of CSS

beginner7 min read

Types of CSS

Understand the three methods of applying CSS (Inline, Internal, and External) and how the cascade determines priority conflicts.

1. Inline CSS

Written directly inside the HTML tag using the style attribute. It affects only that specific element.

Inline CSS demo

I am styled using Inline CSS (style="...").

index.html

1<p style="color: red; font-weight: bold;">
2    This is inline CSS.
3</p>

Pros: Quick for testing.
Cons: Hard to maintain, messy HTML. Avoid using this in real projects!

2. Internal CSS

Written inside the <style> tag, usually in the <head>. It affects the single page it lives on.

Internal CSS demo

I am styled using Internal CSS (defined in <head>).

index.html

1<head>
2  <style>
3    .page-title {
4      color: blue;
5      text-align: center;
6    }
7  </style>
8</head>

Pros: Good for single-page styles.
Cons: Cannot be shared across multiple pages.

3. External CSS (The Gold Standard)

Written in a separate .css file and linked to the HTML. This is how professional websites are built — the styles live in a separate file and the HTML just points to it.

style.css

1body { background: #f4f6f8; }
2h1 { color: #333; }
3.card { padding: 20px; }

index.html

1<head>
2  <!-- Links to the external file -->
3  <link rel="stylesheet" href="style.css">
4</head>

Pros: Keeps HTML clean. One file changes the look of the WHOLE website.

4. Priority: The Cascade

What happens if you try to style the same element using all three methods? Who wins? The further down the pyramid you go, the lower the priority.

Priority pyramid

1. Inline (Top Priority)

2. ID Selectors

3. Class Selectors

4. Tag Selectors (Lowest)

The Battle Demo

The box below has Internal CSS setting it to Blue, but Inline CSS setting it to Purple. Inline wins.

.box (Internal CSS)vsstyle="color: purple;" (Inline CSS)

.box (Internal CSS)

1-0-0

style="color: purple;" (Inline CSS)

10-0-0Winner

conflict.html

1/* Internal CSS says BLUE */
2.box { color: blue; }
3 
4<!-- HTML Inline says PURPLE -->
5<div class="box" style="color: purple;">...</div>

Rule: Inline CSS > Internal CSS > External CSS.

5. Best Practices Checklist

A quick checklist to keep your stylesheets maintainable:

Use External CSS for all real projects. It makes maintenance easy.
Avoid Inline CSS. It clutters your HTML and is hard to override later.
Use Internal CSS only for email templates or single-page prototypes.

Key Takeaways

1.CSS can be written Inline (inside tags), Internal (inside style tags in head), or External (linked .css file).
2.External CSS is the industry gold standard as it separates structure from presentation.
3.Inline styles have the highest priority and override internal or external declarations.
4.The priority order is: Inline CSS > Internal CSS > External CSS.

Introduction to CSS CSS Selectors Basics

Notes/CSS3/Types of CSS

beginner7 min read

Types of CSS

Understand the three methods of applying CSS (Inline, Internal, and External) and how the cascade determines priority conflicts.

1. Inline CSS

Written directly inside the HTML tag using the style attribute. It affects only that specific element.

Inline CSS demo

I am styled using Inline CSS (style="...").

index.html

1<p style="color: red; font-weight: bold;">
2    This is inline CSS.
3</p>

Pros: Quick for testing.
Cons: Hard to maintain, messy HTML. Avoid using this in real projects!

2. Internal CSS

Written inside the <style> tag, usually in the <head>. It affects the single page it lives on.

Internal CSS demo

I am styled using Internal CSS (defined in <head>).

index.html

1<head>
2  <style>
3    .page-title {
4      color: blue;
5      text-align: center;
6    }
7  </style>
8</head>

Pros: Good for single-page styles.
Cons: Cannot be shared across multiple pages.

3. External CSS (The Gold Standard)

Written in a separate .css file and linked to the HTML. This is how professional websites are built — the styles live in a separate file and the HTML just points to it.

style.css

1body { background: #f4f6f8; }
2h1 { color: #333; }
3.card { padding: 20px; }

index.html

1<head>
2  <!-- Links to the external file -->
3  <link rel="stylesheet" href="style.css">
4</head>

Pros: Keeps HTML clean. One file changes the look of the WHOLE website.

4. Priority: The Cascade

What happens if you try to style the same element using all three methods? Who wins? The further down the pyramid you go, the lower the priority.

Priority pyramid

1. Inline (Top Priority)

2. ID Selectors

3. Class Selectors

4. Tag Selectors (Lowest)

The Battle Demo

The box below has Internal CSS setting it to Blue, but Inline CSS setting it to Purple. Inline wins.

.box (Internal CSS)vsstyle="color: purple;" (Inline CSS)

.box (Internal CSS)

1-0-0

style="color: purple;" (Inline CSS)

10-0-0Winner

conflict.html

1/* Internal CSS says BLUE */
2.box { color: blue; }
3 
4<!-- HTML Inline says PURPLE -->
5<div class="box" style="color: purple;">...</div>

Rule: Inline CSS > Internal CSS > External CSS.

5. Best Practices Checklist

A quick checklist to keep your stylesheets maintainable:

Use External CSS for all real projects. It makes maintenance easy.
Avoid Inline CSS. It clutters your HTML and is hard to override later.
Use Internal CSS only for email templates or single-page prototypes.

Key Takeaways

1.CSS can be written Inline (inside tags), Internal (inside style tags in head), or External (linked .css file).
2.External CSS is the industry gold standard as it separates structure from presentation.
3.Inline styles have the highest priority and override internal or external declarations.
4.The priority order is: Inline CSS > Internal CSS > External CSS.

Introduction to CSS CSS Selectors Basics