CSS全名為「Cascading Style Sheets（階層樣式表），用途是替HTML添增樣式，比如指定文字顏色、背景顏色、字體大小等版面設計，在網頁上看到的設計大部分是透過CSS來達成。
CSS如何使用？
CSS大致可以分為兩種使用方式，一種是直接寫在HTML（使用style屬性），另一種是寫在CSS檔案，並在HTML中引用該CSS檔。
style用法
style是直接寫在HTML原始碼中，比如想把某文字改為紅色，可以在HTML中這樣寫：
<span style="color:red;">紅色</span>網頁顯示效果：紅色
span是行內元素的意思。另外，顏色除了用顏色的英文（red, blue, gold等）之外，也可以用色碼，例如紅色的色碼為#ff0000，因此上面的句子也可以這樣寫：
<span style="color:#ff0000;">紅色</span>網頁顯示效果：紅色
優點與缺點
- 優點：方便，可以直接寫在HTML中，且權重級別較大，可以覆蓋CSS檔的設定。
- 缺點：維護困難，只能控制該元素，如果有多個元素，未來要修改時必須一個個改。
CSS檔用法
先建立一個副檔名為css的檔案，比如common.css，接著在HTML為class選擇器命名（本文以class為例，不討論元素或id），接著在css中為指定的class設計樣式，我們以剛剛的例子來做：
HTML的部分：
<span class="textRed">紅色</span>CSS檔案的部分：
.textRed {
color:red;
}※ 在HTML中需引入該CSS檔案（一般會在head中就引入，這裡也先不討論）。
※ textRed是自定義的值，可以任意命名，在CSS檔中須加上.，這是指class，另一種常見的是#，這代表id，本篇暫時不討論這部分。
網頁顯示效果：紅色
優點與缺點
- 優點：維護方便，可以一次控制全站中指定屬性的值。
- 缺點：（個人認為）除了權重級別沒有比直接寫在HTML的style高之外，不太有會令人困擾的缺點。
在文檔中寫<style>
前面提到在HTML中直接寫<style>，這個做法比較像CSS檔，只是不寫在CSS檔而是直接寫在文檔中，比如以下的HTML：
<style>
.textRed {
color:red;
}
</style>
<span class="textRed">紅色</span>網頁顯示效果：紅色
這個做法是直接寫在HTML上，只是前後需用<style>包夾，它可以控制該網頁中所有.textRed的元素，但是其他頁面則不受影響。
優點與缺點
- 優點：方便，可以一次控制該網頁中所有指定的元素。
- 缺點：維護不易，由於只能控制該網頁，維護上沒有比CSS檔要來得方便。
小結
style與class：
style
<span style="color:red;">紅色</span>可直接在HTML中設計，但只能控制該元素，如果寫100個，未來要改時要改100次。
class
<span class="textRed">紅色</span>維護方便，即使寫100個，未來要改時只需要改1次。