Adding CSS to HTML

Discover the three ways to add CSS styles to your HTML documents!

Learning Objectives

Learn about inline CSS
Understand internal (embedded) CSS
Master external CSS stylesheets

Explanation

There are three ways to add CSS to your HTML documents, and each has its own advantages: 1. Inline CSS: This is added directly to HTML elements using the style attribute. It's good for quick, one-off styling, but isn't recommended for most cases. 2. Internal (Embedded) CSS: This is added in the <head> section of your HTML document using <style> tags. It's useful when you want to style a single page. 3. External CSS: This is placed in a separate .css file and linked to your HTML using the <link> tag. This is the best approach for most websites, as it keeps your styles separate from your HTML, making your code cleaner and easier to maintain. Think of it like this: - Inline CSS is like writing a note directly on a single object - Internal CSS is like putting a list of instructions on a single room's wall - External CSS is like having a guidebook that applies to the whole house

Code Example

<!-- Inline CSS -->
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

<!-- Internal CSS -->
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

<!-- External CSS -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Try It Yourself!

Try adding some inline CSS to a paragraph to change its text color!

HTML Editor

Mini Quiz

Test your knowledge with these quick questions!

1. Which method of adding CSS is best for styling an entire website?

Inline CSS

Internal CSS

External CSS

All methods are equally good

2. How do you add inline CSS to an HTML element?

Using the <style> tag in the head section

Using the style attribute in the HTML element

Using a separate CSS file

Using the <css> tag

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

75 points

Module Progress

Basic Styling2/10 completed

Complete all lessons to earn the Style Wizard badge!

Rewards

Complete this lesson

Earn 75 points

Complete this module

Earn the Style Wizard badge