CSS Inline, Internal, External

CSS (Cascading Style Sheets) can be added to HTML in three main ways: inline CSS, internal CSS, and external CSS. Each method allows you to style HTML elements, change colors, adjust spacing, and improve the appearance of a webpage.

In this tutorial, you will learn how to add CSS to HTML with examples and understand when to use each method.

Three Ways to Add CSS to HTML

There are three common methods for adding CSS to an HTML document:

• Inline CSS: Adds styles directly to an HTML element.
• Internal CSS: Adds CSS inside a <style> element in the HTML document.
• External CSS: Stores CSS in a separate .css file and connects it to HTML.

You can learn more about the basics in our What Is CSS? tutorial.

Adding Inline CSS to HTML

Inline CSS uses the style attribute inside an HTML element. It applies styles directly to that specific element.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue;">Welcome to Web4Learners</h1>
    <p style="font-size: 18px;">Learn web development step by step.</p>
</body>
</html>

In this example, the heading appears blue, and the paragraph uses an 18-pixel font size.

Read our complete guide to Inline CSS to learn more.

Adding Internal CSS to HTML

Internal CSS is written inside a <style> element in the HTML document’s <head> section. It is useful when styling a single webpage.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>

    <style>
        body {
            background-color: #f0f4ff;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: darkblue;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Welcome to Web4Learners</h1>
    <p>This page uses internal CSS.</p>
</body>
</html>

The CSS rules apply to matching elements throughout this HTML document. Learn more in our Internal CSS tutorial.

Adding External CSS to HTML

External CSS keeps styling in a separate file. This approach makes it easier to maintain consistent styles across multiple webpages.

Create two files in the same folder.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to Web4Learners</h1>
    <p>This page uses an external stylesheet.</p>
</body>
</html>

style.css

body {
    background-color: #f0f4ff;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
}

p {
    font-size: 18px;
    color: #333;
}

The <link> element connects the HTML document to the external stylesheet. The rel="stylesheet" attribute identifies the linked file as a stylesheet, while href="style.css" specifies its location.

For more details, read our External CSS tutorial.

Comparing the Three CSS Methods

Method	Where CSS Is Written	Common Use
Inline CSS	Inside an HTML element	Styling an individual element
Internal CSS	Inside a <style> element	Styling one webpage
External CSS	In a separate .css file	Styling multiple webpages

External CSS is often the most convenient choice for larger websites because one stylesheet can be shared across many HTML pages.

Can You Use All Three CSS Methods Together?

Yes. A webpage can contain inline, internal, and external CSS at the same time. However, if multiple rules target the same element and property, the browser determines which rule applies according to the CSS cascade, specificity, and other priority rules.

For example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p style="color: red;">This paragraph is red.</p>
</body>
</html>

The paragraph appears red because the inline declaration takes precedence over the normal internal rule in this example. CSS priority can become more complex when specificity, !important, and cascade layers are involved. Learn more in our CSS Cascade tutorial.

Frequently Asked Questions

What is the easiest way to add CSS to HTML?

Inline CSS is quick for styling one element, while internal CSS is convenient for a single page. External CSS is generally more suitable for websites with multiple pages.

Which HTML element connects an external CSS file?

The <link> element connects an external stylesheet to an HTML document. It is usually placed inside the <head> element.

Can I add CSS without creating a separate file?

Yes. You can use inline CSS or write internal CSS inside a <style> element in your HTML document.

Does CSS change the HTML structure?

CSS primarily controls presentation, such as colors, fonts, spacing, and layout. HTML defines the document’s structure and content.

Can one CSS file style multiple HTML pages?

Yes. Multiple HTML documents can link to the same external CSS file, allowing them to share a consistent design.