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


#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.


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Multiple Selectors I
#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?


#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.


#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.