CSS 檔案在 style.css ，以下依序討論各部分的 CSS 規則

首先 @font-face 是設定另外加入自訂字型的選取器

@font-face {
    font-family: "NotoSansTC-Regular";
    src: url(NotoSansTC-Regular.otf);
}

@font-face {
    font-family: "NotoSansTC-Medium";
    src: url(NotoSansTC-Medium.otf);
}

@font-face 裡的 font-family 是設定自訂的字型名稱，這字型名稱可以套用到下面的選取器之中， src 則是字型檔案的路徑。

NotoSansTC-Regular.otf 及 NotoSansTC-Medium.otf 是 Google 提供的免費字型，網址在 Google Noto Fonts 。

以上設定，底下就可以用 NotoSansTC-Regular 或 NotoSansTC-Medium 設定 font-family 。

繼續看到以下兩個 ol 選取器的設定

ol#toc li {
    list-style-type: none;
    margin-left: 1em;
    padding-left: 0;
}

ol li {
    list-style-type: cjk-ideographic;
}

ol#toc li 是指 id 為 toc 的 <ol> ，然後 <ol> 裡面的 <li> ，換言之就是以下標記碼

<nav epub:type="toc">
<ol id="toc">
    <li>項目內容</li>
</ol>
<nav>

這是用在目錄頁 toc.xhtml ，主要是將 list-style-type 設定為 none ，因此在目錄頁 toc.xhtml 中 ol 的 li 不會顯示數字，直接顯示作為目錄條列的連結。

底下將 body 的 font-family 設定為 "NotoSansTC-Regular" ，也就是開頭加入的字型檔案

body {
    font-family: "NotoSansTC-Regular";
}

然後看到的是頁首部分的 CSS

div.top {
    background-color: #464646;
    color: white;
    padding: 0.5em;
}

h1.title {
    font-size: 110%;
    line-height: 1.5em;
    margin-top: 0em;
    padding-top: 0em;
}

頁首的背景顏色 background-color 設定為 #464646 ，這是深灰色，然後將文字顏色設定為白色 white ，其他設定 padding 為 0.5em 。

至於 h1 的 title 是將 font-size 設定為 110% ， line-height 為 1.5em ，而 margin-top 與 padding-top 為 0em ，也就是縮短跟上方標題元素的距離。

下面 p 的屬性設定較多

p {
    padding: 1em;
    text-indent: 2.5em;
    line-height: 1.6em;
    word-break: break-all;
    background-image: url('udemy.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 50%;
    text-align: justify;
}

其中 text-indent 是設定首行縮排，這裡設定為 2.5em ， word-break 設定為 break-all 是顯示 <p> 時不會出現捲軸，也就是到螢幕右側如果還有文字就會斷行，下面幾個 background- 開頭的屬性都是設定背景圖片， background-image 設定背景圖檔路徑， background-repeat 設定為 no-repeat 是不重複的意思， background-position 是設定背景圖檔出現的位置， center bottom 是中央、底部的意思， background-size 設定背景圖檔的尺寸，這裡設定為 50% 表示佔據 <p> 一半的空間，最後 text-align 設定為左右對齊 justify 。

下面 p 的 information 是將首行縮排取消

p.information {
    text-indent: 0em;
}

這是因為 p 的 information 用在出版資訊頁，這裡不需要首行縮排。

繼續看到 p 的 quote

p.quote {
    font-family: "NotoSansTC-Medium";
    background-color: lightgray;
    margin-left: 2em;
    margin-right: 2em;
    padding-left: 3em;
    padding-right: 3em;
    text-indent: 0em;
    font-weight: bold;
}

這裡 font-family 設定為 "NotoSansTC-Medium" ，背景顏色 background-color 為 lightgray ，這是淺灰色，其他設定 margin 及 padding ，然後 text-indent 為 0em ， font-weight 設定為 bold 粗體。

頁尾 p 的 end ，設定上跟頁首 top 雷同

p.end {
    background-color: #464646;
    text-indent: 0.5em;
    color: white;
    background-image: none;
}

以上主要是把 text-indent 改成 0.5em ，然後將 background-image 改成 none ，也就是取消背景圖片。

下面繼續看到連結 <a> 元素的 CSS

a:link {
    color: black;
    padding-right: 0.2em;
    border-right: 1px black dotted;
    text-decoration: none;
}

a:visited {
    color: black;
}

sup a:link {
    color:red;
    border: none;
}

sup a:visited {
    color: red;
}

a:link 表示還沒有點擊過的連結， a:visited 則是點擊過的連結，兩者的文字顏色 color 都是 black ，也就是點擊前後顏色不會改變，同樣下面 sup a:link 跟 sup a:visited 的 color 都是 red ，其他不同的是 a:link 設定了 border-right ，因為 border-right 就多設定 padding-right ，下面 sup a:link 則是把 border-right 設定為 none ，也就是取消右側的邊框。

span 的 name 用來設定 text-decoration 為 underline ，也就是底線私名號

span.name {
    text-decoration: underline;
}

CSS 檔案最後的 .note 是設定頁面中的「註」

.note {
    margin: 1.5em;
    line-height: 1.7em;
    text-indent: 0em;
    border-radius: 1.2em;
    border: 2px solid gray;
    padding: 1em;
    height: auto;
    word-break: break-all;
}

.note:before {
    content: "註";
    background-color: gray;
    color: white;
    padding: 0.2em;
    margin-right: 0.5em;
}

其中 border-radius 是讓 border 有圓角效果， 而 .note:before 是指出現在區塊元素前的文字或符號，其內的 content 就是設定出現的文字為「註」。

接下來進入中文直書篇，討論將這本《西遊記》範例書改成中文直書。