以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):

1. 設定網誌背景 (圖片與顏色)
透過 body 內的 background 屬性設定，例如：
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */

2. 設定網誌文字 (字型、大小與顏色)
透過 body 內的 font-family、font-size 與 color 屬性設定。例如：
body {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

3. 設定網誌位置 (置左、置中、置右)
透過 body 內的 text-align 屬性設定置左(left)、置中(center)、置右(right)。例如：
body { text-align: left;} /* 網頁置左 */

4. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定，來控制標題的顏色或圖片。例如：
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */

5. 設定標題文字 (字型、大小與顏色)
透過 #bannerTitle 中 font-family、font-size 與 color 屬性設定。例如：
#bannerTitle {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

6. 設定副標題文字 (字型、大小與顏色)
透過 #bannerNote 中 font-family、font-size 與 color 屬性設定。例如：
#bannerNote {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

7. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定，來控制標題圖片的長與寬。例如：
#banner {
    width: 1000px;
    height: 100px;
}

8. 設定選單區塊圖片 (顏色、圖片)
透過 .navi 內的 background 屬性設定，變更選單區塊顏色或圖片。例如：
.navi { background:#000000; } /* 將連結圖設成黑色 */
.navi { background:url(圖片網址); } /* 將圖片網址設成連結圖 */

9. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過 .naviOver 內的 background 屬性設定，變更選單區塊滑鼠經過時的顏色或圖片。例如：
.naviOver { background:#000000; } /* 將連結圖設成黑色 */
.naviOver { background:url(圖片網址); } /* 將圖片網址設成連結圖 */

10. 設定連結文字 (字型、大小與顏色)
更改背景後，連結文字可能因為顏色相近的關係看不太清楚，透過 a 中的 font-family、font-size 與 color  屬性設定變更。例如：
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /*  滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */

11. 設定側欄標題文字 (字型、大小與顏色)
透過 .menuBlockTitle 中加入 font-family、font-size 與 color 屬性設定。
例如：
.menuBlockTitle  {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

12. 設定側欄中非連結文字 (字型、大小與顏色)
透過 .menuBlockBody 中 font-family、font-size 與 color 屬性設定。例如：
.menuBlockBody {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

13. 設定 logo 位置
透過 #bannerTitle 中 left、top 的屬性設定，可改變上標題 logo 的位置。例如：
#bannerTitle { left:10px; top:10px; } /* 左上各平移10px */

14. 設定選單位置
透過 #navi 中的 left、top 的屬性設定，例如：
#navi { left:10px; top:10px; } /* 左上各平移10px */

15. 設定文章的標題文字 (字型、大小與顏色)
透過 .Subject 中 font-family、font-size 與 color 屬性設定。例如：
.Subject {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

設定文字字體
Tag: font-family
範例：body { font-family:arial; } /* 字型設為arial */

設定文字大小
Tag: font-size
body { font-size:15px; } /* 文字大小設為15px */

設定文字粗細
Tag: font-weight
設定值：從100到900，也可設定為厚 bold 、較厚 bolder 、及正常 normal
範例：body { font-weight:bold; } /* 字體設為粗體 */

設定字體是否為斜體字
Tag: font-style
設定值：斜體 italic
範例：body { font-style:italic; } /* 字體設為斜體 */

設定文字顏色
Tag: font-weight
範例：body { color:#ff0000; } /* 文字設為紅色 */

設定邊框樣式
Tag: border-style
設定值：實線 solid 、虛線 dashed 、雙線 double)、點線 dotted 、凹線 groove 、凸線 ridge 、嵌入線 inset 和浮出線 outset。範例：
table { border-style:solid; } /* 表格框線為實線 */

設定邊框厚度
Tag: border-width
設定值：薄 thin 、中等 medium 、厚 thick 或數字。範例：
table {
    border-width:medium; /* 表格邊框為中等寬度 */
    border-style:solid;  /* 表格框線為實線 */
}

設定邊框顏色
Tag: border-color
範例：
table { 
    border-color:#ff0000; /* 表格框線為紅色 */
    border-style:solid;   /* 表格框線為實線 */
}

四邊共同的屬性設定
Tag: border
範例：
table { border:#0000ff 5px solid; } /* 表格邊框為藍色、寬度5px、實線 */

特定邊框屬性設定
Tag: 上 border-top- 、左 border-left- 、下 border-bottom- 、右 border-right-
範例：
table { 
    border-top-style:dashed;    /* 上邊框為虛線 */
    border-right-color:#00ff00; /* 右邊框為綠色 */
}

a:link 屬性設定連結網頁尚未被遊覽時的連結樣式，範例：
a:link {
    color:#0000ff; /* 尚未遊覽的連結文字為藍色 */
    text-decoration:none; /* 取消下底線 */
}

a:visited 屬性設定連結已被遊覽時的連結樣式，範例：
a:visited {
    color:#ff0000; /* 已遊覽的連結文字為紅色 */
    text-decoration:none; /* 取消下底線 */
}

a:hover 屬性設定當滑鼠移動到連結上時的連結樣式，範例：
a:hover {
    font-size:15px; /* 滑鼠移到連結上字體大小變成15px */
    color:#00ff00;  /* 滑鼠移到連結上字體顏色設為綠色 */
    text-decoration:underline; /* 滑鼠移動到文字出現下橫線 */
}

a:active 屬性設定連結被點擊的連接樣式，範例：
a:active {
    color:#ff00ff; /* 被點擊時文字顏色變成紫色 */
    text-decoration:underline; /* 被點擊時文字出現下橫線 */