This exercise illustrates how we can use multiple selectors to create more concise code. Are there additional tactics for creating less repetitive stylesheets?

Frequently Asked Questions CSS FAQ
1

Question

This exercise illustrates how we can use multiple selectors to create more concise code. Are there additional tactics for creating less repetitive stylesheets?

Answer

Yes there are! One common way to keep our CSS concise is via proper utilization of “inheritance”. Within CSS, the computed values of many properties get inherited from ancestor elements. We can use this fact to reduce the number of declarations we write. For example, if I want most of the text on my page to be 20px I can declare font-size: 20px on the html selector. As <html> is the root element and the font-size property is inheritable, all text for this page will be 20px. In cases where we want to deviate from this 20px norm, we can use a selector with a higher specificty to target the element whose font-size we want to override.

50 Likes
2

on the style sheet would this be written:

html {
font-size: 20px
}

or

{ font-size: 20px }

will this automatically link to the code on the html page or do we have to add it as a class, id or other selector?

8 Likes
3

Not automatically, we need a link element to import the style sheet.

It might be more appropriate to also include body in the selector list. That is where font-size will actually apply.

Be sure when writing CSS you always end each property declaration with a semi-colon.

html, body {
    font-size: 20px;
}

We can discuss this further, namely why we would not set an absolute font size on the body element.

40 Likes
4

another way is to use * symbol which applies the CSS code to each and every element in body.

like :-

  • {
    font-family: Calibri;
    }

this will change the whole document to Calibri.

29 Likes
5

I have a question about this exercise. In this exercise we used multiple selectors in order to change the font of P and h5 to georgia. Yet we already had a command to make P Arial. It’s the first rule of the css sheet: p {font-family: Arial;} . Does this mean that h5, p { font-family: Georgia;} overrides the previous code?

2 Likes
6

If one rule looks like,

p {
  font-family: Arial;
}

and further down the stylesheet we have a rule that looks like this,

h5, p {
  font-family: Georgia;
}

then the latter rule will definitely override the former, for all P-nodes. None of the paragraphs will be in Arial.

If the second rule looked like this, though,

section h5,
section p {
  font-family: Georgia;
}

then the first rule would hold as the general purpose font, and the second rule would apply only to P-nodes within a SECTION element.

17 Likes
7

What is the reason that a single selector for multiple unrelated elements overrides the respective element selectors?

1 Like
8 
p {
  margin: 0 0.5em;
}

A type selector rule is the least specific of all rules, and hence the most pervasive. Like water, it creeps everywhere.

We want type selectors to be the weakest, or least important so that we can build upon their foundation. In some cases that means making an alteration or two to suit a special need. The options are navigate (as in, traverse) to the target nodes, or give them a specific container, or give them a class. Purpose is the guiding force in this decision.

This is where the water begins to get murky. There is already evidence of a diversity of choices.

Consider,

p.class

  vs.

p .class

  vs.

.class p

To begin to answer your question we need to be certain that their differences and application purposes are clear.

2 Likes
9

* {} vs html {} vs body {} ?

1 Like
10

The universal selector * selects all the elements in an HTML document. The html selector selects the <html> element. Some properties are inheritable (E.g. the color property), therefore, some declarations applied the html CSS rule will apply to its descendants. Similar to the html selector, the body selector selects the <body> element. Again, some properties are inheritable so some declarations in the body CSS rule will apply to the <body> element’s descendants

11

Actually, it selects all the elements in the HTML lexicon. This is what makes it such resource hog. I’ve never found a need to use it.

3 Likes
12

What is the HTML lexicon?

13

Every element defined in the browser.

1 Like
14

So all elements in the <body>?

15

No, all the elements that the rendering engine can recognize. The entirety of HTML.

3 Likes
16

Oh ok. Why does that make the universal selector not good or not recommended?

17

Because of the amount of memory it uses. The DOM balloons to an enormous size so the selector rules can be applied to every element known, not just those in the document.

If there is any user interaction, even CSS dynamically such as :hover the entire page has to be redrawn.

3 Likes
18

Ah true! Thank you :grinning:

1 Like
19

what class would we be referring to in the example below?

.footer.contact {
  font-weight: bold;
}
20

If there is no white space separating the two selectors they become an combinator selector meaning they must both be present on the element.

class="footer contact"