Three ways to add CSS to an HTML document

There are three main ways to add CSS to an HTML file, each with its own use cases depending on the project needs and scope:

1. Inline CSS

CSS is applied directly to HTML elements using the style attribute.

Example:

<p style="color: blue; font-size: 18px;">This is a blue paragraph.</p>

Use Case: Best for quick, small changes to a specific element. However, it's not ideal for larger projects since it can become difficult to maintain and violates the separation of content and style.

2. Internal (Embedded) CSS

CSS is written within a <style> tag inside the <head> section of the HTML file.

Example:

<html>
  <head>
    <style>
      p {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>This is a red paragraph.</p>
  </body>
</html>

Use Case: Useful for single-page applications or when you need to apply CSS that is specific to a single HTML file. It keeps the styles and structure in one place but can be less efficient for larger projects.

3. External CSS

CSS is placed in a separate .css file and linked to the HTML document using the <link> tag in the <head> section.

Example:

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This is a paragraph styled with external CSS.</p>
  </body>
</html>

/* styles.css */
p {
  color: green;
  font-size: 22px;
}

Use Case: The best method for large projects with multiple pages. It promotes code reusability and keeps the HTML and CSS separate, making the project easier to manage.

Each method has its advantages, but for scalability and maintainability, external CSS is typically the preferred choice, especially in larger web development projects.

kingluddite/three-ways-to-add-css.md

1. Inline CSS

2. Internal (Embedded) CSS

3. External CSS