Topic 9 of 48 · Full Stack Essentials

CSS Introduction (internal & external – inline) Task form (internal)

Lesson TL;DRTopic 1: CSS Introduction (internal & external – inline) Task form (internal) 📖 11 min read · 🎯 beginner · 🧭 Prerequisites: None Why this matters Picture this: you've just written your first HTML p...
11 min read·beginner·css · inline-css · internal-css · external-css

Topic 1: CSS Introduction (internal & external – inline) Task form (internal)

📖 11 min read · 🎯 beginner · 🧭 Prerequisites: None

Why this matters

Picture this: you've just written your first HTML page. It works — headings show up, paragraphs appear, links are clickable. But it looks like a plain text document from 1995. No color, no spacing, nothing that makes someone want to stay on the page. That's where CSS comes in. CSS is what turns a bare HTML skeleton into something that actually looks like a website. In this lesson, we'll look at the three ways you can add CSS to a page — inline, internal, and external — and when each one makes sense.

What You'll Learn

  • What CSS is and why it separates structure from presentation
  • How to apply inline CSS directly on a single HTML element
  • How to apply internal CSS inside a <style> tag scoped to one page
  • How to link external CSS to style multiple pages from one file
  • How to write a complete internal-CSS task: ID selectors, class selectors, and body-level rules

The Analogy

Think of your HTML document as a person walking out of the house. The HTML is the skeleton — it decides what is there (a heading, a paragraph, a form). CSS is the wardrobe: it decides whether that person wears a crisp navy suit, a bright red hoodie, or a custom-tailored evening gown. Inline CSS is a last-second accessory grabbed on the way out the door — it applies to exactly one item, right now. Internal CSS is a carefully chosen outfit for a specific occasion — it covers everything you're wearing today, on this one page. External CSS is your permanent wardrobe closet — shared outfits available to every page on your site, updated in one place, reflected everywhere at once.

Chapter 1: What Is CSS?

CSS stands for Cascading Style Sheets. It is the language responsible for the visual presentation of HTML documents — controlling colors, fonts, spacing, layout, animations, and more. Without CSS, every webpage would look like a plain text document. With CSS, the same HTML structure can be made to look like a news site, a portfolio, a dashboard, or a storefront.

The word cascading is key: when multiple style rules target the same element, CSS follows a priority order (the cascade) to decide which rule wins. Understanding that cascade is what separates developers who fight CSS from developers who work with it.

Chapter 2: The Three Ways to Apply CSS

1. Inline CSS

Inline CSS is written directly inside an HTML element's style attribute. It applies only to that single element — no other tag on the page is affected.

<p style="color: blue;">This text pops in blue!</p>

When to use it: Quick one-off overrides, debugging, or HTML emails where external files aren't available. Avoid it for general page styling — it scatters rules throughout your markup and is hard to maintain.

2. Internal CSS

Internal CSS lives inside a <style> tag placed in the <head> section of the HTML document. It can style any element on that page using standard CSS selectors (type selectors, class selectors, ID selectors, etc.).

<style>
  p {
    color: red;
    font-size: 20px;
  }
</style>

When to use it: When you need custom styles for a single, standalone page — a landing page, a prototype, or a one-off email template. All styles stay together in one file and they apply only to that page.

3. External CSS

External CSS lives in a separate .css file that you link to from the HTML document's <head> using a <link> tag.

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

When to use it: Almost always, in real projects. A single styles.css file can be linked from every page of your site, so a change in one place reflects everywhere. It also lets browsers cache the stylesheet so pages load faster on repeat visits.

flowchart LR
    A[HTML Element] -->|style attribute| B(Inline CSS)
    C[HTML Document] -->|&lt;style&gt; in &lt;head&gt;| D(Internal CSS)
    E[Multiple Pages] -->|&lt;link href=styles.css&gt;| F(External CSS)
    B -->|Highest specificity| G[Rendered Page]
    D --> G
    F -->|Lowest specificity, most reusable| G

Chapter 3: Why Internal CSS for This Task?

Internal CSS is the ideal teaching tool because it keeps everything in a single file — you write HTML and CSS side by side, see the effect immediately, and don't need to juggle multiple documents. It is also a realistic choice when you're styling a single, self-contained page where sharing styles with other pages is not a requirement.

Think of it as custom-tailoring an outfit for one specific event: every detail is deliberate, everything fits the occasion, and there's no need for a full wardrobe system.

Chapter 4: Selectors You'll Use

Before writing the task, you need two selector types:

ID selector (#id) — targets exactly one element that has a matching id attribute. The # prefix identifies it.

#intro {
  color: green;
}

<p id="intro">This element is targeted by #intro.</p>

Class selector (.class) — targets every element that has a matching class attribute. The . prefix identifies it. Multiple elements can share a class.

.info {
  color: red;
}

<p class="info">This element is targeted by .info.</p>
<p class="info">So is this one.</p>

Type selector (element) — targets every instance of that HTML element type. No prefix needed.

body {
  background-color: #f4f4f4;
}

Chapter 5: Putting It Together — The Full Task

Step 1: Create a Basic HTML Document

Start with a clean HTML structure containing two paragraphs — one identified by an ID, one by a class.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Styles</title>
</head>
<body>
  <p id="intro">Hello, world of CSS!</p>
  <p class="info">This paragraph will be styled differently.</p>
</body>
</html>

Save this as index.html. Open it in a browser. You'll see plain black text on a white background — functional, but unstyled.

Step 2: Add Internal CSS

Insert a <style> tag inside the <head> section, above the closing </head> tag. Add the following rules:

<style>
  body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
  }

  #intro {
    color: green;
    font-size: 24px;
  }

  .info {
    color: red;
    margin-top: 20px;
  }
</style>

Your complete file now looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Styles</title>
  <style>
    body {
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }

    #intro {
      color: green;
      font-size: 24px;
    }

    .info {
      color: red;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <p id="intro">Hello, world of CSS!</p>
  <p class="info">This paragraph will be styled differently.</p>
</body>
</html>

Step 3: Open in a Browser

Save the file and open (or refresh) it in your browser. You should observe:

  • The page background is now a light gray (#f4f4f4) instead of stark white
  • The body font has switched to Arial (sans-serif fallback)
  • "Hello, world of CSS!" appears in green at 24 px
  • "This paragraph will be styled differently." appears in red with 20 px of space above it

Notice how the <style> block in the <head> reached down and restyled elements in the <body> — that is the cascade in action.

🧪 Try It Yourself

Task: Extend the page from Step 3 with a third paragraph and a heading, then style them using the internal <style> block — not inline attributes.

  1. Add an <h1> tag with the text Welcome to Vizag CSS and give it id="main-title".
  2. Add a third <p> with class="info" and the text I share a class with the red paragraph.
  3. In the <style> block, add a rule for #main-title that sets color: #333 and font-size: 32px.

Success criteria: When you open the file in a browser you should see:

  • A dark-gray (#333) heading at 32 px
  • The existing green intro paragraph unchanged
  • Both .info paragraphs rendered in red (because they share the class)

Starter addition:

<h1 id="main-title">Welcome to Vizag CSS</h1>
<p class="info">I share a class with the red paragraph.</p>

#main-title {
  color: #333;
  font-size: 32px;
}

🔍 Checkpoint Quiz

Q1. What does "cascading" mean in the context of Cascading Style Sheets?

A) Styles are applied from the bottom of the file upward
B) When multiple rules target the same element, a priority order determines which rule wins
C) Styles automatically animate from one value to another
D) CSS only works when stylesheets are linked in a waterfall order

Q2. Given the following code, what color will the paragraph text be?

<style>
  p { color: blue; }
</style>
<p style="color: orange;">Vizag</p>

A) Blue, because the <style> block comes first
B) Orange, because inline styles have higher specificity than type selectors
C) Black, because the browser default overrides both
D) Green, because color defaults to green when two rules conflict

Q3. A developer has a 40-page website. They want every page to use the same font. Which CSS method is the most maintainable choice?

A) Inline CSS — add a style attribute to every element on every page
B) Internal CSS — add a <style> block to each of the 40 HTML files
C) External CSS — write one .css file and link it from all 40 pages
D) Either inline or internal — the result is identical

Q4. In the task code, what is the difference between the #intro rule and the .info rule in terms of how many elements they can target?

Open-ended — write your answer before checking.

A1. B — The cascade is a priority system: when multiple CSS rules target the same element, specificity (and source order) determines which one wins. Inline styles beat ID selectors, which beat class selectors, which beat type selectors.

A2. B — Inline styles have the highest specificity of the three CSS application methods. The style="color: orange;" attribute overrides the p { color: blue; } type-selector rule in the <style> block.

A3. C — An external .css file linked from every page means you update one file and all 40 pages reflect the change immediately. Inline or internal CSS would require editing every page individually.

A4. #intro targets exactly one element — IDs must be unique per page, so only one element can have id="intro". .info can target any number of elements that share class="info", which is why adding a second paragraph with that class also turned it red with no additional CSS.

🪞 Recap

  • CSS (Cascading Style Sheets) controls the visual presentation of HTML — colors, fonts, spacing, layout, and more.
  • Inline CSS (style="" attribute) applies to one element only and has the highest specificity.
  • Internal CSS (<style> in <head>) styles a single page and is ideal for page-specific or prototype work.
  • External CSS (<link href="styles.css">) links a shared stylesheet to multiple pages and is the standard for real projects.
  • ID selectors (#id) target one unique element; class selectors (.class) target any number of elements sharing that class; type selectors (element) target every instance of a tag.

📚 Further Reading

Like this topic? It’s one of 48 in Full Stack Essentials.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →