We ended the last post by telling the browser to turn they background of every other <li> tag to yellow.
So why is our link to the Commodore website still blue?
To find out why this happened we need to understand two things. The first is inheritance and the second is specificity.
When we nest tags by placing them between the opening and closing tags, we say that they are children of the tag they are nested in.
In the above example, tag2 is a child, or descendant, of tag1. You can look at it this way, too.
When we style a parent tag, the child tag inherits that style from the parent. Let’s make a quick HTML file with two paragraphs and two unordered lists and put a link to a stylesheet in the in <head> section.
Now, let’s style the <ul> tags to be red.
The <li> tags are not styled red. They got, we say inherited, that color from their parent tag, the <ul>. What if we wanted to make everything red? We could use the * selector from the last post or we could style the body tag. Everything that is visible on a web page goes between the opening body tag<body> and the closing tag </body>, which makes everything a child of the <body> tag. Let’s turn everything blue. We’ll comment out our <ul> styling and style the <body> tag.
So what would happen if I un-comment the <ul> style? What color would the <li> tags be, red or blue? They inherit blue being a descendant of the <body> tag, and they also inherit red since they are also a descendant (child) of the <ul> tag. Let’s find out.
Looks like the red style is displayed. To understand why the <li> tags are red instead of blue you need to understand specificity.
When two or more CSS rules style an element, the browser does a calculation to determine which style “wins”. This is called specificity. Think of these calculations as the browser giving each CSS rule “points” to determine a “winner”. There are rules for how the browser give these points. A CSS rule will receive:
- 1 point for every element in the rule
- 10 points for every class in the rule
- 100 points for every id in the rule
- 1000 points for inline styles
If there is a tie, the last rule that the browser sees wins. That is why in our example the lists are red. Even though in the CSS the <ul> rule is first, the browser actually sees the <body> tag first and then the <ul> tag. The <ul> tag is after the <body> tag in the HTML. The <li> tags, the actual names in our list, are actually styled with the color blue first, being inherited from the <body> tag, AND THEN they are styled again to red, inheriting form the <ul> tag.
Let’s give our first <p> tag in our HTML a class of “classic” and make a CSS rule for that class. Then lets add a rule for all our <p> tags.
We have to paragraphs, but the first has two CSS rules styling it. The first rule has “10 points” since it is a class selector. The second rule only has “1 point” since it’s an element selector. So the first <p> tag should get styled with the color green.
Let’s add an id into the mix. Since Tom Baker was the first person that I saw play “The Doctor”, we’ll give him an id of “special”. While we’re at it, we’ll give Jodie Whittaker an id of “latest”. We’ll add a couple more CSS rules to styles these id’s.
The <li> tags with id’s get their initial style from inheriting it from the <body> tag that has a “score” of “1” . Then they inherit the style from the <ul> tag, another “score” of 1. They are also targeted by our id selectors which have a “score” of 100. No contest, the id selectors “win”.
So Why Is Our Link Still Blue?
Let’s take a closer look at the CSS file and what is shown in the browser.
Notice the yellow highlight going across the page in every other list item? The <li> tag is a block element. What is happening is that the <li> tag that contains the link actually IS getting styled with the yellow background. The reason our link is still blue is because we are styling that particular anchor tag with a blue background.
In the next post we’ll look at fonts in CSS.