How to style my email form? - css

Question

I'm 15 days into learning to code. I did the HTML modules on Freecodecamp, and I've started a mini project on CodePen. I've found I've already forgotten a ton, but I want to crack on with the project as that's what's helping me learn stuff.
My mini-project is a sign up form. Currently only email, but later I want to add first/last name plus other data points. However I want to know how to style the box of the email so it can be a bit bigger, plus I want to be able to make the text next to my checkbox smaller. But I've gotten stuck on both parts. I used a basic template for the form and adjusted it from there, but I'm really stuck on the styling.
My code is below. Am I along the right lines?
HTML
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div></br>
<label for="email">
<input type="text" placeholder="Enter Email" name="email" required>
</br></br>
</label>
<label>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
</label>
<label>
<input type="checkbox"> I agree to the terms and conditions here</input>
</label>
CSS
body {
font-family: Verdana,Arial,sans-serif;
font-size: 18px;
}
p {
font-size: 14px;
}
.myForm{
font-family: Verdana,Arial,sans-serif;
width: 200px;
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
label[for=email] {
font-size: 20px;
}

Answer 1

body {
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
}
.myForm {
width: 200px;
}
.enter-email {
width: 300px;
/* what ever width you want */
height: 20px;
/* change the height if you want like this */
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
.terms-conditions {
font-size: 16px;
/* change the size of the font */
}
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div>
</br>
<label for="email"> Enter E-mail:</label>
<input class="enter-email" type="text" placeholder="Enter Email" name="email" required>
</br>
</br>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
<input type="checkbox">
<span class="terms-conditions"> I agree to the terms and conditions
here
</span>
</input>
This will help you. To change the input box for the text use a class on it and change its properties(search for more other than the two I showed) or you could have done input[type=text] to select that text input but classes are better if you have more text inputs and want them styled differently.
As for the changing text of terms and conditons, you could have wrapped it in paragraph tags, heading tags and also as I used span tags. Then again give them a class and change the font-size.
Also as pointed out in the comment you don't need to specify the font-family everytime unless you want a different font applied there. Everything text property applied in body will be given to all the text in the body unless you specify something for that text otherwise.