The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Inline, Internal, and External CSS

Next ►
►

In this section, we will explore the three primary methods of applying CSS (Cascading Style Sheets) to HTML documents: inline, internal, and external. Each method has its own use cases, advantages, and disadvantages. Understanding these methods will help you decide the best approach for styling your HTML documents.

  1. Inline CSS

What is Inline CSS?

Inline CSS involves applying styles directly to HTML elements using the style attribute. This method is useful for applying unique styles to individual elements.

Syntax

<tagname style="property: value;">

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hello, World!</h1>
    <p style="font-size: 20px; color: green;">This is a paragraph with inline CSS.</p>
</body>
</html>

Advantages

  • Quick and easy to apply.
  • Useful for small changes or testing styles.

Disadvantages

  • Not reusable.
  • Can make HTML code cluttered and harder to maintain.
  • Less efficient for larger projects.

  1. Internal CSS

What is Internal CSS?

Internal CSS involves embedding CSS rules within the <style> tag inside the <head> section of an HTML document. This method is suitable for styling a single HTML document.

Syntax

<head>
    <style>
        selector {
            property: value;
        }
    </style>
</head>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with internal CSS.</p>
</body>
</html>

Advantages

  • Styles are kept within the HTML document, making it easier to manage for small projects.
  • No need for external files.

Disadvantages

  • Not reusable across multiple HTML documents.
  • Can make the HTML file larger and harder to manage for larger projects.

  1. External CSS

What is External CSS?

External CSS involves linking an external .css file to an HTML document using the <link> tag. This method is ideal for applying consistent styles across multiple HTML documents.

Syntax

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

Example

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with external CSS.</p>
</body>
</html>

CSS File (styles.css)

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

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

Advantages

  • Styles are reusable across multiple HTML documents.
  • Keeps HTML files clean and easier to manage.
  • Efficient for larger projects.

Disadvantages

  • Requires an additional HTTP request to load the CSS file.
  • Not ideal for small projects or single-page applications.

Practical Exercise

Task

Create a simple HTML document and apply styles using all three methods: inline, internal, and external CSS.

Instructions

  1. Create an HTML file named exercise.html.
  2. Apply the following styles:
    • Inline CSS: Set the color of a heading to red.
    • Internal CSS: Set the font size of a paragraph to 18px.
    • External CSS: Set the background color of the body to lightgray.

Solution

HTML File (exercise.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Exercise</title>
    <link rel="stylesheet" href="exercise.css">
    <style>
        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1 style="color: red;">This is a heading with inline CSS</h1>
    <p>This is a paragraph with internal CSS.</p>
</body>
</html>

CSS File (exercise.css)

body {
    background-color: lightgray;
}

Summary

In this section, we covered the three primary methods of applying CSS to HTML documents: inline, internal, and external CSS. Each method has its own advantages and disadvantages, and the choice of method depends on the specific requirements of your project. Inline CSS is quick and easy for small changes, internal CSS is suitable for single documents, and external CSS is ideal for larger projects with multiple HTML documents.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved