外部样式表定义了网站的外观。您可以使用样式表指定文本的大小，颜色和字体，按钮的颜色或菜单和侧栏的位置等内容。通常，将样式与内容分离是个好主意，因为它允许您一次只关注一件事。这在团队合作中变得更加重要，允许内容和设计师独立完成其他工作。也许更重要的是，它还允许在整个网站上统一应用单组样式指令。
然后，可以从单个样式表更改网站的可视化表示，而无需单独编辑每个网页。对于较大的复杂网站，可以使用许多样式表来控制页面内的文本，菜单和分区。这个样式表集合可以称为“主题”。
使用外部CSS将HTML链接到CSS。可以直接在网页的HTML中包含CSS样式，使用CSS来为每个段落和标题设置不同的样式。这种类型的内联样式通常不是一个好主意，因为您失去了将样式与内容分离的所有好处。最值得注意的是，您无法从单个文件中一致地更新整个网站。
将样式应用于网站的正确方法是为要应用的每种类型的样式创建单独的外部样式表文件，然后从每个需要使用的HTML文件引用这些文件。例如，您可能具有以下外部样式表：text.css、menus.css、layout.css。您可以在不更改文件名的情况下更改这些外部样式表中的CSS代码，这意味着不会更改所有网页的HTML中对这些文件的引用。
HTML和CSS的示例
一个非常简单的HTML页面可能包含以下代码：
<！DOCTYPE html>
<HTML>
<HEAD>
<title>关于我们/ 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 {
color：＃FF7643;
font-face：Arial'
}
p {
color:red;
font-size:1.5em;
}