外部样式表定义了网页的外观。您可以使用样式表指定文本的大小，颜色和字体，按钮的颜色或菜单和侧栏的位置等内容。
外部样式表中使用的代码
有两种类型的代码用于创建基本网页：
超文本标记语言（HTML）：定义网页的内容。它包含带有标记的实际文本，用于标识文本部分是段落，标题还是列表。它还包含页面上显示的图像链接和外部页面的超链接。
层叠样式表（CSS）：用于指定内容显示方式的编码语言。它定义了每种类型的文本元素的显示方式，如果它们属于不同的类或具有不同的id，则可以以不同方式显示相同类型的元素。这允许菜单和列表之类的内容在网页的主文本中表现得非常不同。
通常，将样式与内容分离是个好主意，因为它允许您一次只关注一件事。这在团队中变得更加重要，允许内容和演示专家独立完成其他工作。也许更重要的是，它还允许在整个网站上统一应用单组样式指令。
然后，可以从单个样式表更改网站的可视化表示，而无需单独编辑每个网页。对于较大的复杂网站，可以使用许多样式表来控制页面内的文本，菜单和分区。这个样式表集合可以称为“主题”。
使用外部CSS将HTML链接到CSS
可以直接在网页的HTML中包含CSS样式，使用CSS来为每个段落和标题设置不同的样式。这种类型的内联样式通常不是一个好主意，因为您失去了将样式与内容分离的所有好处。最值得注意的是，您无法从单个文件中一致地更新整个网站。
将样式应用于网站的正确方法是为要应用的每种类型的样式创建单个外部样式表文件，然后从每个HTML文件引用这些文件。例如，您可能具有以下外部样式表：
text.css
menus.css
layout.css中
您可以在不更改文件名的情况下更改这些外部样式表中的CSS代码，这意味着不会更改所有网页的HTML中对这些文件的引用。
HTML和CSS的示例
一个非常简单的HTML页面可能包含以下代码：
<！DOCTYPE html>
<HTML>
<HEAD>
<title> My Awesome Page </ title>
</ HEAD>
<BODY>
<h1>关于我！</ h1>
<p>这个页面是关于我的，为什么我很棒。</ p>
</ BODY>
</ HTML>
如果要在Web浏览器中查看其外观，请将文本复制到记事本等文本编辑器中。将文件保存为类似“index.html”的文件并将其拖到浏览器中以查看旧式样式。
通过在<title>行下添加以下代码，可以将简单的外部样式表链接到此页面：
<link rel =“stylesheet”
type =“text / css”
href =“myStyle.css”/>
创建另一个名为myStyle.css的文本文件，该文件位于与index.html相同的文件夹中，其中包含以下代码：
h1 {
colcor：＃FF7643;
font-face：Arial'
}
p {
colcor：red;
font-size：1.5em;
}