Types of CSS and Usages – Inline, Embedded and External

In this article I will explain about CSS, types of CSS and which one is appropriate to use.

CSS stands for Cascading Style Sheets. The main task of CSS is to describe how to display the HTML elements on the screen respecting the screen types.

Technically CSS is a language that defines the style of HTML elements in a defined manner.

Let’s discuss about the types of CSS.

There are three possible ways to write CSS for a HTML document. Those are Inline, Embedded and External CSS.

Inline CSS
The CSS we apply to a single element in the HTML document we call inline CSS. Inline CSS is applied in the style attribute of the element. This is useful when we have a single element with unique style.

Embedded CSS
The CSS we put in between style tags in a HTML document we call embedded CSS. This is useful when we have a single page with unique style.


<style>
body {
}
</style>

External CSS
The CSS is defined in a .css file and included using link tag in the HTML document we call external CSS. This is most commonly used CSS. The main advantage is that the CSS can be defined in an external file and can be included in multiple HTML documents.


<link rel="stylesheet" type="text/css" href="pathtocss.css" />

The appropriate position of link tag is inside the head tag. That means the style of the HTML document is loaded before the body is loaded.
The .css extension defines the file type as a CSS file. That can be edited in any text editor.

Hope this helps.

Share this Post