Types of CSS

Types of CSS

By how we declare the style, CSS can be divided into three types, the syntax will be same in all three, but how the CSS is added to the webpage will be different.

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

Inline CSS are mostly used when an single elements style has to be changed.

Inline CSS are written directly within a tag using style attribute.

The problem with inline CSS is maintaining webpages can be difficult, since if the styles has to changed we have to go through each element to find the CSS and change it.

Example

Try Yourself

Internal CSS

Internal CSS is used when we have to set the styles for an single page.

Internal CSS are usually added within the head element or anywhere in the web page using <style> tag.

In a web page there may be same or different number of elements, so if we have to set the same styles for all of the specific element instead of changing each elements properties we can use internal CSS.

The problem in Internal CSS is that, even if a same style is used in all web pages we have to add the styles for each web page separately.

Example

Try Yourself

External CSS

External CSS are used when we have to set the styles for the whole website where some elements style properties has to be same.

External CSS are created as an external file, but it has to be saved with the extension .css.

To import the style sheet to the web page link tag is used.

External CSS are widely used today, because it gives users an easy way to maintain the website.

Example

Try Yourself