Survey Form page code Query - Multiple classes/layout

Hey all, have a few quick questions and hoping someone could take a look. I was wondering why some of the code on the example survey page was set up this way:

'<p id=“description” class=“description text-center”>
Thank you for taking the time to help us improve the platform

.description {
font-style: italic;
font-weight: 200;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);

.clue {
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;

.text-center {
text-align: center;

  1. Why the need to create 2 different classes for the 1 element?

  2. Why not have “text-align: center;” go under .description as well?

  3. Is there any meaning to the .clue class being placed between these 2 classes in CSS?

Full code is here:

I just answered question 1 and 2 for myself after playing around a bit, please disregard those 2.

You don’t “need” 2 different classes, but the text-center class can be “re-used” on other elements so you don’t have to write a class for each element that you want text centered.

There is no meaning to the .clue class being placed in between the 2… while CSS order does matter, in the context of your <p> element, it has no affect.

1 Like

Thank you very much, I understand it fully now.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.