Classes vs id

we give our code classes and id's in HTML so we can style them in CSS

just like we have names, elements can have names that we give to them called ID's.

ID in HTML:ID in css:

(id's use "#" before them in CSS)

And just like we have families, elements can be put into a family using classes.

(classes use "#" before them in CSS)

For example - If you want to make multiple paragraphs red, you will assign them to the same class (or family)

Class in HTML: Class in CSS:

What it looks like on a webpage:

ID's are little different, They can only be used for one element on a page.

For this reason, they should really only be used for things like footers, headers, and menu's that appear once on the page.

Classes can be used multiple times to style multiple elements. You should use classes for things like paragraphs, links & buttons.

Sometimes elements can have both a class and an ID:

It's important to note that when you have two classes, the ID will always override the class.

For example, if an element has a class that is assigned a red color, and an ID that is assigned a blue color, the text will end up being blue instead of red.

Why would want to want to use both classes together?

id can seperate an object from its family so it has for instance, the same colour and size as its family, but it is round instead of square.

The id makes it round. but the class makes it the same size and colour as its family.

In summary here are the basic rules to remember when using classes & I.D's:

• Use Id's for elements that appear only once on the page (eg; footer)
• Use classes for things that might appear more than once (eg; paragraphs)

It's important to follow these practises because your code may not end up looking right in other browsers.