Classes and IDs are a super useful tools to make your code more organised and more efficient. Let's learn about how they work and how to best utilise them!
Both Classes and IDs are used to ascribe a set of styling rules to parts of your code. The difference is, classes are used to style multiple elements in your code where IDs are used to style a single, unique element.
When we're building a site, having a cohesive style helps present the information clearly to the user. Fonts, colours, sizes, spacing - it's easier to understand a site that keeps these things consistent. Classes and IDs help us do this, without having to copy and paste the same piece of code over and over.
If you want to apply a unique set of styling rules to one element in your code, IDs are the way to do this. Each ID connects only to one element, and each element can have only one ID assigned to it.
IDs, like other styling rules, must be declared in your stylesheet. They are denoted by the # symbol. Here is an example of an ID that makes an element's background-colour green and width 800px:
If you want a set of styling rules that will be used on multiple elements in your code, it's time to make a class. Unlike an ID, Classes can be used on multiple elements throughout your code. And just as a class can be assigned to multiple elements, an element can have multiple classes. Classes are denoted by a . symbol.
Add a new class to your stylesheet using the . Symbol followed by the class name. Here is an example of a class that makes the font-size 20px and the colour red:
