HTML是網頁制作的基礎，但是單純的HTML頁面往往缺乏美感，為此，CSS作為一種樣式表語言被引入。CSS可以為HTML頁面添加各種各樣的樣式效果，從而讓網頁更為美觀。

/* 在CSS中寫出樣式規則 */
p {
color: red; /* 修改字體顏色為紅色 */
font-size: 20px; /* 修改字體大小為20像素 */
font-family: Arial, sans-serif; /* 設置字體為Arial或者sans-serif字體 */
background-color: yellow; /* 修改背景顏色為黃色 */
padding: 10px; /* 設置文本填充為10像素 */
margin: 20px; /* 設置外邊距為20像素 */
border: 1px solid black; /* 設置邊框為1像素的黑色實線 */
}

使用CSS美化頁面的方式有很多，比如修改背景顏色、改變字體大小和顏色、調整文本對齊方式、添加邊框等等。大多數情況下，只需要為每個HTML元素添加一個對應的CSS選擇器，就可以對其應用對應的樣式。需要注意的是，對于相同的樣式屬性，后面的樣式規則將覆蓋之前的規則。

通過運用CSS樣式，我們可以創造出各種各樣的漂亮效果，例如制作導航欄、創建按鈕、設置動畫等。同時，在應用CSS樣式時，我們應該保持選擇器的簡潔，避免使用過多的ID選擇器或者全局選擇器，同時也避免使用不必要的樣式規則，可以使用CSS預處理器簡化CSS代碼。

/*使用CSS預處理器SASS簡化CSS*/
$p-color: red;
$p-font-size: 20px;
$p-font-family: Arial, sans-serif;
$p-background-color: yellow;
$p-padding: 10px;
$p-margin: 20px;
$p-border: 1px solid black;
p {
color: $p-color;
font-size: $p-font-size;
font-family: $p-font-family;
background-color: $p-background-color;
padding: $p-padding;
margin: $p-margin;
border: $p-border;
}

在開發現代化網站時，CSS是不可或缺的一部分。通過使用CSS美化網頁，可以使得網頁更加生動、吸引眼球。一旦掌握了CSS樣式的運用規則，便可以創造出自己的風格，打造出自己理想中的網站。