CSS - Classes, IDs, and Elements: What's the Difference?

Question

In CSS there are a few ways of addressing different elements. (I am going do use div elements in the following example.)

Classes - div.main {

IDs - #id-name {

Element - div {

Let's say I'm making a simple animation, and I want to make a p element spin.

p {
  text-align:center;
  font-size:40px;
}
#spinner {
  animation-name:spin;
  animation-duration:03s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
 }
 @keyframes spin {
   from {
     transform:rotateY(0deg);
   } to {
     transform:rotateY(360deg);
   }
 }

<p id="spinner">Hello, world!</p>

What would've been the difference if I would've included all of the animation parts in the p address where I made the text bigger and centered, or used a class such as p.main instead of an id called spinner? Is there a difference, or is it just preference?

<p>Thanks!</p>

Google **css specificity** and read up on it. This is total basic. — connexo, Nov 03 '18 at 15:44

bhansa · Accepted Answer · 2018-11-03T15:59:58.093

Let's see them one by one:

Using Element name:
If you use element as a css selector, you are targeting all the elements with the TagName
example: p{color: red;} will make every p element's color red.
Using class name with element:
Classes can be used for to target more than one element and you narrow down the targets by specifying it for any element.
example: p.class-name{color: red;} will only apply for elements having that class name and not all the elements.
Using id's:
ID's are unique and has to be precisely, you can target any element which has same ID. It should have one-one mapping so that it means, no duplicate ids.
example: p#some-id{color: red;} only applies styles for element which has that id.

I hope it made few points clear.

CSS - Classes, IDs, and Elements: What's the Difference?

1 Answers1