CSS Selectors
First we need to understand what CSS selectors are.
When styling a web page, you will want certain styles to apply to specific elements on the page.
For instance, you may want to change the text color of all `p` tags to green.
Selectors allow you to target specific elements on a web page that you can apply styles to. Two selectors, `class` and `id` , are used to apply styles to elements based on the class and ID assigned to an HTML element.
The ID selector is uniqe
The ID selector allows you to define style rules that apply to a single element on the web page. Each web page can only have one element with a single ID attribute. This means the ID selector can never be used to style more than one element. Back to our first example, let's say we only want the first paragraph to turn green. We do this by assigning an ID attribute to the paragraph. In CSS, we target the ID by using the `#` key.
The Class selector is not unique
A class selector allows you to define style rules that apply to any element with a class attribute equal to a certain value. In our awesome paragraph example we have two classes now. One for team-green and one for team-red. Notice how we target the class name with the `.` key.
Conclusion
When you're working with CSS, there are no specific reasons forcing you to use an ID over a class. However, it is best practice to only use IDs if you want a style to apply to one element on the web page, and to use classes if you want a style to apply to multiple elements.
Let me know what you think. Happy to discuss!