How to change the CSS style of my website for different group of users?

I have been trying to figure out how to make this happen but i could not find the right thing to connect to the group of people.

The information i have until now is that i have ID for each group of people, but don't know how to use it to referred the change to those users in this group.

Also it could also be a connection between the leader of the group, but could not find this connection.

Solution

So, as per my comment, consider you have a number of permission, you have the id of permissions and you can differentiate the logged in used based on that.

So based on the id, you can add a class name to the root element, in my sample, I added the class teacher to body, so the background-color will be green and color will be white.

Instead of that, you can try other classes also, like principal, student etc, so you can change the theme as required.

body {
  background-color: red;
  color: #000;
}
body.principal {
  background-color: yellow;
}

body.teacher {
  background-color: green;
}
body.student {
  background-color: white;
  color: #fff;
}

<body class="teacher">
  <h2>Welcome User</h2>
  <section>
    Content
  </section>
</body>