Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Introduction

How to Add CSS

Written by Updated

Compare inline, internal, and external CSS, then choose the method that keeps styles reusable, cacheable, and maintainable.

CSS can be added to HTML documents in different ways to style web pages. Choosing the right method depends on the project size and requirements.

There are three main ways to add CSS:

  • Inline CSS
  • Internal CSS
  • External CSS

Each method has its own use case and advantages.

Syntax

1. Inline CSS

Applied directly inside an HTML element using the style attribute. The supporting concepts are explained in CSS Syntax and CSS Element Selector.

html

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

2. Internal CSS

Defined inside the <style> tag within the <head> section.

html

<style>
    p {
        color: blue;
    }
</style>

3. External CSS

Written in a separate .css file and linked to HTML.

html

<link rel="stylesheet" href="styles.css">

styles.css file

css

p {
    color: green;
}

Attributes

MethodDescriptionUsage Level
Inline CSSApplied directly to individual elementsSmall changes
Internal CSSDefined within the same HTML fileSingle page design
External CSSStored in separate file and reusedLarge projects

Choose a maintainable source

External stylesheets are usually the best default because multiple pages can share and cache them. Internal styles are useful for isolated documents or critical page-specific rules. Inline styles have the narrowest reuse and interact with the cascade at high priority, so reserve them for values genuinely supplied by the element or application rather than routine component styling.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>How to Add CSS</title>

    <!-- Internal CSS -->
    <style>
        h1 {
            color: blue;
        }
    </style>

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

</head>
<body>

    <!-- Inline CSS -->
    <p style="color: red;">This is inline CSS</p>

    <h1>This is internal CSS</h1>

    <p>This is external CSS</p>

</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
CSS stylesheets11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

  • Inline CSS has the highest priority
  • Internal CSS is useful for single-page styling
  • External CSS is the best practice for large websites
  • External CSS improves performance and maintainability
  • Multiple CSS methods can be used together, but priority rules apply

Conclusion

Understanding how to add CSS is essential for controlling the appearance of web pages. While all three methods are useful, external CSS is the most recommended approach for scalable and maintainable web development.

PreviousCSS SyntaxNextCSS Comments