How to add css in HTML

There are mainly three ways to insert CSS in HTML documents.

  1. External CSS: In this method, you create a separate CSS file with all the styles you want to apply to your HTML page, and link to it from your HTML document using the <link> element. Here's an example:
    2. <!DOCTYPE html>
    <html>
      <head>
        <title>My Website</title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <!-- HTML content goes here -->
      </body>
    </html>

    In this example, the href attribute of the element points to a CSS file called "styles.css" in the same directory as the HTML file.



  2. Internal CSS In this method, you include your CSS styles directly in the <head> section of your HTML document using the <style> element. Here's an example:
    3. <!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <style>
      /* CSS styles go here */
    </style>
  </head>
  <body>
    <!-- HTML content goes here -->
  </body>
</html>

    In this example, the CSS styles are included between the opening and closing <style> tags.



  3. Inline CSS: In this method, you include your CSS styles directly in the HTML element using the style attribute. Here's an example:
    4. <!DOCTYPE html>
    <html>
      <head>
        <title>My Website</title>
      </head>
      <body>
        <h1 style="color: red;">Hello, world!</h1>
      </body>
    </html>

    In this example, the style attribute is used to set the color of the <h1> element to red.

    Each of these methods has its own advantages and disadvantages, but external CSS is generally considered the best practice for larger projects as it keeps the HTML and CSS separate, making it easier to maintain and update your code.

    Next Article ❯