Css 如何设计我的电子邮件表单？

我学习编码已经15天了。我在Freecodecamp上完成了HTML模块，并在CodePen上启动了一个小型项目。我发现我已经忘记了很多，但我想继续这个项目，因为这正是帮助我学习东西的原因

我的小项目是一个注册表格。目前只有电子邮件，但稍后我想添加名/姓以及其他数据点。然而，我想知道如何设计电子邮件框的样式，这样它就可以大一点，而且我想能够使我的复选框旁边的文本变小。但我在两个方面都卡住了。我为表单使用了一个基本模板，并从那里对其进行了调整，但我真的被样式卡住了

我的代码如下。我说的对吗

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 <a      href="wwww.thisisawebsite.com">here</a></input>
</label> 

正文{
字体系列：Verdana、Arial、无衬线字体；
字号：18px；
}
.我的表格{
宽度：200px；
}
。输入电子邮件{
宽度：300px；
/*你到底想要什么宽度*/
高度：20px；
/*如果你想这样改变高度*/
}
钮扣{
背景色：#4CAF50；
颜色：白色；
边界半径：10px；
字体大小：16px；
填充：8px；
}
.条款及条件{
字体大小：16px；
/*更改字体的大小*/
}

下面是一张表格


输入电子邮件：




给我报名！




我同意这些条款和条件

如果字体系列与

正文

类中的字体系列相同，则无需重复。

主体

标记中的所有元素都将从这些值继承。（

颜色

，

字体大小

，等等）当然，如果您想显式地将不同的值与给定的类关联，那么这样做很好。非常感谢！非常感谢你！我真的很感谢你抽出时间回答。我也很喜欢你的代码是多么清晰，我很容易理解它的含义。我希望达到这样的标准：-）

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; 
}