🎨 Module 15 · CSS Integration🟡 IntermediateLESSON 53

Internal CSS

⏱️ 12 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress67%

🎯 What you'll learn: The <style> tag in <head>, how its rules apply across the whole page, basic media queries, and how the cascade resolves conflicting rules.

Section 1

The style Tag

Internal CSS lives in a <style> block, almost always placed in <head>. Unlike inline styles, it uses normal selectors and applies to every matching element on the page — not just one.

internal-css.html

HTML

<head>
  <style>
    p { color: #8ca8d8; line-height: 1.6; }
    .highlight { background: yellow; }
  </style>
</head>

💡

Scoped to this one page only

Internal CSS only affects the single document it's written in — other pages on the site get nothing from it, unlike an external stylesheet.

Section 2

Media Queries — Basics

A media query applies a block of CSS conditionally, based on things like viewport width. This is the foundation of responsive design.

media-query.html

HTML

<style>
.card { padding: 2rem; }

@media (max-width: 600px) {
  .card { padding: 1rem; } /* smaller on narrow screens */
}
</style>

Section 3

The Cascade — Which Rule Wins?

When multiple rules target the same element, the browser resolves conflicts using, in order: importance (!important), then specificity (ID > class > element), then source order (later rules win ties).

Selector	Specificity weight
Inline style	Highest (beats all of these)
#id	High
.class, [attribute]	Medium
element (p, div)	Lowest

⚠️

Later doesn't always mean stronger

Source order only breaks ties between rules of equal specificity — a later element selector still loses to an earlier class selector.

🧩 Knowledge Check — Lesson 53

5 questions to test your understanding.

1. Where is internal CSS typically placed?

2. Does internal CSS affect other pages on the same site?

3. What does @media (max-width: 600px) do?

4. What's the correct order of cascade priority?

5. Between a class selector written first and an element selector written later, which wins?

💪

Coding Challenge — Lesson 53

Apply what you learned · Intermediate Level

Challenge: Build a Responsive Card With Internal CSS

Write a style block with a .card rule (padding 2rem, border-radius 8px), plus a media query for max-width: 500px that reduces the padding to 1rem.

💡 Show hints if you're stuck

Put the media query after the base rule so it overrides on narrow screens.

Finished this lesson?

Mark it complete to track your progress.

Lesson 53 of 62Module 15 — CSS Integration

Internal CSS

The style Tag

Media Queries — Basics

The Cascade — Which Rule Wins?

Lesson 53 Complete!