有三种方法可以为网站添加CSS样式：可以使用内部CSS并在<head>HTML文档部分包含CSS规则，链接到包含所有CSS规则的外部.css文件或使用内联CSS来应用特定元素的规则，本教程包含这三种方式的优缺点。
内部CSS
内部CSS代码放在<head>特定页面的部分中，类和ID可用于引用CSS代码，但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式，这样可以提高加载速度。
内部样式表的一个示例：
<head> <style type="text/css"> p {color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} #button-go, #button-back {border: solid 1px black;} </style></head>内部CSS的优点：
样式表只影响一个页面
内部样式表可以使用类和ID
无需上传多个文件，HTML和CSS可以在同一个文件中
内部CSS的缺点：
增加页面加载时间
它只影响一个页面 – 如果要在多个文档上使用相同的CSS，则无用
外部CSS
将CSS添加到网站最方便的方法可能是将其链接到外部.css文件，这样，对外部CSS文件所做的任何更改都将全局反映在网站上，对外部CSS文件的引用放在<head>页面的部分中：
<head> <link rel="stylesheet" type="text/css" href="style.css" /></head>而style.css包含所有样式规则，例如：
.xleftcol { float: left; width: 33%; background:#809900;}.xmiddlecol { float: left; width: 34%; background:#eff2df;}外部CSS的优点：
HTML页面的提及更小，结构更清晰
加载速度更快
相同的.css文件可以在多个页面上使用
外部CSS的缺点：
在加载外部CSS之前，页面可能无法正确呈现
内联CSS
内联CSS用于特定的HTML标记，<style>attribute用于设置特定HTML标记的样式。建议不要使用CSS，因为每个HTML标记都需要单独设置样式。如果只使用内联CSS，管理网站可能会变得太难。
使用内联CSS的HTML页面示例：
<!DOCTYPE html><html><body style="background-color:black;"><h1 style="color:white;padding:30px;">Hostinger Tutorials</h1><p style="color:white;">Something usefull here.</p></body></html>内联CSS的优点：
如果要测试和预览更改，则非常有用
对快速修复有用
降低HTTP请求
内联CSS的缺点：
内联CSS必须应用于每个元素