前半章的練習裡，您看到了PHP網頁內有一組標籤為< ? ?>，這是PHP所使用的標籤，代表這樣的的語法會先由Web Server先執行分析後完這一個標籤區塊後，再將資料送到瀏覽器上顯示。除了< ? ?>區塊外，其他的<>代表什麼意思？
<>代表的是網頁的標籤，網頁就是由這些標籤組合起來的，透過瀏覽器的解釋，就可以透過瀏覽器呈現出來了。一個網頁基本上的結構如下：
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>網頁的主題</title> </head><body> 在瀏覽器上呈現的部分 </body></html>
【圖14 網頁的基本架構】
您會看到網頁標籤呈現巢狀的結構，像鳥巢似的一層包一層，每一層都有起始標籤與結束標籤。最外面一層是<html>及</html>，這代表網頁的開始與結束，接者您可看到<head>與</head>，這區域可放入網頁的各種起始設定，而<body>與</body>內這一個區域通常是最大的區域，這區域內放置的標籤，是可以在瀏覽器上顯示。
瞭解了網頁基本架構後，我們在網頁上輸入幾個文字，並且加入了<font></font>這個標籤，我們就可藉此訂定網頁上文字的相關屬性。例如：
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>網頁裡顯示文字</title> </head><body> <table width="40%" border="1"> <tr><td><font>PHP圖書</font></td></tr> <tr><td><font>歡迎來到php6的世界</font><br> 沒有font標籤的文字會如何顯示呢？</td></tr> </table></body></html>
【圖15 沒有使用樣式表的網頁】
但因網頁內並未做<font></font>這一個標籤格式化的設定，所以網頁上的文字目前是沒有差異。若<font></font>標籤內的文字欲改為9pt大小，那該如何做呢？
第一種作法，就是您直接修改<font></font>標籤的設定，如此一來<font></font>這個區塊內的文字全變成9pt。可是如果日後想要改為12pt，您又得再改一次網頁標籤語法。而且，若網頁內夾雜圖片(img)、表格(table)或圖層(div)，網頁內的文字會分成多個區塊，會有很多<font></font>標籤，每一個都改實在費事。
第二種作法是透過樣式表的設定，針對<font></font>這一個標籤進行設定。各位可看看以下的網頁，新增了<style type="text/css"></style>到<style></style>這一個區塊，這個網頁會產生什麼變化呢？
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>網頁裡顯示文字css</title>
<style type="text/css">
font { font-size:9pt }
</style>
</head><body>
<table width="40%" border="1"><tr>
<td><font>PHP圖書</font></td></tr>
<tr><td><font>歡迎來到php6的世界</font><br>
沒有font標籤的文字會如何顯示呢？</td></tr>
</table></body></html>
您會發現到文字大小全都改變了，只要設定好標籤的樣式，使用這個標籤的區塊就會產生變化。所以，由此可知，CSS的目的就是「重新定義網頁標籤的各種屬性」
【圖16 加上樣式表的網頁：可以看到使用<font></font>的區域內的文字都會改變大小】
