How many ways to style an html element?

There are three (3) different ways to style an HTML element using css.

1. Inline styles.

2. Internal styles.

3. External styles.

  1. Inline styles : Inline styles are written inside the html tag using the style attribute.
    <div style='color:red;background-color:black;'>
     This is a div element.
    </div>
    
  2. Internal styles : Internal styles are written in the same HTML page between the <style></style> tag.
    <html>
     <head>
      <style>
       div{
        color:red;
        background-color:black;
       }
      </style>
     </head>
     <body>
      <div>I am a block element.</div>
     </body>
    </html>
    It's always preferred to write the <style></style> tag inside the head tag.
  3. External styles : in this way, we have to create a new file (style.css) and include it in the HTML file.
    div{
     color:red;
     background-color:black;
    }
    <html>
     <head>
      <link href="style.css" rel="stylesheet"/>
     </head>
     <body>
      <div>I am a block element.</div>
     </body>
    </html>