網站的視覺樣式與版面是由階層樣式表(Cascading Style Sheets，縮寫CSS)所規定。
這些檔案塑造網頁的HTML標記語言，為網頁瀏覽器提供指示，關於如何呈現該標記語言所產生的網頁。CSS規範網頁的版面以及顏色、背景影像、排版等等多種設定。
如果你查看一個CSS檔，你會發現這些檔案擁有自己的特定語法，就如同任何標記或程式語言。每個樣式表格都是由各種CSS屬性規則所組成。若完整地來看這些規則，它們就是網站的樣式。
CSS規則的組成部分
CSS規則由兩大部分組成：選擇器(selector)和宣告(declaration)。選擇器決定樣式要套用到網頁上的哪些部分，而宣告則是決定如何呈現樣式。例如：
p {
color: #000;
}這是CSS規則。選擇器的部分是”p”，它是「段落」的選擇器元素。因此，它將選擇網站中的所有段落，並提供它們此樣式(除非你在CSS文件中特別針對指定段落更具體的樣式)。
規則部分顯示「color: #000」，也就是所謂的宣告。該宣告是由兩部分組成：屬性和值。
屬性是此宣告的顏色部分。它決定哪方面的選擇器將會有視覺上的變更。
值是已選擇的CSS屬性將會被改變的結果。以我們的案例而言，我們使用的#000是十六進位值，是CSS「黑色」的簡寫。
因此，使用此CSS規則，我們的頁面將會顯示黑色字體的段落。
CSS屬性基礎知識
當你在寫CSS屬性時，你不能簡單地以你認為適合的方式來編寫。例如，「color」是實際的CSS屬性，所以你可以使用它。此屬性是定義文字顏色的元素。
如果你嘗試使用「text-color」或「font-color」作為CSS屬性，這些都會失敗，因為它們並非CSS語言實際的組成部分。
另一個例子是「background-image」屬性。此屬性是用來設定一個可用於背景的圖像，如下：
.logo {
background-image: url("/images/company-logo.png");
}如果你嘗試使用「background-picture」或「background-graphic」作為屬性，它們都會失敗，因為這些同樣不是實際的CSS屬性。
CSS屬性的例子
你可以用於網頁樣式的CSS屬性有很多種。下列為一些例子：
- Border (包括border-style、border-color和border-width)
- Padding (包括padding-top、padding-right、padding-bottom和padding-left)
- Margins (包括margin-top、margin-right、margin-bottom和margin-left)
- Font-family
- Font-size
- Background-color
- Width
- Height
這些CSS屬性都是很常見的例子，因為它們都非常容易理解，即使你不懂CSS，你大概也可以根據它們的名稱猜到它們的作用。
下列是你也會遇到的其他常用CSS屬性，可能比較難根據它們的名稱就理解它們的作用：
- Float
- Clear
- Overflow
- Text-transform
- Z-index
隨著你更深入了解網頁設計，你將會遇到(和使用)所有這些屬性，甚至更多！
屬性必須要有值
你每次使用屬性時，你都必須給一個值，且特定屬性只能接受特定的值。
在我們第一個「color」屬性的例子中，我們須要使用顏色作為值。這有可能是十六進位的值、RGB值，甚至是顏色關鍵字。
這些值的任何一個都能使用，然而，如果你在此屬性中使用「gloomy」，它將不會進行任何動作，因為儘管它是個描述性的詞，但它並非CSS公認的值。
我們第二個例子「background-image」需要一個影像路徑，以從你的網站檔案中抓取實際的影像。這就是該屬性所需要的語法。
所有CSS屬性都有各自對應的值。例如：
- Border-color的值是顏色。
- Border-size的值是尺寸，如像素(pixels)或百分比(percentages)。
- Border styles此屬性使用保留的樣式之一，像是「solid」。
如果你看過了CSS屬性列表，你將會發現每個屬性都有特定的值，它們會使用值來建立它們所要的樣式。