CSS - How to add CSS in HTML

    The CSS file cannot work alone it needs to be embedded in the HTML file. The browser parses the file from top to bottom and in the same order execute the code. There are three methods present in CSS that can be used to embed a CSS code for an HTML document.

    • External CSS
    • Internal CSS
    • Inline CSS

    All these methods of adding CSS code can be used for the same purpose, but they all come with unique advantages.

    External CSS

    In External CSS we create a separate file with .css extension, write CSS code in that file and add that file in our HTML document using HTML <link> element. External CSS used when we want the same CSS styling for various HTML documents. In professional development, External CSS is used more as compared to internal and Inline CSS. It increases the code reusability and makes debugging easy.

    Example my_style.css 

    body {
  background-color: black;
}

h1 {
  color: orange ;
  margin-left: 20px;
}

    my_html.html 

    <!DOCTYPE html>
<html>
<head>
<link type="text/css" href="my_style.css">
</head>
<body>
<h1>TechGeekBuzz</h1>
<p>Paragraph.</p>
</body>
</html>

    The href attribute of <link> element specifies the CSS file name with extension.

    Internal CSS

    In Internal CSS we define the CSS code inside the HTML <style> element. Here the style will only be applied to the HTML document where it is defined. Internal CSS is used when we want a specific styling for a single HTML document and does not wish to other documents to have similar styling.

    Example 

    <!DOCTYPE html>

<html>

<head>

<style>
 body {
  background-color: black;  
  }

  h1 {
  color: orange ;
  margin-left: 20px;
}
</style>
</head>
<body>
<h1>TechGeekBuzz</h1>
<p>Paragraph.</p>
</body>
</html>

    Inline CSS

    In inline CSS, we use the style attribute to define the styling for a single tag. We use inline CSS when we want to a style a specific HTML element of the document.

    Example 

    <!DOCTYPE html>
<html>
<body>

<h1 style="color:orange; background-color: black;"> Heading </h1>

</body>
</html>

    CSS precedence

    If we have more than one style specified to an HTML element, then the CSS with hight precedence will be applied on the element. The precedence as follow:

    • Inline CSS
    • External and Internal CSS (where it is specified in the document).
    • Browser default styling.

    Inline CSS has the hight precedence, and it can override the external as well as the internal CSS styling.

    Summary

    • CSS code can not be executed alone it needs to be added in an HTML document.
    • There are three ways to add a CSS in the HTML document.
    • In External CSS we create a CSS file with .css extension and add it in our HTML file using <link> element.
    • In internal CSS we define the CSS code inside the <style> element.
    • In inline CSS, we define the CSS code with the help of style attribute.
    • Inline CSS has the highest priority, and it can override the external and internal styling.
    Previous Tutorial Next Tutorial