Does embedded css always override external css?

Question

I had studied earlier that embedded CSS always overrides external css. But I found that whichever comes last in the code, those styles prevail.

Please see the following code, considering that I have used color:green; in external CSS for h3.

<head>
<link rel=stylesheet href="style.css">
<style>
h3{
color:red;
}
</style>
</head>

Output of the above code will show me any text I write inside h3 in red color.

But if I write the above code like this:-

<head>
    <style>
h3{
color:red;
}
</style>
<link rel=stylesheet href="style.css">
</head>

In the above case, I get the color of text inside h3 as "green" (since assuming I have given "green" as font-color in external CSS ).

This is because I have written link tag after style tag.

So which means that external css is not always over-ridden by embedded css.

Or is it a rule to write the link tag always before style tag in head.

Please explain this point.

Where and how did you study that "embedded css always overrides external css"? — user663031
– user663031, Commented Jul 12, 2015 at 16:35
I'm sure what he read as "embedded" referred to inline styles via the universal style attribute - and he confused this with the style tag. — connexo
– connexo, Commented Jul 12, 2015 at 16:48
@torazaburo, I read about it here: boogiejack.com/CSS_2.html — A_J
– A_J, Commented Jul 12, 2015 at 16:58
Embedded styles override external styles. This website is wrong. I suggest you stop consulting it. There are many better tutorials and introductory materials. — user663031
– user663031, Commented Jul 12, 2015 at 17:04

kelunik · Accepted Answer · 2015-07-13 12:53:22Z

17

It doesn't matter if your stylesheet is within <style>-tags or externally and linked with <link />. The last one has always precedence, they could even be in the same external file, really just the order of the selectors and their specificities matter.

However, inline CSS using the style=".." attribute always has precedence, because it's most specific. To override that, you would have to use !important. Properties in style=".." using !important cannot be overridden.

edited Jul 13, 2015 at 12:53

answered Jul 12, 2015 at 16:27

kelunik

6,9492 gold badges44 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guffa Over a year ago

Inline CSS only gets precedence because it's more specific, not because of the order. In HTML5 you can have style tags inside the body in some cases, but placing that after the element it applies to doesn't give it precedence over inline CSS.

Tim · Accepted Answer · 2015-07-12 16:31:51Z

5

Which CSS rules are applied depends on the specificity of the CSS rule, where that rule is placed, and the presence of !important. If two contradictory rules are placed, the rule declared later will overwrite the previous rule. If two contradictory rules are declared with selectors of varying specificity, the more specific styles will win, regardless of placement. If a rule is marked as !important e.g.

h1 {
  color: green !important;
}

the !important rule will always win.

For reference the list of specificity of CSS selectors goes like this (from most specific to least):

Style attributes
ID
Class, pseudo class, attribute
Elements

answered Jul 12, 2015 at 16:31

Tim

2,1634 gold badges29 silver badges44 bronze badges

3 Comments

user663031 Over a year ago

Sure, but this question was about neither specificity nor important.

Tim Over a year ago

But it was about CSS hierarchy; which rules take precedence over the others. I was just trying to expand my answer to be a complete explanation of what factors are considered when contradictory CSS rules are declared.

A_J Over a year ago

But you didn't say anything about embedded and external css priority which was the main question

Peyman Mohamadpour · Accepted Answer · 2015-07-12 16:40:19Z

2

It does not matter if it is embedded or not. styles are applied according to Cascading order

answered Jul 12, 2015 at 16:40

Peyman Mohamadpour

18k24 gold badges94 silver badges102 bronze badges

Comments

PiniH · Accepted Answer · 2015-07-13 06:25:49Z

1

After all the rules of css, if there are 2 with the same specificity, the last one defined will take over.

For example, writing:

div { 
    background: green;
}


div {
    background: red;
}

Will turn it red regardless of the source.

edited Jul 13, 2015 at 6:25

answered Jul 12, 2015 at 16:25

PiniH

1,93914 silver badges20 bronze badges

2 Comments

steveax Over a year ago

"precedence" -> "specificity"

PiniH Over a year ago

Thanks, the word eluded me

Collectives™ on Stack Overflow

Does embedded css always override external css?

4 Answers 4

1 Comment

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related