CSS/Applying CSS to HTML and XHTML
CSS可使用連結、嵌入、內聯方法用於HTML或XHTML。對於連結方法，CSS不是存儲在HTML頁中，而是存儲在單獨文件中。對於嵌入方法，CSS存放在HTML頁面的header section中。對於內聯方法，CSS存放在HTML tags的style屬性中，例如<div style="font-weight:bold">Bold Font</div>.
最整潔的方法可能是連結，但其它兩種方法在網頁原型開發時更方便更快。內聯方法避免考慮文檔包含哪些CSS類。對於大型網站，很多網頁共享相同的用戶定製樣式，連結方法是唯一可行的。
連結
[編輯]對於連結形式的CSS, CSS規則保存在單獨的文件中。從HTML頁引用該文件，增加link元素到head元素中。如下例假定使用文件"style.css"：
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
link元素有3個屬性。第一個屬性rel告訴瀏覽器連結目標的類型。第二個屬性type告訴瀏覽器哪種樣式表被使用。第三個屬性href告訴瀏覽器到哪個URL去尋找樣式表。本例中是相對的URL，也可用絕對URL。
在"style.css"包含如下單條規則：
p {
font-weight:bold;
}
這告訴瀏覽器段落(p)中的文本應該繪製為黑體。
繪製例子：
Text that will be formatted.
完整的HTML文檔如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Text that will be formatted.</p>
</body>
</html>
嵌入
[編輯]嵌入CSS被放置於HTML文檔的頭部的樣式（style）元素中。例如，希望HTML中的文字為黑體：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
在文檔頭部可放入CSS：
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
CSS被放入style元素中。該元素的屬性type的值為text/css，告訴瀏覽器元素包含的樣式表是CSS。如果屬性type缺失或者設為不可識別值，CSS將不能用於頁面。
例子中的這段CSS告訴瀏覽器把所有的段落(p)元素的內容顯式為黑體。看起來這樣：
Text that will be formatted.
嵌套了CSS的完整的頁面文件：
<!DOCTYPE html">
<html lang="en">
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
記住，可能的話，總是應該優先使用連結方法而不是嵌入的樣式表。這使得可以輕易修改樣式表而不必去跟蹤不同的HTML文件中的樣式信息。
內聯
[編輯]內聯CSS師在元素的開始標記（tag）的style屬性中直接指出。例如：
<div style="font-weight:bold; color:red;">Bold Font</div>
將被繪製為：
注意，連結的CSS優於嵌入的CSS，而二者都優於內聯的CSS。