Integrating Styles: Methods for Including CSS in HTML

Discover the three ways to add CSS to your HTML and learn which method is best for your projects.

Styled Title

Welcome! Let's explore the three ways to add CSS to an HTML page, starting with a plain heading.

Inline CSS: The 'style' Attribute

Applied directly to an HTML element using the style attribute. It's best for quick, specific tweaks but hurts maintainability in large projects because the styles are hard to reuse or override.

Internal CSS: The '<style>' Tag

Defined within a <style> tag, usually inside the document's <head>. This method is useful for styling a single page when its styles are unique and won't be needed elsewhere.

External CSS: The '<link>' Tag

This is the standard and most recommended method. Styles are placed in a separate .css file and linked to the HTML via a <link> tag in the head. This keeps content and presentation separate, making code clean and reusable.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

style="color: blue;"

rel="stylesheet" href="style.css"

Completa el código:

<p______>Hello</p>

<link______>

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.


<>
  p { color: red; }
</>


<h1 style="font-size: ;">Title</h1>

Unlock with Premium

Practice Example: Code Editor

Create a full HTML document that uses an **external stylesheet** located at `/css/main.css` to style the page.

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

<!DOCTYPE html>
<html>
<head>
  <title>External CSS</title>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <h1>Welcome!</h1>
</body>
</html>

Unlock with Premium

Knowledge Check

For a large website with many pages, which is the BEST method for applying CSS?

Unlock with Premium

← Previous Next →

A Practical Guide to CSS Specificity & Organization

How you include CSS is more than a choice of syntax; it directly impacts how your styles are applied and how easy your project is to maintain. Let's explore the "cascade" and best practices.

1. The Cascade: Which Style Wins?

The browser follows a set of rules to determine which style to apply if there are conflicts. As a general rule, **inline styles** are the most specific and will override internal and external styles. This is why they should be used sparingly.




<p style="color: red;">This text is red.</p>

This text is red.

2. Best Practices for Organization

For any project larger than a single page, external stylesheets are essential. They allow you to reuse styles across multiple pages, improve page load times through browser caching, and enforce a clean separation between your HTML (content) and CSS (presentation).


<head>
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/theme.css">
  <link rel="stylesheet" href="css/components.css">
</head>

Practical Takeaway: Start every project with an external stylesheet. Use internal styles only for page-specific exceptions and inline styles only for dynamic changes via JavaScript or for rapid prototyping.