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

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.

55 Likes

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?

5 Likes

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.

23 Likes

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.

15 Likes

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

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.

7 Likes

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

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.