Submodule 4.1: Selectors

Group the selectors to apply styles

Assume that we want to apply the same style to different elements. For example we want all our h3, h4 and p elements to be centered aligned. With what we have learned, we would do that as follow:

h3 { text-align: center;}
h4 { text-align: center;}
p { text-align: center;}

However, there is an alternative way to do that by grouping our selectors. In this case each selector is separated from the next one by a comma (,).

By doing this we minimize the code that we have to write.

So, the above can be written as:

h1, h3, p { text-align: center;}

For more information about selectors: https://www.w3schools.com/css/css_syntax.asp