Topic 9 of 26 · UI Designer

Topic 1: CSS Introduction (Internal, External & Inline) — Task: Style a Form with Internal CSS

Lesson TL;DRTopic 1: CSS Introduction (Internal, External & Inline) — Task: Style a Form with Internal CSS 📖 5 min read · 🎯 beginner · 🧭 Prerequisites: None Why this matters Here's the thing — when you write H...
5 min read·beginner·css · inline-css · internal-css · external-css

Topic 1: CSS Introduction (Internal, External & Inline) — Task: Style a Form with Internal CSS

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

Why this matters

Here's the thing — when you write HTML, you're building the skeleton of a page. But a skeleton on its own? Just bare bones. No colour, no spacing, no personality. That's where CSS comes in. CSS is what makes a page actually look like something. And in this lesson, you're going to learn that there are three different ways to add CSS to your HTML — inline, internal, and external. By the time you style your first form, you'll know exactly which approach to reach for and why it matters.

What You'll Learn

  • What CSS is and why every webpage needs it
  • The three methods of applying CSS: inline, internal, and external
  • When to choose each method and what its trade-offs are
  • How to write internal CSS that targets elements by tag, ID, and class
  • How to apply a complete internal stylesheet to a real HTML page

The Analogy

Think of your webpage as a person getting dressed for the day. Inline CSS is grabbing a marker and scribbling "wear blue today" directly on your hand — fast, but messy, and only affects that one moment. Internal CSS is laying out a full outfit on the bed before you leave the house — every piece chosen deliberately for this specific occasion, perfectly coordinated for the one page you're styling. External CSS is your full wardrobe: a closet of curated looks that any outfit — any page — can pull from, keeping your entire site consistent without repeating yourself. You pick the method based on how far you need the style to travel.

Chapter 1: What Is CSS?

CSS stands for Cascading Style Sheets. It is the language that controls the visual presentation of HTML elements — everything from font size and color to spacing, layout, and animation.

Without CSS, every webpage looks like a plain text document. With CSS, you control:

  • Color — text color, background color, border color
  • Typography — font family, font size, font weight, line height
  • Spacing — margin (outside an element), padding (inside an element)
  • Layout — positioning, flexbox, grid
  • Animation & transitions — hover effects, fades, movement

The word cascading means that when multiple rules target the same element, there is a defined order of priority that determines which rule wins — more on that in later lessons.

Chapter 2: The Three Ways to Apply CSS

1. Inline CSS

You write styles directly inside an HTML tag using the style attribute. The styles apply only to that single element and override everything else.

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

When to use it: Quick one-off overrides or testing a style idea. Avoid it for anything you'll reuse — it scatters your styles across the HTML and becomes a nightmare to maintain.

2. Internal CSS

You place a <style> block inside the <head> of your HTML document. All rules inside that block apply only to the page it lives on.

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

When to use it: When you need page-specific styling that won't be shared elsewhere — a landing page with a unique look, a one-off email template, or (as in today's task) a focused learning exercise where you want to see cause and effect on a single file.

3. External CSS

You create a separate .css file and link it to your HTML document with a <link> tag in the <head>. Every page that includes this link inherits all the styles in that file.

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

When to use it: Almost always in real projects. External stylesheets keep your styles organized, eliminate repetition, and let you update the look of an entire site by editing one file.

Quick Comparison

MethodScopeBest For
InlineSingle elementQuick tests, one-off overrides
InternalSingle pagePage-specific designs, learning exercises
ExternalEntire siteProduction projects, shared styles

Chapter 3: Why Internal CSS for This Task?

Internal CSS is the ideal teaching format because the HTML and the CSS live in the same file. You can see the structure and the styling side by side, trace which rule targets which element, and observe the result instantly in a browser — no file-linking required. It is the equivalent of custom tailoring an outfit for a single event: everything fits exactly right for this one page.

Chapter 4: Writing Internal CSS — Selectors, IDs, and Classes

Before you write the task, you need to understand how CSS selectors target elements.

  • Tag selector — targets every element of that type: p { } styles all <p> tags
  • ID selector — targets a single unique element using #: #intro { } styles <p id="intro">
  • Class selector — targets any element with that class using .: .info { } styles <p class="info">

CSS properties follow this syntax:

selector {
  property: value;
}

Common properties you'll use today:

PropertyWhat It DoesExample Value
colorText colorred, #ff0000, rgb(255,0,0)
background-colorBackground fill#f4f4f4
font-familyTypefaceArial, sans-serif
font-sizeText size24px
margin-topSpace above element20px

Chapter 5: Putting It Together — The Full Task

Step 1: Create a Basic HTML Document

Start with a minimal valid HTML structure. Two paragraphs — one with an ID, one with a class — give you two distinct targets to style independently.

<!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>

Step 2: Add Internal CSS in the <head>

Insert a <style> block inside <head>, just before the closing </head> tag. Add rules for the body, the #intro ID, and the .info class.

<!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>

What each rule does:

  • body { background-color: #f4f4f4; font-family: Arial, sans-serif; } — gives the whole page a light grey background and sets Arial as the default font for all text
  • #intro { color: green; font-size: 24px; } — turns the first paragraph green and enlarges it to 24px
  • .info { color: red; margin-top: 20px; } — turns the second paragraph red and pushes it 20px down from the element above

Step 3: Open in a Browser

Save the file as index.html and open it in any browser. You should see:

  • A light grey page background
  • "Hello, world of CSS!" displayed in green at 24px
  • "This paragraph will be styled differently." displayed in red, pushed down by 20px of top margin

Notice how changing one value in the <style> block instantly changes the appearance of the matching element — that cause-and-effect relationship is the core loop of CSS development.

🧪 Try It Yourself

Task: Extend the page you just built with two new styled elements.

  1. Add an <h1> tag with the text "Welcome to CSS" inside the <body>
  2. Add a <style> rule for h1 that sets its color to #3a3aff (a deep blue), its font-size to 36px, and its text-align to center
  3. Add a second class called .highlight to a new <p> tag and style it with a background-color of yellow and padding of 10px

Starter snippet:

<style>
  h1 {
    color: #3a3aff;
    font-size: 36px;
    text-align: center;
  }

  .highlight {
    background-color: yellow;
    padding: 10px;
  }
</style>

Success criterion: Open the file in a browser. You should see a centered blue heading at the top, and a paragraph with a yellow background band around it. If both appear, your internal CSS is working correctly.

🔍 Checkpoint Quiz

Q1. Which CSS method is best suited for styling a production website with ten pages that all share the same navigation bar color?

A) Inline CSS, because it is the most specific
B) Internal CSS, because it keeps styles close to the HTML
C) External CSS, because one file can style all ten pages
D) No CSS — use HTML color attributes instead

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

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

A) Blue, because the <style> block comes first
B) Orange, because inline styles have higher specificity than tag selectors
C) The browser default black, because the rules cancel each other
D) Green, because no color is explicitly resolved

Q3. A developer writes this rule:

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

Which HTML element will this rule affect?

A) All <p> elements on the page
B) Any element with class="intro"
C) Only the single element with id="intro"
D) All elements inside a tag called <intro>

Q4. You are building a one-page event invitation and want to style just that page without creating a separate CSS file. Which approach is most appropriate, and why?

A1. C — External CSS is the correct choice. A single .css file linked across all ten pages means you update the navigation color in one place and every page reflects the change immediately.

A2. B — Inline styles have higher specificity than tag selectors. The style="color: orange;" attribute overrides the p { color: blue; } rule, so the text renders orange.

A3. C — The # prefix denotes an ID selector, which targets exactly one element with the matching id attribute. It will not match classes or bare tags.

A4. Internal CSS is the most appropriate approach. Because you are styling a single page and do not need the styles shared elsewhere, placing a <style> block in the <head> keeps everything self-contained in one file — easier to share, preview, and edit without managing a separate stylesheet.

🪞 Recap

  • CSS (Cascading Style Sheets) controls the visual presentation of HTML — colors, fonts, spacing, layout, and more.
  • Inline CSS targets a single element via the style attribute; useful for quick overrides but hard to maintain at scale.
  • Internal CSS lives in a <style> block in the <head> and styles only the page it is on; ideal for page-specific designs and learning.
  • External CSS links a separate .css file and applies styles across every page that references it; the standard for production sites.
  • CSS selectors use tag names, #id, and .class to target elements precisely, and every rule follows the property: value; syntax inside { }.

📚 Further Reading

Like this topic? It’s one of 26 in UI Designer.

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

Course detailsBlock your seat →