Basic styling in an html page with CSS - html

Question

I want to preface this by saying that this website comes highly recommended and was recommended by my professor to help "learn on our own." My question is probably incredibly simple and I apologize if it seems as a "waste of space". I am doing an assignment that requires creating a submittable proper functioning form in vim using HTML and CSS for styling on the course's server.
I have it all laid out as is, however, I have multiple labels in the body ("First Name"/"Last Name" "Class year selection box"/ "address"/"City"/ and "email". The First Name, Last Name, and Email are all what I am trying to style as "red text" to denote that these are the required fields.
I have the code set up to where these are required in order to submit the form, but I cannot figure out how to style it in the header to where I can differentiate which labels need to be in "red". As it is now, when I insert " Label { color:red; } in the header, it turns all of the text into red. Is there a way to denote specific labels to be red and the non-required labels to remain in black text color? I have tried to insert numbers into the label inputs to denote the different labels in need of a red text color but it applies it to all of the text on the form.
Is there anyway to properly add an identifying feature into a label to allow only the chosen labels as being red?
I appreciate any feedback and I apologize again if this is a waste of time for seasoned coders/developers to have to answer this question. Any input is appreciated.
How my form looks now online
The header (that has it all red)
The (this is where I am lost with inserting class properly)

Answer 1

At your HTML file add a class to each label you want to target individually, e.g.
<span class="label firstName">Joe</span>
At your CSS target this class and format the way you want, e.g.
.firstName {color: #f44336;}
This will target your label with the class of firstName and color the text RED.

Answer 2

There are multiple ways to approach this. If you are allowed to use only HTML and CSS, you can try to create multiple div's in the HTML file and create a CSS property in the CSS file that "styles" the required fields.
HTML
<div class="forms-box">
<h2>My Forms</h2>
<form>
<div class="user-box">
<input type="text" name="" required="" />
<label>First Name</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Last Name</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Last Name</label>
</div>
<div class="user-box3">
<label>Class year</label>
<select type="checked" required="" name="class-year">
<option value="2021">2021</option>
</select>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Address</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>City</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Email</label>
</div>
</form>
</div>
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.forms-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.forms-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.forms-box .user-box {
position: relative;
}
.forms-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.forms-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: 0.5s;
}
.forms-box .user-box3 label {
color: #fff;
font-size: 16px;
margin-bottom: 10px;
margin-right: 40px;
}
.forms-box .user-box3 select {
color: #000;
margin-bottom: 20px;
}
.forms-box .user-box input:focus ~ label,
.forms-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #ff0000;
font-size: 12px;
}
I have created a mock up which lists all the required fields that need to be filled before submitting.
Here is the link to my mockup