前言
在本文中，我們談談 CSS；和 HTML 類似，短短一篇文章是無法談完 CSS 的，我們這裡僅做一些概念上的介紹。
CSS 的組成
早期的 HTML 代碼，將網頁中風格 (style) 相關的設定直接內嵌在 HTML 標籤中，但這樣的做法很難維護網頁，而 CSS 的作用，就是將風格的部分抽離出來，放在獨立的設定檔中。透過修改 CSS 命令稿，可以同時更動頁面上數個網頁元素的風格，使得網頁維護更容易。
CSS 的標準經過數個版本更迭，目前的版本是 CSS3。不過，在瀏覽器上實際可用的 CSS 設定還是要看各瀏覽器的實作情形來決定。可以自己身邊放一本 CSS 字典或到 Can I Use 網站查閱可用的 CSS 特性。
CSS 設置的虛擬碼如下：
selector {
property: value;
}用一個簡例來對照一下：
body {
background-color: beige;
}由此可知，CSS 設定包含三項要素：
- Selector：該 CSS 設定的目標標籤，像是本例的
body - Property：該 CSS 設定的特性，像是顏色、大小、位置等，像是本例的
background-color - Value：該 CSS 設定的值，像是本例的
beige(米白色)
學習 CSS，就是學習這三項要素。就像 HTML，學習 CSS 初期會比較枯燥，通常都是在學習一陣子後，用多個 CSS 設定值組合出不同的視覺效果，才會慢慢建立成就感。
在網頁中加入 CSS 設定的方式
在網頁中加入 CSS 設定的方式有以下三種：
- 外部樣式表 (external style sheet)
- 內部樣式表 (internal style sheet)
- 行內樣式 (inline style)
外部樣式表是將 CSS 設定寫在另外一個檔案中，再從 HTML 頁面中引入，如下例：
<link rel="stylesheet" type="text/css" href="/css/style.css"> 內部樣式表則是將 CSS 設定直接寫在網頁中，如下例：
<style>
p {
background-color: lightblue;
}
</style>行內樣式則是將 CSS 設定直接嵌在 HTML 標籤內，如下例：
<h1 style="color:blue;">Some Title</h1>CSS 設定優先順序如下：
- 行內樣式
- 內部樣式表和外部樣式表
- 瀏覽器內建樣式
目前來說，大部分 CSS 設定都會用外部樣式表，維護網頁會比較容易；除非有強烈理由，很少會用另外兩種方式來加入 CSS 設定。
基礎 CSS 實例：字體 (Font)
我們以一個字體的簡例來看如何使用 CSS。我們將範例放在這裡，本節節錄部分內容。
以下是 HTML 的部分：
<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing ...</p>以下是相對應的 CSS：
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: serif;
text-align: center;
}
p,
div {
font-family: sans-serif;
font-size: large;
}在這裡，我們寫了兩個樣式，一個調整 h1，一個調整 p。在 h1 中，我們使用 serif 家族字體，這類字體有稜角，視覺上較美觀，但不利於閱讀長篇文字。在 p 中，則使用 sans-serif 家族字體，這類字體沒有稜角，易於閱讀。讀者可以將兩種字體家族對調看看，測試其效果。
基礎 CSS 實例：Box Model
我們藉由另一個簡例來看 CSS 的 box model 如何使用。我們將完整的例子放在這裡，本文僅節錄部分內容。
首先來看 HTML 的部分：
<div id="border">
<div class="box">There are some messages.</div>
<div class="box">There are some more messages</div>
</div>在此處我們用 <div> 而非 <p> 是因為 <div> 沒有內定的間距，對於練習版面排列比較有助益。
接著來看 CSS 的部分：
body {
background-color: grey;
}
#border {
padding: 5px;
width: 80%;
max-width: 500px;
background-color: lightgrey;
}
.box {
border: 3px solid violet;
border-radius: 12px;
margin: 10px;
padding: 10px;
background-color: slateblue;
color: white;
}在此處，我們設置三組樣式，第一組直接設在 <body> 上，僅設置背景顏色。第二組設在 id #border 上，用 padding 設置內部邊界 5px，並設置其寬度和最大寬度及另一個顏色。第三組設置在 class .box 上，同時設置對外的 margin 及對內的 padding 寬度及其他屬性。
讀者可以試著把內外框的 padding 和 margin 屬性移除，觀察其變化，即可知道這兩個屬性對版面的影響。
繼續深入
只憑本文短促的介紹，其實無法真正學好 CSS，初學者還是建議買一本 HTML 和 CSS 的專書，或是參考 w3schools、MDN 等線上教材，才能真正學習 CSS。
檢查 CSS 代碼的工具
檢查原生 CSS
雖然 CSS 是靜態代碼而非程式碼，但我們也可以用一些工具去檢查 CSS 代碼是否有錯。本節使用 CSSLint，透過以下指令即可安裝：
$ npm install -g csslint使用方式相當簡單，直接把想檢查的 CSS 檔案的路徑當成參數丟給 csslint 即可：
$ csslint path/to/file.css檢查 Sass 等前置語言
前述的工具是用來檢查原生 CSS 的，如果想檢查 Sass 等 CSS 前置語言的話，可考慮 stylelint，透過以下指令安裝：
$ npm install --global stylelint如果喜歡局部安裝的朋友，可以改用 --save-dev：
$ npm install --save-dev stylelint這時候就要自己改 package.json 以串連指令。
除了安裝 stylelint 本身，也要安裝相對應的設定檔，可安裝以下兩種之一：
- stylelint-config-recommended ：偵測所有可能的錯誤
- stylelint-config-standard ：除了錯誤外，還加入一些風格上的建議
透過以下指令安裝：
$ npm install --save-dev stylelint-config-standard修改其設定檔 .stylelintrc.json 使其生效：
{
"extends": "stylelint-config-standard"
}之後就可以用 stylelint 來檢查 Sass 等前置語言檔案：
$ stylelint path/to/file.scss用 CSS 壓縮器節約頻寬
一般 CSS 教材或是網站上的範例，都會把 CSS 代碼排列整齊，這是為了教學上的考量。CSS 代碼的空白和換行其實對 CSS 設定沒啥影響，在效能優先的考量下，其實可以把這些部分拿掉；這類機械性的編輯動作不需要人工介入，而 CSS 壓縮器 (CSS minifier) 就是在此種思維下產生的自動化工具。
這種工具有好幾個，uglifycss 是其中一個例子。uglifycss 本身是 node 套件，以 npm 即可安裝：
$ npm install -g uglifycss使用方式如下：
$ uglifycss --output style.min.css style.css由於經過 CSS 壓縮器處理過的 CSS 命令稿難以閱讀，通常會保留一份未壓縮的命令稿，僅發布已壓縮的部分。慣例上，壓縮過的會命名為 xxx.min.css ，而原本的會命名為 xxx.css 。
用 CSS 框架快速設置網站外觀
由於每個網站都需要 CSS 來美化站容，撰寫 CSS 命令稿成了固定的任務之一，而 CSS 框架可以減少撰寫基礎程式碼的工作量，專注在製做網站或網頁程式上。
根據其功能性，CSS 框架可分為元件框架 (component CSS framework) 和工具框架 (utility CSS framework) 兩種。前者有一堆預寫好的組件，可以較快完成網站的界面，但每個網站看起來會大同小異。後者僅給予基本功能，使用者需要從中組合出網站的外觀，而不同網站看起來差異性較大。對初學者來說，元件 CSS 框架比較容易上手。
最知名的元件 CSS 框架是 Bootstrap，而 Tailwind CSS 則是近幾年很紅的工具 CSS 框架。這類框架除了可以打點門面，通常會加上適應性網站 (mobile responsive website) 和切板 (layout formatting) 等功能，簡化不少手工，所以很受歡迎。
當然，使用現有的 CSS 框架並不代表我們就不用學 CSS，如果內建的樣式無法滿足我們的需求，我們還是要自行客製化樣式；此外，如果只用現有的 CSS 框架而不自己加以設定，其實很容易就看得出來是套現成的 CSS 樣式表，無法建立自己的風格。