Classes
- Defined on css with the ‘.’ Identifier.
- Classes are can be on multiple sections. Giving each the same properties .e.g. if you give images the class img and then in css give the ‘img’ class a border of pink then all your elements with the class ‘img’ will have a border of pink, unless a higher class takes it away.
- A element can have multiple classes assigned to it. The second can usually override the first class if they have the same properties.
- Classes can also be used in Javascript to find multiple items. This usually is in a loop so that all the elements can be checked and changed if necessary.
- In the below example it shows lists with single classes and what they look like is css
HTML:
CSS:
IDs
- IDs are unique and can only be used once within a project.
- Defined on css with the ‘#’ identifier.
- An ID is usually used for a single section/element on a page e.g. a section for cats playing with sticks can have the ID of “catswithSticks” while another section could be “catsFailingAtJumping” would show cats jumping but both could have the same classes. Due to these IDs you can then “jump” to each area on the page. This is usually how Navbars move about the page.
- In Javascript the IDs are used to fine the element and change its properties.
- in the below example it shows a id being assigned to a section. And what it looks like in CSS. A example of ids in JS will appear in another section of this blog (JS DOM)
HTML:
CSS:
