CODEWITHSUNDEEP
htmlcss
A_J
A_J

Reputation: 1013

Does embedded css always override external css?

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.

Upvotes: 17

Views: 25323

Answers (4)

kelunik
kelunik

Reputation: 6928

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.

Upvotes: 17

PiniH
PiniH

Reputation: 1941

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.

Upvotes: 1

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17964

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

Upvotes: 2

Tim
Tim

Reputation: 2163

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):

  1. Style attributes
  2. ID
  3. Class, pseudo class, attribute
  4. Elements

Upvotes: 5

Related Questions