Welcome to class selectors. If you are not familiar with CSS classes, you are about to meet your new best friend in CSS. Classes are custom made CSS styles that you wish to bundle together, name whatever you want, and use them on any HTML tag you want. If this Class is in your external CSS style sheet, you can use it throughout your entire website. Yup. That simple. From 50 times in the same page to 0 times on the next, CSS classes are the greatest thing in CSS yet.

Class selectors are easily named in the HTML tag using the "class" attribute. As mentioned before, these are custom named. In other words, you can name this whatever you see fit. However, it is STRONGLY advised that the name you choose is in some way related to either the information within these tags, or to the actual styles the CSS provides.

Classes were made specifically for CSS. This means that, unlike an ID, a class does not have to be unique to each tag. Numerous tags can use the same CSS class. To make it even better, if your class is being used 300 times throughout your website, you can make an adjustment to that class in one location! In other words, if you want to change the color scheme of your website, you can do so in a matter of minutes, or even seconds.

To create a rule for the CSS class you start with a "." in front of the class name. Keep in mind that HTML tags have nothing in front of the selector, an HTML ID will have a "#" in front of the selector, and CSS classes have a "." in front of the selector. Below is a CSS class selector example.

HTML:

CSS:

This code may look something like:

Title goes here

Hello, world!

As you can see, once we create a CSS class, we can use that class anywhere we want. We can even use it multiple times in multiple pages! This is just one of the things that differentiates CSS classes from IDs. The next page further explains where to use an ID and where to use CSS classes!