现在，你将使用 CSS 定义一个 class 来样式化和定位页眉内容。返回到 styles.css 文件，并通过添加以下 CSS 规则集来创建 header class：

. . .
/* 页眉标题 */
.header {
  padding: 40px;
  text-align: center;
  background: #f9f7f7;
  margin:30px;
  font-size:20px;
}

让我们暂停片刻，理解一下你刚刚添加的代码的每一行：

• /* Header Title */ 是一个注释，浏览器不会显示它。
• 文本 .header 是我们通过这个规则集创建和定义的 class selector 的名称。
• padding: 40px; 声明在内容和元素边框之间创建 40 像素的 padding。
• text-align: center; 声明将内容移动到元素的中心。你也可以将值调整为 left 或 right 来相应地对齐文本。
• background: #f9f7f7; 声明将颜色设置为演示网站中使用的特定 HTML 颜色代码。本教程系列不会涵盖 HTML 颜色代码，但你也可以使用 HTML 颜色名称（black、white、gray、silver、purple、red、fuchsia、lime、olive、green、yellow、teal、navy、blue、maroon 和 aqua）来更改此属性的颜色值。
• margin:30px; 声明在元素周边和视口周边或任何周围元素周边创建 30 像素的 margin。
• font-size:20px; 声明增大标题和副标题的尺寸。

保存你的 styles.css 文件。接下来，你将把这个 header class 应用到你的页眉内容。返回到 index.html 页面，并将页眉内容（你已经添加到文件中的）包装在分配了 header class 的 <div> 标签中：

. . .
<!--Section 1: Header content-->
   <div class="header"> 
     <img src="images/small-profile.jpeg" class="small-profile.jpeg" alt="Sammy the Shark, ’s mascot">
     <h1>Sammy the Shark<h1>
     <h5>SENIOR SELACHIMORPHA AT <h5> 
   </div> 
  </body>
</html>

保存 index.html 文件并在浏览器中重新加载它。你的标题、副标题和个人资料图片现在应该根据你用 header class 声明的规则在 <div> 容器中进行样式化：

你现在已经使用 HTML 和 CSS 在你的网页上重新创建了演示网站的页眉部分。你使用 <div> 容器和 CSS class 添加并样式化了标题、副标题和个人资料图片。如果你感兴趣，可以通过修改页眉内容的 CSS 规则继续探索设计可能性。

当你准备好时，可以继续下一个教程，在那里你将重新创建演示网站的第二部分。