CSS hierarchy (embedded vs external)

Question

I am new to CSS and I have just read the topic regarding the hierarchy of the various types of applying a style. More specifically I read that the embedded method overrides the external always but when I run some tests this wasn't always the case.

The declaration of an embedded style and an external is done in the head element of the web page and what I found was that the embedded style overrides the external only if is written after the external.

for example let's say that we have the following code snippet

  <head>
<title>Testing CSS Hierarchy</title>

<style type="text/css">p {color:#fff;}</style>

<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>

</head>

in the above example the external rule overrides the embedded!!!!

Did I understand something wrong or this is normal?

Thnak you in advance.

You haven't provide enough of an example. The hierarchy is usually, external --> head -- > inline. — Paulie_D
– Paulie_D, Commented May 20, 2014 at 16:06
This is what I read that the hierarchy is usually external (which is declared in the head element) head (embedded or internal) and inline. However if you have external and embedded in "head" the effective style is the last. — Periklisk
– Periklisk, Commented May 21, 2014 at 7:40

mobabur94 · Accepted Answer · 2014-05-20 16:13:48Z

1

Try it with the embedded styles after the link to the external file:

<head>
    <link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
    <style type="text/css">p {color:#fff;}</style>
</head>

The css that comes after overrides the css that comes before.

answered May 20, 2014 at 16:13

mobabur94

3702 silver badges10 bronze badges

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

1 Comment

Periklisk Over a year ago

thanks for your answer I assumed this was the case but I wanted to be sure!!

Luís P. A. · Accepted Answer · 2014-05-20 16:16:21Z

1

The rule is simple in this case the last is the one that is used. Try doing the reverse:

<head>
   <title>Testing CSS Hierarchy</title>
   <link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
   <style type="text/css">p {color:#fff;}</style>
</head>

answered May 20, 2014 at 16:16

Luís P. A.

9,7392 gold badges26 silver badges37 bronze badges

1 Comment

Periklisk Over a year ago

In reverse it works, it applies the embedded! Thanks it was not clear in the book!

Collectives™ on Stack Overflow

CSS hierarchy (embedded vs external)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related