What if you are confused about how to use the class attribute and id attribute in style sheets (CSS)?

Hello, this is naouniverse ( @naouniverse708 ).

We have recently migrated our CMS from Movable Type to WordPress.
In line with this, we have rebuilt the page design from scratch.

At that time, I was confused about how to use the class attribute and id attribute of the style sheet (CSS), so I will leave what Google-sensei taught me as a memorandum.

Example
■HTML:

<p class="kurasu">Example using class</p><p id="aidhii"> Example using id</p>

■Style sheet:

p.kurasu { color: red; } p#aidhii { color: red; }

The above display effect on the browser is the same.
So how should I use it...

• ■ class: Assign a type name
  → The same class name can be used multiple times in one page
• ■id: Assign a unique name
  → The same ID name can only be used once in one page

As an example of how to use the id attribute, when configuring a page using div elements,

• Header:
  
  ~
• Sidebar:
  
  ~
• Main:
  
  ~
• Footer:
  
  ~

It is easier to organize things by using the id attribute for things that are not duplicated.

Conversely, the class attribute is used to describe a design that appears multiple times on a single page.

I would like to use it appropriately depending on the purpose.