一般来说，CSS都存储为一个文件。然后各个html page能够指定使用哪个CSS文件。这样这些html页面就能够保持一致的风格。
通常能够通过在head中加上一行指定CSS的链接。
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title>MyPage</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!– Body Content -->
</body>
</html>
CSS盒子模型。CSS把页面弄成盒子套盒子的模式，下图非常形象的表明这样的关系。
以下我们看一下怎样通过CSS文件来配置html页面，CSS使用Selector来设置页面中不同元素的格式风格。以下，用样例来表示不同selector的作用范围。
1. 通用Selector *{ }，作用于html页面全部项。
/* Universal Selector */
* {
background-color: #E0E0E0;
margin-top: 0px;
margin-right: 0px;
}
2.类型Selector，作用于某一类的HTML项，如body, p, footer等
/* Type Selector */
body {
font-family: Arial, Helvetica, sans-serif;
}
上面这段CSS就定义了<body></body>中全部元素的字体包含如上三种。
3.ID Selector。作用于某个id=selector中#后的id的项。
/* ID Selector */
#mainHeader {
text-decoration: underline;
}
我们再看看起作用的HTML项。
<header>
<h1 id="mainHeader">Part 2: CSS Introduction</h1>
</header>
4.类Selector
/* Class Selector */.topNavigation {
color: #808000;
font-weight: bold;
}
用户声明的类假设叫topNavigation。该CSS就会对该class的项起作用。如
<p class="topNavigation">
Navigation 1
</p>
5.继承子孙Selector，比方A B{}，就是对A中的B才起作用。对于不在A中B没有左右。
/* Descendant Selector */footer p {
color: #008080;
font-weight: bold;
}
HTML中
<footer>
<p>
Footer
</p>
</footer>
而我们在上个selector中提到的其他p是不起作用的。
6.最后一种不是Selector。它是鼠标悬浮的一种特殊处理
/* Mousehover Effect */
p:hover {
color: #2694E8;
}
html页面中全部标记<p></p>中的文字。当鼠标悬浮在上面的时候，都会变色。