Class & ID Selectors: HTML & CSS

What are ID’s and Classes?

Classes and ID’s are essentially ways to target specific HTML elements to be edited in CSS. Each Class/ID can be uniquely named targeting a specific element within your HTML document. ID’s are generally used to target one element and Classes can used to target more than.

For example, the next section is just lorem ipsum, but I wanted its colour to be gold, bold and italic rather than navy blue, regular and normal like the last paragraph. Rather than create a new Class for this specific text I can just create an ID selector and target this specific Lorem Ipsum text.

" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at tellus at urna condimentum mattis pellentesque. Egestas pretium aenean pharetra magna ac placerat vestibulum. Elementum sagittis vitae et leo duis ut. In egestas erat imperdiet sed euismod nisi. Donec ultrices tincidunt arcu non sodales neque. Amet massa vitae tortor condimentum lacinia. Massa enim nec dui nunc mattis enim ut tellus elementum. Et molestie ac feugiat sed lectus vestibulum. In egestas erat imperdiet sed euismod nisi porta lorem. Nisi scelerisque eu ultrices vitae auctor eu augue. Vestibulum morbi blandit cursus risus. Egestas dui id ornare arcu odio ut sem. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. "

Example of code used to change text.

Classes vs ID’s

While it may be great to use ID’s on everything and style each element individually, it will be a long winding road of code which didn’t need to be travelled. Classes offer something ID’s don’t, generality. In a lot of instances throughout your site you will be creating a style, things like; typography, headings and paragraphs will generally be the same across your site which can be tagged as a Class, it will save you time to focus more on the details. ID’s are meant to be used for specific styling as shown in the example above. Intrinsically ID’s will override Classes so using them sparingly will allow for more legible code and opportunities to get creative.

A good rule if you ever get confused – get specific with ID’s, be broad with Classes.