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

.awesome-text-box {

}
<div class="awesome-text-box"></div>

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

div {

}
<div></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
<p class="one"></p>
// However it will not find
<div class="one"></div>

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

.awesome-text-box {

}
<div class="awesome-text-box"></div>

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

div {

}
<div></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
<p class="one"></p>
// However it will not find
<div class="one"></div>

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

• #awesome-text-box => <div id="awesome-text-box"></div> => ID
• .btn.btn-style-1 => <span class="btn btn-style-1"></span> => Chaining classes
• p > span => <p><span></span></p> => Child
• p span => <p><a><span></span></a><span></span> => Descendant (anything below)
• p + span => <p></p><span></span> => Sibling