首先打開電腦上自帶的記事本程序，然後輸入html網頁基本結構語句。<html><body></body></html>
由於css樣式必須在標簽<head></head>之間，因此我們點擊<html>後面，輸入<head></head>標簽。
在head標簽之間輸入樣式標簽<style></style>,然後定義壹些屬性，例如
<style type="text/css">
body {background-color: yellow} 定義網頁背景色為黃色；
h1 {background-color: #00ff00} 定義h1標簽背景色為#00ff00；
h2 {background-color: transparent} 定義h2標簽背景色為透明；
p {background-color: rgb(250,0,255)} 定義p標簽背景色為rgb值；
p.no2 {background-color: gray; padding: 20px;} 這個定義class屬性為no2的p標簽背景色為灰色，並且邊距為20px；
</style>
然後點擊body標簽後面輸入正文標簽內容，例如
<h1>這是KING</h1>
<h2>這是KING</h2>
<p>這是KING</p>
<p class="no2">這個KING設置20內邊距。</p>
點擊記事本菜單中的文件，選擇另存為，把內容保存為html網頁格式。雙擊打開預覽效果。
我們可以發現代碼中兩個同樣的<p>標簽顯示的css樣式卻不同，區別就在於樣式中定義的p.no2,這就是正文代碼中class="no2"的優勢所在，可以定義個性風格。
還可以選擇用html設置，如下：
顏色自己調，可以用取色器查看顏色，例如background-color:#789999; 如果需要加邊框可以用border屬性