CSS 101 - Selectors

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing.

Without further ado here is a summary of my notes for day 2.

Selectors

A CSS selector selects (find) the HTML element(s) you want to style.

CSS offer many selectors type.

Simple selectors
This is the simple selector we learn in first lesson. You simply specify the html tag name

p {    
    font-size: 30px;
}

This selector will select (find) all the p tag in my page and make those style with font-size equal to 30px

Class selectors
If we dont want to style all p tags but only one or couples of them. We can set some p tag with a grouping class name

<p class="title">
    This is a Title
</p>
<p class="title">
    This is also a Title
</p>
<p>
    This is a regular paragraph
</p>

Then we can use the class selector to select only those with a title class name. A class selector is prefix with a dot

.title {    
    font-size: 30px;
}

Id selectors
If we only want to style one p tags. We can select uniquely using the id attribute

<p id="main-title">
    This is a Title
</p>
<p id="second-title">
    This is also a Title
</p>
<p>
    This is a regular paragraph
</p>

Then we can use the id selector to select only the one with an id equal to the selector name. An id selector is prefix with a #

#main-title {    
    font-size: 30px;
}

Universal selector
The universal selector (*) selects all HTML elements on the page.

* {
  text-align: center;
  color: blue;
}

Descendant combinator
If is possible to select parent and child corresponding to selector name

table h2 {
  text-align: center;
  color: red;
}

This code select all h2 elements but only those child's with a parent table element.

Cascading style sheet

CSS stands for Cascading Style Sheets, and that first word cascading is incredibly important to understand the way that the cascade behaves.

Stylesheets cascade — at a very simple level, this means that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

h1 {
    font-size: 30px
}

h1 {
    font-size: 24px
}

The font size will be 24px

Inheritance

Also significant here is the concept of inheritance, which means that some CSS properties by default inherit values set on the current element's parent element, and some don't. This can also cause some behaviour that you might not expect.

For example this css will change the body and all child's body elements

body {
  color: red;
}

Because of CSS inheritance, all child's elements of a tag is style the same as his parent.

If the child property have a specific style just for him. This style will predominate. So only element with no style inherit their parent properties and value.

body {
  color: red;
}
p {
   color: black;
}

So in the last example, all the body text will be red, except the p tags text will be black

Specificity

Specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element.

The general rule here is the more specific selector have priority over less specific selector

body table {
    color: blue
}

body {
    color: red;
}

table {
    color: green;
}

In that scenario the table text color will be blue. Becase it is the more specific selector.

Also if CSS is attach directly to a html tag it will have predominance over anything else.

<table>
    <tr>
        <td style="color: magenta;">Test</td>
    </tr>
</table>

Last but not least, I would like to recommend you a small CSS Selector game to practice your new skill. This fun game is call CSS Dinner: https://flukeout.github.io/

Conclusion

That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: Follow @justericchapman