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.
1 2 3 4 5 6 7 8 9 | <style> body { background-color: BurlyWood; } h1 { color: white; } </style> |
Embedded CSS Example
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
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
1 |
The CSS code file is saved under the .css extension.
1 |
External CSS Example in HTML
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.
1 2 3 | <style type="text/css"> @import url("http://ebhor.com/examples/external.css"); </style> |
Imported CSS Example
1 | The @import url("http://ebhor.com/examples/external.css"); is uded to import the css file. |