Survey Form page code Query - Multiple classes/layout

[david.feldman93]

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: https://codepen.io/freeCodeCamp/pen/VPaoNP

[david.feldman93]

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

[zachlankton]

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.

[david.feldman93]

Thank you very much, I understand it fully now.