1

<div id='one' class="one">1</div>

So the div above has a class and ID. I have added inline styling in the header section:

<style>#one {color: red;}</style>

In the style.css file I have the following code:

#one.one {color: blue;}

The colour of the text in the div is showing up as blue. Why is that? I was under the impression that inline styling has the highest specificity.

soulsako20
  • 231
  • 3
  • 10

3 Answers3

1

An inline style is style inlining in the html like this :

#one.one {color: blue;}
<div id='one' class="one" style="color:red">1</div>

If you add the style in the style tag, it is considered like in css file, so it's the last found which is applied

Sébastien Bousquet
  • 642
  • 6
  • 15
0

Inline styling means putting the style inside the element tag. Try this.

<div id='one' class="one" style="color: red">1</div>
ignignokt
  • 1
  • 1
0

CSS stands for Cascading Style Sheet. That means it "Cascades" or is designed to be overwritten be the last thing to write to it.

If you had red as the last color in your script, it would be red instead.