HTML是一種標記語言，用于構建網頁。然而，HTML本身并不包含任何關于頁面外觀的指導，這就是CSS（層疊樣式表）派上用場的地方。

CSS是HTML樣式的外部表現，它能夠控制HTML的外觀和布局，設計出更為美觀的頁面。通過CSS，我們可以改變文本的顏色、字體、大小、對齊方式，還能改變元素的尺寸、邊框、背景和位置等等，這點在pre標簽的代碼展示上也可隨心所欲地使用。

p {
color: blue;
font-size: 16px;
text-align: center;
}
#header {
background-color: gray;
height: 100px;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
background-color: black;
color: white;
display: flex;
justify-content: space-between;
padding: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: white;
text-decoration: none;
}

以上是一個簡單的CSS樣式表的示例，它定義了p元素、id為header的元素、class為navbar的元素、以及li元素和a元素的樣式。可以看到，在pre標簽中，每一個屬性都有自己的名稱和值，用“:”分隔開，并在其后加上“;”。這就是CSS的基本語法。

當我們仿照樣例代碼將其與HTML標記相結合時，頁面會按照樣式表中的定義呈現出來，達到了美化網頁的目的。還可以將CSS樣式表嵌入HTML頁面或使用外部樣式表，以便更好地管理和重用CSS代碼。