Posted in All Posts, Semester 2

Types of CSS

One of the attractions of CSS is that it can be implemented in three different ways – Inline, Internal or Embedded, and External or Linked, which make it a very flexible HTML supplement.

Inline CSS

An inline style rule is coded directly into an HTML tag within the flow of your source code, just as an HTML attribute is used. The purpose of inline styles is to allow you to override an embedded or linked style rule.

Inline CSS Example

Try It Yourself

Internal CSS

Internal or Embedded styles are set in the HEAD section of your web page. Similar to an inline style rule, embedded styles allow you to override the rules of an external style sheet. The difference is that with an embedded rule, you don’t have to create a rule with each use of an HTML element. An H1 heading given the color red in an embedded style rule will render the H1 heading in red every time you use it on the page without having to code the rule into each heading tag as you must do with inline rules or with HTML attributes.

Internal CSS Example

Try It Yourself

External CSS

External styles (sometimes called linked styles or remote styles) are the least important in the cascading order, but the most powerful! An external style is simply a link placed in the HEAD section of your web page to a separate file containing your style rules. The primary advantage of using external styles is that you can change that one external file, and have that change reflected on every page of your site that links to the external CSS file. Any or all methods of implementing CSS can be used on the same page.

External CSS Example

Try It Yourself

We hope that you found this article to be helpful.
Please share your thoughts in the Comments Section.

If you liked this article, then please like our Facebook page.

Suggested Reading

Comment your thoughts