CSS 是建立應用程式外觀的關鍵，這一篇來看初步的介紹
CSS 在 HTML5 扮演粉飾應用程式外觀的關鍵角色，當網頁的內容定義完成，你還必須透過CSS 調整並建立其外觀，將純粹的HTML 標籤定義，轉換為使用者可以理解的應用程式介面。CSS 是一種樣式語法，根據所要呈現的外觀作設定，它由一組或一組以上的key/value 樣式項目語法進行設定，如下式：
key:value這是單一的CSS 樣式設定，其中的key 表示所要指定的樣式項目名稱，value 則是此樣式項目的值，兩者以: 連接。既使最簡單的網頁，你也很難只用一組CSS 搞定外觀的設計工作，因此通常會需很多組樣式項目，而超過一組以上的樣式，必須以; 隔開，如下式：
key1:value1;key2:value2;其中的key1/value1 為第一組樣式，而第二組key2/value2 則是第二組項目，最後的; 可以省略，如果還有更多的項目，依此類推作設定即可。
瞭解語法的格式之後，接下來我們來看看CSS 的實際設定，考慮以下的語法：
color:white;這一組樣式項目表示將以白色呈現文字，再來看以下的另外一行設定：
color:white;background:black;這一組樣式項目表示除了以白色呈現文字，再以黑色呈現背景。決定所要設定的CSS 項目之後，接下來就是將此樣式套用至指定的標籤，假設畫面上有一個按鈕，我們要將其設定為黑底白字，只要將上述的樣式項目，設定給按鈕的style 屬性即可，語法如下：
style="color:white;background:black;"這一行設定將兩組樣式項目字串包裝在兩個雙引號當中，指定給style 屬性，如此一來按鈕就會以黑底白字的外觀呈現，現我們比較設定前後的差異。
- 未設定style
<button >Say Hello</button>
- 設定style
<button style="color:white;background:black;" >Say Hello</button>
如你所見，經過樣式的設定，我們就能夠以指定的外觀在網頁上呈現按鈕的外型，當然這只是最簡單的樣式設定，CSS 的功能相當強大，甚至可以呈現動畫效果，不過本書定位在入門層級，不會討論這些深入的內容，有興趣的讀者可以參考將於四月以紙本出版的《HTML5 完美風暴》。
瞭解HTML 、CSS 與JavaScript 在HTML5 所扮演的角色，我們將回過頭來，逐一討論並且說明，如何從 HTML 標籤開始，逐步搭配CSS 與JavaScript ，發展HTML5 Web 應用程式。
