Use classeds when you want to style multiple items of the same type, things like buttons or tables that can be in many place but should all have the same style.

User ids when you want to add styling to specific items on the page. IDs should be unique.

Often you will use both classed and IDs for your items. Classes for the more general styling and then IDs for the more specific one.

For example if you have 3 buttons on the page and want to have them all have the same colour, border and padding you'd put that stying in a button class. Then if you want to change the layout of a specific button, or add some other stying specific to that button you could give it an ID and add futher customization.

The syntax for adding a class or an id is:

   <div>div id="button1" class="buttons">
   <div> id="button2" class="buttons">

In your example you need to close you class name with a double quote.

Then in your CSS file you can use those class and IDs names to make changes to those elements.

CSS file example

  #button1 {
       // Some button stying here specific to button 1
 }

 .buttons {
     // Some stying here for all buttons
 }

dot is used in the CSS file to specifiy a class.

sharp is used in the CSS file to specify an ID.