CSS by EezyTutorials

CSS - How To (Inline, Internal, External)

Print this lesson
Back to top ↑

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10 minutes

Learn the three ways to apply CSS to HTML and when to choose each approach in real projects.

Learning Objectives

  • Differentiate inline, internal, and external CSS.
  • Choose the right approach for demo pages vs production applications.
  • Understand caching and maintainability implications.

Details & Examples

Ways to Include CSS

There are three primary methods for applying CSS to HTML:

  1. Inline with the style attribute (highest specificity, least reusable).
  2. Internal using a <style> tag in the document <head>.
  3. External using a separate .css file linked via <link> (preferred).

Examples

Inline 
<p style="color:tomato; font-weight:bold;">Inline styled text</p>
Internal 
<head>
  <style>
    p { color: steelblue; }
  </style>
</head>
External 
<head>
  <link rel="stylesheet" href="styles.css">
</head>
/ * styles.css * /
p { color: seagreen; }

Common Pitfalls

  • Overusing inline styles increases specificity and hinders reuse.
  • Forgetting to place <link> in <head> can cause FOUC flashes.

Checks for Understanding

  1. Which approach is best for large sites and why?
  2. Why can inline styles be problematic?
Show answers
  1. External stylesheets due to caching and reuse.
  2. They have high specificity and are not reusable.

Exercises

  1. Convert an inline-styled paragraph to use an external stylesheet. Show the HTML change and the CSS rule.
  2. Add an internal <style> block for a demo page, then move it to an external file and link it properly.
Suggested answers
  1. HTML: <p class="note">...</p>; CSS: .note{ color:tomato; font-weight:700; }.
  2. Move styles to styles.css and add <link rel="stylesheet" href="styles.css"> in <head>.
« Prev: CSS - Introduction Next: CSS - Syntax »