網站建設的絕大部分都是關于文檔的樣式，不過它還提供了很多有用的界面樣式工具，而不僅僅面向文檔。例如，Mozilla開發人員使用一種名為XUL的語言創建Mozilla瀏覽器（以及許多Mozilla產品）的界面。XUL就利用CSS和類CSS聲明來提供導航按鈕、邊欄頁、對話框、狀態框以及chrome本身的其他部分。

類似地，可以重用用戶默認環境的某些方面來設置文檔的字體和顏色樣式，甚至可以對焦點強調和鼠標光標施加影響。CSS2的界面功能會讓用戶有更愉快的體驗，不過如果使用不當，也可能造成用戶更混亂。

系統字體和顏色

有時你可能希望在網頁設計時自己的文檔能盡可能地模仿用戶的計算環境。如果你在創建基于Web的應用，目標是讓Web組件看上去是用戶操作系統中的一部分，這就是一個顯而易見的例子。盡管CSS2不允許在自己的文檔中重用操作系統外觀的任何一個方面，不過有一組豐富的顏色和有限的字體可供選擇。

系統字體

假設已經創建了一個元素（例如通過JavaScript實現），其功能相當于按鈕?？梢宰屵@個控件看上去就像是用戶計算環境中的一個按鈕，從而滿足用戶對控件外觀的期望，相應地使控件更為有用。為了達到這個目的，只需編寫以下規則：

a.widget {font: caption;}

這會為class為widget的所有元素設置字體，使之與有標題控件（如按鈕）中的文本使用同樣的字體系列、字體大小、字體加粗、字體風格以及字體變形。

CSS2定義了6個系統字體關鍵字。分別描述如下：

caption

由標題控件使用的字體樣式，如按鈕和下拉控件。

icon

操作系統圖標標簽所用的字體樣式，如硬盤驅動器。文件夾和文件圖標。

menu

下拉菜單和菜單列表中文本使用的字體樣式。

message-box

對話框中文本使用的字體樣式。

small-caption

由標題小控件的標簽使用的字體樣式。

status-bar

窗口狀態條中文本使用的字體樣式。

有一點很重要，要認識到這些值只能用于font屬性，它們本身就是簡寫形式。例如，假設一個用戶的操作系統將圖標標簽顯示為10像素的Geneva字體，而且沒有加粗、沒有斜體，也沒有小型大寫字母效果。這意味著以下3個規則都是等價的，其結果如下所示：

body {font: icon;}

body {font: 10px Geneva;}

body {

font-weight: normal;

font-style: normal;

font-variant: normal;

font-size: 10px;

font-family: Geneva;

}

因此像icon這樣一個簡單值實際上包含了很多其他的值。這在網站建設中很特別，所以使用這些值比平常要稍微復雜一些。

舉例來說，假設你希望使用圖標標簽的字體樣式，不過還希望將這個字體加粗，盡管用戶系統中的圖標標簽本身可能不是粗體。為此，需要按以下順序聲明規則：

body {font: icon; font-weight: bold;}

如果聲明按這個順序寫，第一個聲明會讓用戶代理將body元素的字體設置為與圖標標簽一致，然后利用第二個聲明修改該字體的加粗。如果把順序倒過來，font聲明的值會覆蓋以上第二個聲明的font-weight值（譯注1[1]），這就會丟掉加粗聲明。簡寫屬性（如font）也是用類似的方式處理。

你可能想知道，為什么這里沒有通用字體系列，因為在設計網頁時，通常都建議創作人員指定字體時要采用類似Geneva, sans-serif；的形式（以防用戶瀏覽器不支持所指定的字體）。CSS 不要求“添加”通用字體系列，不過在這種情況下也沒有這個必要。如果用戶代理想要“抽取”計算環境中顯示某種元素所用的字體系列，就絕對能保證這種字體對瀏覽器一定可用。

如果所需的系統字體樣式不可用或者無法確定，用戶代理可以在一組近似的字體樣式中猜測。例如，可以這樣近似small-caption：取caption的字體樣式，再縮小字體的大小。如果無法做出這樣的猜測，用戶代理就應當使用一種“用戶代理默認字體”。