Types of CSS: Inline, Internal, External and Cascade Priority

CSS can be added to a page in three common author-controlled ways: inline styles, an internal stylesheet, or an external stylesheet. These describe where the CSS is written; they do not by themselves fully determine which declaration wins.

1. Inline CSS Top ↑

An inline declaration is written in an element's style attribute.

<h4 style="background-color: #f1f1f1;">This is an H4 heading</h4>

Inline styles are valid and have strong precedence among normal author declarations, but repeating them across many elements makes maintenance difficult.

2. Internal CSS Top ↑

An internal stylesheet is written inside a <style> element, normally in the document <head>.

<style>
p {
  font-family: Verdana, Arial, sans-serif;
  background-color: #fff3cd;
}
</style>

Existing internal-style demo

3. External CSS Top ↑

An external stylesheet keeps reusable rules in a separate .css file and links it from the document head.

<link rel="stylesheet" href="images/style.css">

This is normally the best starting point for styles shared by multiple pages because browsers can reuse the same stylesheet and developers can maintain the rules in one place.

Which CSS rule has priority? Top ↑

The old rule “inline, then internal, then external” is incomplete. A browser resolves competing declarations through the cascade. Important factors include:

Origin and importance, including user-agent, user and author rules and !important.
Cascade layers when @layer is used.
Specificity of competing selectors within the relevant origin/layer.
Scoping proximity where CSS scoping applies.
Source order when the earlier factors are equal.

Important: internal and external stylesheets participate in the same author cascade. If two otherwise equal rules have the same specificity, the rule that comes later can win whether it came from a <style> block or linked stylesheet.

Simple specificity example Top ↑

p { color: blue; }
.notice { color: green; }
#warning { color: red; }

If the same paragraph matches all three selectors and the declarations are otherwise comparable in the cascade, the ID selector is the most specific.

Use !important carefully Top ↑

!important changes cascade precedence and is not simply “more specificity.” Prefer well-structured selectors and predictable stylesheet organization instead of using !important as a routine override tool.

Frequently Asked Questions Top ↑

What are the three common ways to add CSS?
Inline, internal and external CSS.

Is internal CSS always stronger than external CSS?
No. Their declarations are resolved through the normal author cascade.

Does inline CSS always win?
Normal inline author styles are very strong, but the complete cascade includes importance, origins, transitions and other rules.

What should I use for a real site?
Usually an external stylesheet for reusable rules, with internal or inline CSS only when their narrower scope is useful.

CSS CSS generator Advantages of CSS Text decoration

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

gautham.m thirumangalam	16-04-2013
i have clearly know about this

Habib Mahomed	30-03-2015
I still do not understand why there are different levels of CSS!!!

Seyed Jafar Mortazavi	18-10-2018
Hello all, As I was searching about this subject to write an article and I saw this article in my research, I would like to share my earned knowledge with you all. Hope it be useful for you. As the article is a bit long I sent it two or three posts. * CSS types * 1. There are three types to inserting CSS which are called inline CSS, internal CSS and external CSS. 2. An inline CSS inserts inside HTML element's start tag. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. An inline style may be used to apply a unique style for a single element. 3. An internal CSS may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page. 4. An external CSS can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. External stylesheets are stored in CSS files. 5. Use the HTML style attribute for inline styling. Use the HTML <style> element to define internal CSS. Use the HTML <link> element to refer to an external CSS file. Use the HTML <head> element to store <style> and <link> elements. * other ways to style HTML element * 1. Except, three mentioned types of styling, there are three other ways which are called HTML presentational attributes style, user define style and browser default style. 2. The HTML presentational attributes style is to style HTML tag with built-in element attributes. HTML presentational attributes comes in start tag exactly after tag's name. 3. The user define style which is at client side. 4. The browser define style which also at the client side.

Seyed Jafar Mortazavi	18-10-2018
second part (final part): * different styling priorities (HTML presentational attributes vs CSS properties) * 1. According to the types and ways of styling mentioned above, there are a priority level defined, and based on this priority the styling property gets included. styling priorities order is as follows: a. User defined style. b. Inline style sheet. c. Internal style sheet or External style sheet. d. HTML presentational attributes. e. Browser default style. 2. There is a point in styling priority, which is waterfall attribute. It means if we define more than one style for any element, the lowest(undermost) defined style will override all it's previous styles properties. 3. there is other point in styling priority, which is "!important" keyword. If we use "!important" keyword the style with the keyword, will prior to other styles. 4. Waterfall attribute is executive when using "!important" keyword as well.

	04-02-2021
The first priority is Inline CSS, The second One is Internal CSS, And The Third priority is External CSS.

Nae	04-07-2012
Prioroties..?

Santosh Rathod	05-03-2013
good explanation about priority...

Types of CSS and How the Cascade Chooses a Style