一般来说，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>中的文字，当鼠标悬浮在上面的时候，都会变色。