← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 8 of 26

HTML CSS

Imagine designing a car. HTML gives you the engine, the frame, and the wheels. It is functional, but it is raw metal. CSS is the paint job, the leather seats, the sleek aerodynamic curves, and the shiny chrome wheels. CSS stands for Cascading Style Sheets. It is the language we use to style and design our HTML layouts, taking them from simple document structures to gorgeous, interactive digital platforms. By separating content (HTML) from presentation (CSS), you can completely change how your entire website looks from a single file, making updates incredibly fast.

In this page:

  1. Inline CSS Styles
  2. Internal CSS Stylesheets
  3. External CSS Stylesheets
  4. Understanding the CSS Box Model
  5. CSS Cascading and Override Specificity
  6. Why Inline Styles Are Bad Practice
  7. Class vs ID Selectors
  8. Comparing the Three CSS Methods

Inline CSS Styles

Inline CSS is applied directly inside your HTML tags using the style attribute. It lets you target a single element and change its styles instantly. Because inline styles are applied directly to the tag, they have the highest specificity ranking and will override external stylesheets.

Note: Use inline styles for fast debugging or for dynamic elements styled by JavaScript.

Warning: Avoid building whole websites with inline styles because they clutter your HTML file and make layout updates tedious.

Example: Inline CSS Styles

markup 
<p style="color: blue;">Styled directly on the tag</p>

Internal CSS Stylesheets

Internal CSS collects your style rules into a single style block inside the head section of your page. This organizes your rules, keeps your layout code clean, and allows you to style multiple elements at once on a single webpage.

Note: Internal CSS is excellent for styling standalone pages or custom utility templates that do not share patterns with the rest of your site.

Warning: If you have a multi-page website, internal stylesheets require you to copy and paste style rules onto every page, complicating site updates.

Example: Internal CSS Stylesheets

markup 
<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

External CSS Stylesheets

External CSS is the industry standard for layout design. You write your style rules inside a separate .css text file and link it to your HTML documents using the link element. This allows you to manage the design of thousands of distinct web pages from one single stylesheet file.

Note: Save your external style rules inside a file named styles.css inside your main project directory.

Warning: Ensure the href link path in your HTML document accurately matches your external file location, or your page will render as unstyled plain text.

Example: External CSS Stylesheets

markup 
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Heading</h1>
  <p>This paragraph is styled by styles.css</p>
</body>

Understanding the CSS Box Model

Every element on a web page is treated as a rectangular box. The CSS Box Model governs how these boxes are calculated, stacking four layers from the inside out: Content, Padding (blank space inside the border), Border (the frame outline), and Margin (blank space outside the border separating elements).

Note: Use the box-sizing: border-box; property globally to prevent border widths from pushing your elements out of alignment.

Warning: Adding padding or borders to an element with a fixed width will expand its physical size on screen unless you adjust box-sizing.

Example: Understanding the CSS Box Model

markup 
<div style="width: 200px; padding: 10px; border: 1px solid black; margin: 20px;">
  Content
</div>

CSS Cascading and Override Specificity

The C in CSS stands for Cascading. This means style rules cascade downward. When multiple contradictory rules target the same element, the browser determines which rule wins based on three factors: Source Order (later rules override earlier rules), Specificity (ids beat classes, which beat tags), and Inline Override.

Note: Avoid using the !important tag to force style overrides because it ruins layout inheritance and makes code troubleshooting difficult.

Warning: If your styles are not appearing, ensure a more specific selector path is not blocking your changes in your stylesheets.

Example: CSS Cascading and Override Specificity

markup 
<style>
  p { color: blue; }
  p { color: red; }
</style>
<p>This text is red because the later rule wins.</p>

Why Inline Styles Are Bad Practice

Inline styles written directly on an element with the style attribute might feel quick, but they mix your content and your design together, making a site harder to maintain. If you want to change one color across a hundred pages, you would have to edit every single element instead of one CSS rule.

Note: Reach for a class name and an external stylesheet rule instead of style="..." almost every time — it keeps your styling reusable and searchable.

Warning: Inline styles have the highest specificity of any regular CSS, which means they are very hard to override later without using !important, which causes even more problems.

Example: Why Inline Styles Are Bad Practice

markup 
<p style="color: red;">Page 1</p>
<p style="color: red;">Page 2</p>
<p style="color: red;">Page 3</p>

Class vs ID Selectors

A class selector (written with a dot, like .card) can be applied to as many elements as you want and is the standard way to style repeated components. An ID selector (written with a hash, like #header) must be unique on the page and is meant for one specific element, like a page's main navigation bar.

Note: Default to classes for almost everything — only reach for an ID when you truly have one unique element, like linking to it with an anchor link.

Warning: ID selectors have much higher specificity than classes, so overusing IDs for styling makes your CSS harder to override later.

Example: Class vs ID Selectors

markup 
<style>
  .card { border: 1px solid gray; }
  #header { font-weight: bold; }
</style>
<div class="card">Card 1</div>
<div id="header">Main Header</div>

Comparing the Three CSS Methods

Inline CSS is written directly on an element and only affects that one element. Internal CSS lives inside a style tag in the document head and affects the whole page it is written in. External CSS lives in a separate .css file linked with a link tag and can be shared across every page of an entire website.

Note: External CSS is almost always the right choice for real projects — it is cacheable by the browser and keeps your HTML clean.

Warning: Mixing all three methods on the same page makes it very hard to predict which style actually wins when there is a conflict.

Example: Comparing the Three CSS Methods

markup 
<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    p { color: green; }
  </style>
</head>
<body>
  <p style="color: blue;">Inline wins here</p>
</body>
Common Mistakes
  1. Overusing inline style attributes, which clutter your HTML files and break design updates.
  2. Forgetting to add rel="stylesheet" when linking external CSS sheets, making them fail to load.
  3. Miscalculating container widths due to neglecting border and padding sizes in the Box Model.
Chapter Summary
  • CSS is applied inline using attributes, internally via head style blocks, or externally through referenced .css files.
  • External CSS sheets are the standard method for managing multi-page website designs cleanly.
  • The CSS Box Model is the structural foundation for computing layout margins, padding, borders, and width dimensions.
Browser Support

Standard CSS selectors and Box Model attributes are fully supported by all modern and legacy browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML HSL Colors Next Lesson → HTML Links

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.