How to Use CSS in HTML Document?

CSS is a critical technology for designing and styling web pages. Integrating CSS with HTML allows you to control the visual presentation of your web content. There are several ways to include CSS in your HTML documents, each suited to different needs and scenarios. This article provides a detailed overview of how to use CSS in HTML, including examples for each method.

Inline CSS

Inline CSS is used to apply styles directly within an HTML element using the style attribute. This method is useful for quick, specific styling but is generally not recommended for larger projects due to its lack of scalability and maintainability.

Example:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Inline CSS Example</title>
</head>

<body>
    <p style="color: red; font-size: 20px;">
        This is a paragraph.
    </p>
</body>

</html>

In this example, the style attribute applies inline CSS to the <p> element, setting its text color to red and font size to 20 pixels.

Internal CSS

Internal CSS involves placing CSS rules within a <style> tag in the <head> section of your HTML document. This method is suitable for styling a single HTML document and is more manageable than inline styles for medium-sized projects.

Example:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Internal CSS Example</title>
    
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: navy;
            text-align: center;
        }

        p {
            color: darkgreen;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph styled with internal CSS.</p>
</body>

</html>

Here, the <style> tag contains CSS rules that style the body, heading, and paragraph elements. The styles apply only to this specific HTML document.

External CSS

External CSS involves creating a separate CSS file and linking it to your HTML document using the <link> tag. This method is ideal for large projects or when you want to apply the same styles across multiple HTML documents. It helps keep your HTML clean and your styles centralized.

Example:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph styled with external CSS.</p>
</body>

</html>

CSS Files (styles.css)

html

body {
    background-color: lightgray;
}

h1 {
    color: darkblue;
    text-align: center;
}

p {
    color: darkred;
    font-size: 16px;
}

In this example, the <link> tag in the <head> section references the external CSS file styles.css. The styles defined in this file apply to the HTML document, ensuring consistency and easy maintenance.

CSS in <style> Tag vs. <link> Tag

Internal CSS (<style> tag): Suitable for small projects or when styles are unique to a single document. It is less efficient for larger projects because styles are not reusable across multiple pages.
External CSS (<link> tag): Preferred for larger projects or when applying the same styles to multiple documents. It promotes code reuse and simplifies maintenance, as changes to the CSS file reflect across all linked HTML documents.

Related Articles