CSS Question
Lanna (32)

Hi, does anyone here know how to merge external, internal and inline style sheets in one HTML webpage? If we merge the files, then what type of stylesheet is supposed to be of highest priority?

You are viewing a single comment. View All
heyitsmarcus (280)

CSS can be a little bit complicated in its rules about what is applied at what point. All of what I'm going to talk about it doesn't even involve the !important keyword which introduces a kink into the hierarchy (but you don't see !important all that often so I'll save it for last).

You've probably learned this already, but style sheets have different priorities depending on where they're created:

  • Inline styles have the most priority and will always be applied over other styles i.e. here's a paragraph with a green text color, inline styled:
<p style="color:green;">Hi, I'm green!</p>
  • Internal styles (those within a <style></style> tag) have the next priority and will be applied if there are no inline styles.
  • External style sheets have the least priority and will only be applied if there are no inline or internal styles.

Now, with that being said, there is another level to how styles are applied within both <style></style> elements and external style sheets which is Cascading and Specificity.

This can get a bit confusing, but once you wrap your head around it, it's a piece of 🍰!

The uppermost priority that selectors (i.e. #myParagraph) have in CSS is Specificity. Basically, the more specific a selector is, the higher priority it will have, regardless of where it is. So, let's look at this:

/* A paragraph with a class of green-p */
.green-p {
color: green;
/* A paragraph with an id of myParagraph */
#myParagraph {
color: blue;
/* general paragraph selector */
p {
color: red;

In the above example, #myParagraph is the most specific since it is referencing an id which is unique to every element on the page. The next most specific selector is .green-p which references a class and provides a grouping for elements. The least specific selector is the p selector since it is just specifying any paragraph element. So, with that:

<p id="myParagraph" class="green-p">What color am I?</p>

The color above will actually be blue because it has an id of myParagraph and even though the p came lower in the document (which is the Cascading part of Cascading Style Sheets), the id is more specific.

So, the next priority is just Cascading and that means that the same specificity of selectors will be given priority based on when they are written in the style sheet. Basically, the lower a selector is in the style sheet, the more priority it will have (if its no more specific than any other selector).

This may seem confusing at first, but you should play around with some selectors and see what you can do!

I hope that helps!

heyitsmarcus (280)

And an aside about !important is that !important when put on a property like this:

color: green !important;

Means that the property overrides any other color property set (unless you use !important on another selector, in which case it uses the above mentioned priority rules).

Again, this is a lot to take in, but don't let it overwhelm you. It comes with some practice, and you'll be handling CSS like a champ in no time!

Lanna (32)

@heyitsmarcus Yeah, I do actually don't understand some parts, but I'll just khanacademy my way out of it. Thanks a lot btw!!

heyitsmarcus (280)

@Lanna you're very welcome! If you have any more questions, don't hesitate to ask and I'll do my best to explain. Specific problems are the best, since we can really dive in to the why behind it. Happy Coding!