How to include CSS in HTML

There are several ways to include CSS in your HTML file, depending on how you want to organize and apply styles to your web page. Here are the three main methods:

1. Inline CSS

You can apply CSS directly to an HTML element using the style attribute. This method is useful for applying styles to individual elements, but it's not ideal for large projects.
Example:

<h1 style="color: Red">CSS ( Cascading Style Sheet )</h1>
    <p style="color: brown">
      CSS (Cascading Style Sheets) is a stylesheet language used for describing
      the presentation of a document written in HTML or XML.
    </p>
    <button style="color: yellow; background: black">HELP</button>

2. Internal (Embedded) CSS

This method involves placing CSS directly inside the <style> tag in the <head> section of your HTML file. It is useful for single-page websites or when you want to keep the styles contained within the HTML file.
Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1 {
        color: magenta;
      }

      p {
        color: rgb(6, 50, 35);
      }

      button {
        color: gold;
        background: black;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h1>CSS (Cascading Style Sheets)</h1>
    <p>
      CSS (Cascading Style Sheets) is a stylesheet language used for describing
      the presentation of a document written in HTML or XML.
    </p>
    <button>HELP !</button>
  </body>
</html>

3. External CSS

This method involves linking an external CSS file to your HTML document. This is the most common method for larger projects, as it allows you to maintain styles separately and reuse them across multiple web pages.
Example:

<head>
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>

Conclusion

Inline CSS is for individual elements.
Internal CSS is for small pages where you want to define styles within the HTML file.
External CSS is best for larger projects and allows reuse across multiple HTML pages.