Home / CSS

Different Ways to Include CSS in HTML Documents

CSS, or Cascading Style Sheets, is a powerful tool used to control the presentation and layout of a web page. It allows web developers to separate the visual appearance of a website from its structure and content. In this article, we will explore the different ways to include CSS in HTML documents.

Inline CSS

Inline CSS is the simplest way to apply styles to a specific HTML element. It involves using the style attribute within the opening tag of an HTML element. Here's an example:

<p style="color: blue; font-size: 16px;">This is some text.</p>

Inline styles affect only the specific element they are applied to and override any external CSS styles. However, it is not recommended to use inline CSS extensively as it can become cumbersome to maintain and update.

Internal CSS

Internal CSS, also known as embedded CSS, allows you to define styles within the <style> tags in the <head> section of an HTML document. This method is useful when you want to apply styles to multiple elements within the same HTML page. Here's an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }

        .myClass {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is some text.</p>
    <p class="myClass">This paragraph has a yellow background.</p>
</body>
</html>

Internal CSS styles are specific to the HTML document in which they are defined and have higher precedence than external CSS styles.

External CSS

External CSS allows you to create a separate CSS file and link it to your HTML document. This method is most commonly used as it promotes reusability and maintainability. Here's how you can accomplish it:

Create a separate CSS file with a .css extension (e.g., styles.css) and define your styles within it.
In your HTML document, add the following <link> tag within the <head> section:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>This is some text.</p>
</body>
</html>

By linking an external CSS file, you can use the defined styles across multiple HTML documents, making it easy to maintain a consistent look and feel across your website.

Importing CSS

Apart from linking external CSS files directly, you can also import CSS files within other CSS files using the @import rule. This method is useful when you want to keep your styles organized and modular. Here's an example:

/* main.css */
@import url("reset.css"); /* Import another CSS file */

body {
    background-color: #f1f1f1;
}

Note that the @import rule should be placed at the beginning of the CSS file.

In conclusion, CSS provides different approaches to style your HTML documents. Choose the method that suits your requirements and coding practices. Utilizing external CSS offers flexibility, reusability, and enhances the maintainability of your codebase.

Remember to experiment and have fun styling your web pages!