There are several other very useful must-know tools in CSS. Specifically, these are more selectors, but of a slightly different flavor. You can specify rules like this:

.myText {color: blue; ont-size: 18px;}
#coolStyle {font-weight: bold; color: red;}

<div>
   <p class="myText">Paragraph in an article for example...</p>
   <p class="myText">Paragraph in an article for example...</p>        
   <p class="myText">Blurb 'n <span id="coolStyle">cool thing</span></p>
</div>

So the 4 words/characters to notice above are:

Basically the period and sharp symbol are CSS hooks that connect to respectively to their HTML counterparts, the “class” and “id” attributes. “Attributes” by the way are extra pieces of information which you put within opening HTML tags. The “style” attribute you previously saw to supply “inline styles” was another type of attribute. So the idea is that the above <p> elements have the styling provided by the .myText selector, and the <span> element has the #coolStyle style supplied.

You use classes when you want styles to be applied to multiple elements when you can easily refer to them (i.e. select them) with simple element-named selectors, such as the ones you saw in the last CSS tutorial. For example:

.myText {color: blue; font-size: 18px;}

would apply to all <div> elements on the page, and we only want to apply that style to some divs. That’s when you use class selectors.

You use ID selectors when you want the style to only apply to one element on the page. Think of ID selectors as a way to give an element a unique identification name, i.e. “ID.”