Include CSS in HTML

CSS (Cascading Style Sheets) is used to style and design HTML elements. There are three main ways to include CSS in an HTML document: inline, internal, and external. Each method serves a specific purpose, and the choice depends on the project requirements.

Below, we will explore all three methods with detailed examples.

1. Inline CSS

Inline CSS is applied directly to an HTML element using the style attribute. This method is useful for applying specific styles to individual elements but is not recommended for larger projects as it can make the code less maintainable.

Example of Inline CSS:

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2 style="color: blue; text-align: center;">Inline CSS Example</h2>
        <p style="font-size: 18px; color: green;">This paragraph is styled using inline CSS.</p>
        <button style="background-color: red; color: white; padding: 10px;">Click Me</button>
    </body>
</html>

Explanation: Each element has its own style attribute where CSS rules are defined. For example, the <h2> is styled with a blue color and centered alignment.

2. Internal CSS

Internal CSS is defined within a <style> tag inside the <head> section of an HTML document. This method is suitable for applying styles to a single webpage and keeps the styles separate from the content.

Example of Internal CSS:

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: Arial, sans-serif;
            }
            h2 {
                color: blue;
                text-align: center;
            }
            p {
                font-size: 18px;
                color: green;
            }
            button {
                background-color: red;
                color: white;
                padding: 10px;
                border: none;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <h2>Internal CSS Example</h2>
        <p>This paragraph is styled using internal CSS.</p>
        <button>Click Me</button>
    </body>
</html>

Explanation: The <style> tag contains all CSS rules for the page. For instance, the button is styled with a red background, white text, and no border, making it visually distinct.

3. External CSS

External CSS is defined in a separate file with a .css extension. The external stylesheet is linked to the HTML document using the <link> tag inside the <head> section. This method is ideal for larger projects as it allows you to reuse the same styles across multiple webpages.

Example of External CSS:

style.css

</>
Copy
body {
    font-family: Arial, sans-serif;
}

h2 {
    color: blue;
    text-align: center;
}

p {
    font-size: 18px;
    color: green;
}

button {
    background-color: red;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h2>External CSS Example</h2>
        <p>This paragraph is styled using external CSS.</p>
        <button>Click Me</button>
    </body>
</html>

Explanation: The <link> tag connects the external CSS file to the HTML document. All styles are defined in the style.css file and applied consistently across multiple webpages.

Summary

  • Inline CSS: Quick and simple for small, specific styles but not scalable.
  • Internal CSS: Useful for single-page styling, keeping HTML and CSS separate within the same document.
  • External CSS: Best for larger projects, enabling reuse of styles across multiple pages.

Choose the appropriate method based on the scope and complexity of your project to ensure maintainable and efficient styling.