Integrating Styles: Methods for Including CSS in HTML

Learn the three main ways to incorporate CSS into your HTML documents.

The 3 Ways to Add CSS

CSS brings style to your websites. Let's explore the three main methods to include it in your HTML documents.

Inline CSS

Applied directly to the HTML element using the style attribute. It's useful for small, specific changes but is not recommended for general use due to poor organization and reusability.

Internal CSS

Defined within a <style> tag inside the <head> of the document. This method is good for styling a single HTML page when the styles are unique to that page.

External CSS

This is the most common and recommended method. It involves linking a separate .css file to your HTML document using the <link> tag. It's great for project organization and reusability.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

color: blue;

p { color: red; }

Completa el código:

<p______ style=""

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<link rel="stylesheet" href="styles.">
<p style="color: ;">Text</p>

Practice Example: Code Editor

Write an HTML query to apply CSS using an internal stylesheet to make the background color of the body `lightgray`.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<!DOCTYPE html>
<html>
  <head>
    <title>Internal CSS Example</title>
    <style>
      body {
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <h1>This text has a styled background</h1>
  </body>
</html>

Knowledge Check

What is the most recommended method for including CSS in large projects?

← Previous Next →

Integrating Styles: Methods for Including CSS in HTML

The 3 Ways to Add CSS

Inline CSS

Internal CSS

External CSS

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra las opciones:

Completa el código:

Interactive Test 2: Fill in the Blanks

Practice Example: Code Editor

Knowledge Check

CSS Properties Reference

Introduction to CSS

CSS Selectors

Box Model

CSS Color and Background Properties

CSS Text Properties

CSS Positioning

CSS Flexbox

CSS Grid Layout

CSS Transitions and Animations

CSS Media Queries

Other CSS Properties