CSS Dot Notation Naming Convention

Question

I am getting started with learning CSS.

While looking through the tutorial on w3schools.

I realized some of the example start with

.awesom         


        

Answer 1

The dot denotes that the selector is a class. So it will select elements in your page as such:

.awesome-text-box {

}

Whereas without the dot denotes an element name. Such as:

div {

}

In the other example you gave, the dot notation is using chaining this is where you can select an element with numerous conditions. In your example:

p.one {

}
// Will find

// However it will not find

Whilst I am here I can give you a list of other common selectors too:

• #awesome-text-box =>
  => ID
• .btn.btn-style-1 => => Chaining classes
• p > span =>
  => Child
• p span =>

  => Descendant (anything below)

• p + span =>
  => Sibling