1

I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external style sheet, I'm using .c-headline-1 and in an internal style sheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.

I thought internal style sheets had higher specificity than external style sheets or no?

Inigo
  • 12,186
  • 5
  • 41
  • 70
bhood
  • 355
  • 2
  • 8
  • 18

3 Answers3

4

External and internal style sheets (in the head section) are assigned the same level of priority (inferior to the inline style priority though), the highest priority then is given according to their declaration order

The last one declared gets the highest priority

Ultimately the order is the following

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section) --> The last one defined (internal or external) has the highest priority
  3. Browser default

To learn more you can check the Cascading Order section of this page https://www.w3schools.com/css/css_howto.asp

Lorenzo
  • 41
  • 1
  • 3
1

All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.

cloned
  • 6,346
  • 4
  • 26
  • 38
  • Thanks @cloned here's MDN reference confirming your answer: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style – bhood Aug 29 '18 at 12:15
0

Are you sure that the order is important? Isn't it first a priority order where number one is the most significant and its styling will be applied first.

  1. Inline styling
  2. Internal stylesheets (style withing head element)
  3. External stylesheets (link href="style.css" etc.)

Please correct me if I'm wrong.

Timpaninho
  • 1
  • 3
  • You're wrong. Internal and external stylesheets have equal priority. Thanks to MDN among others, the notion that they had different priorities became a widely held misunderstanding. – Alohci Aug 29 '18 at 11:39
  • @Alohci is correct: internal and external stylesheets have equal priority. Here's the MDN reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style – bhood Aug 29 '18 at 12:13