Your CSS code can be included with your HTML document, there are four different ways. These are namely:

Embedded CSS
Inline CSS
External CSS and
Imported CSS

To understand and make a choice about which kind of inclusion you should go with, we will now learn more about each one of these types:

Embedded CSS in hTML

As the name suggests, Embedded CSS is when you include the CSS style code by adding it within your HTML document.
The <style> element in HTML is employed for this purpose. The <style> tag has to be put within the <head></head> tag.

Whatever rules you define within this, will be applied to the respective fields in the document.
Thus, Embedded CSS is useful when you are designing a webpage with separate styling constructs but you also want the design to be reusable within the page.

    <style>
        body {
            background-color: BurlyWood;
        }
        
        h1 {
            color: white;
        }
    </style>

<style>

body {

background-color: BurlyWood;

}

h1 {

color: white;

}

</style>

Embedded CSS Example

The <style> element in HTML is used for this purpose.

1	The <style> element in HTML is used for this purpose.

Inline CSS in HTML

This is another way of adding the CSS code within the HTML document. However, Inline CSS is more element specific than Embedded.
Here, instead of a separate <style> tag, we add the CSS code to the style attribute in the different HTML elements.

Therefore, if you’re looking for styling your different webpage elements in different ways, Inline CSS is the way forward.

Inline CSS Example

The style attribute of HTML element is used for this purpose.

1	The style attribute of HTML element is used for this purpose.

External CSS in HTML

The next two inclusion techniques are about using the CSS code in a separate file rather than the HTML document itself.
This enables the programmer to use the same CSS codes on multiple web pages.

Talking about External CSS specifically, the CSS code here is included by mentioning the CSS file name in a <link> tag. For example, below is a sample code for including a CSS file styleit.css into the HTML document

The CSS code file is saved under the .css extension.

External CSS Example in HTML

All css properties are included from external css file

1	All css properties are included from external css file

Imported CSS in HTML

The basic idea is similar to the Externa CSS. Here, instead of the tag, we use @import. So the CSS file is written with the @import annotation to include it in the HTML code.

    <style type="text/css">
        @import url("http://ebhor.com/examples/external.css");
    </style>

@import url("http://ebhor.com/examples/external.css");

</style>

Imported CSS Example

The @import url("http://ebhor.com/examples/external.css"); is uded to import the css file.

1	The @import url("http://ebhor.com/examples/external.css"); is uded to import the css file.