This article is currently in the process of being translated into Chinese (~1% done).
Linking CSS to HTML
如前所述，CSS将定义你的标记语言(通常是HTML)将如何呈现给终端用户。这意味着需要对这两种语言进行绑定 -- 浏览器需要知道你想要组合HTML文件和CSS代码。为了保持高度的灵活性，目前有许多种方式可以实现。
通过Style属性内置CSS
几乎所有的HTML标签都包含并使用Style属性，你可以在里面直接定义CSS。但是这样做废弃了CSS的主要优势之一，复用性，因为这时候CSS代码只是应用于当前元素，而不能被其他元素所复用。
但这依然是一个用于测试代码的好方法，亦或是此CSS样式你并不希望被别的元素所复用。这里演示了该如何使用CSS：
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>注意到在这里我在同一个元素里定义了多个属性，例如文字颜色和文字样式。这是目前为止最方便的CSS使用方法，因为它不包含额外的标签和文件 -- 只是在本地定义了CSS. 然而，上文已经提到，这并不是使用CSS的最佳方式。
另外一个缺点在于，每次访问这个页面时，这段样式代码都会被加载。这对于单个包含了多种样式的元素来说并不是个问题，但是如果你有一个循环用于多次输出相同的样式属性代码，就会造成不必要的填充，有别于利用浏览器缓存来为每位访客进行一次性加载的方式，这段代码将会被不断的重复加载。
Document wide CSS through style blocks
The second easiest way to apply CSS to elements in your document is through the use of a style block. HTML includes a tag called style, which can contain CSS code. Here, you can define rules which can then be used all across your document. Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Notice how I can now define the rule in one place and then re-use it multiple times in the document. You can define multiple style blocks, if you want to, and place them wherever in the document you want to. It is however considered best practice to include the style block(s) in the top of the document, inside the head (<head>) section.
Global CSS through external CSS documents
So, by using the style block as described above, you can re-use your CSS code all over the document, but you still have to include it on all of the pages of your website, which requires the browser to download it on each request instead of just downloading an external CSS file once and then cache it. This is a major disadvantage of the style block approach and why you should normally go for the third approach instead: The external CSS file!
A CSS file is simply a plain text file saved with a .css extension and then referenced in the file(s) where you want to apply the rules. If we re-use the example from the style block part, we can then move the "highlight" rule to a new file (without the HTML part) and save it under an appropriate name, e.g. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}We can then reference it in our HTML document, using the link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>This example requires the HTML and CSS file to be in the same directory - if they are not, you need to update the href attribute to match the path.
Now we define all of our CSS code in its own file and then just reference it inside all of our sub pages to take advantage of the defined rules! If you want to, you can divide your CSS code into several external files and only include the ones you need - it all depends on how big your website is and how you prefer to organize your code.
Summary
We have talked about different ways for your webpage to consume CSS code in this chapter.
The first approach was the inline style attribute. Its biggest advantage is the fact that its so easy to use, but as a disadvantage, it cuts you off from some of the biggest benefits of CSS: Code re-usability and the ability to make layout changes in a single place and have it applied across your entire website.
The second approach uses the style block. It's only slightly less cumbersome to use than the inline style attribute, and allows re-using your CSS code. The biggest disadvantage is that code in a style block is global across the page, but not across multiple pages, meaning that you will have to include it on each subpage of your website.
The third approach is the one you most commonly see on websites: External CSS file(s). It only has the disadvantage of being slightly harder to work with, because you have to place the CSS in a separate file which you will have to open to make changes - a very small price to pay for the ability to re-use your CSS across your entire website!
Please be aware that throughout this tutorial, I will mainly be using the second and the first approach, but only because the examples presented in this tutorial are all small, separate entities and not a big website. It's simply a lot easier to demonstrate the various CSS properties this way, instead of having to separate markup and CSS into distinct files and explaining this fact each time. You are free to use the approach you prefer, but for anything other than small examples and very simple websites, the third approach is usually the superior way!