字型大小：font-size，設定值 16px 像素，是大部份網站基本字型大小單位

字型大小：font-size，另一個常用設定值是 1rem，也就等於 16px像素

範例：

<style type="text/css">
#a1{ font-size: 16px; }
#a2{ font-size: 20px; }
#a3{ font-size: 24px; }
</style>

<p id="a1">今天天氣不錯</p>
<p id="a2">今天天氣不錯</p>
<p id="a3">今天天氣不錯</p>

效果展示：

今天天氣不錯

今天天氣不錯

今天天氣不錯

範例：

<style type="text/css">
#b1{ font-size: 1rem; }
#b2{ font-size: 2rem; }
#b3{ font-size: 3rem; }
</style>

<p id="b1">今天天氣不錯</p>
<p id="b2">今天天氣不錯</p>
<p id="b3">今天天氣不錯</p>

效果展示：

今天天氣不錯

今天天氣不錯

今天天氣不錯

寫法：font-weight: bold;

範例：

<style type="text/css">
#c1{ 
    font-size: 2rem; 
    font-weight: bold; 
}
</style>

<p id="c1">今天天氣不錯</p>

效果展示：

今天天氣不錯

寫法：font-style: italic;

範例：

<style type="text/css">
#d1{ 
    font-size: 2rem; 
    font-style: italic;
}
</style>

<p id="d1">今天天氣不錯</p>

效果展示：

今天天氣不錯

寫法：font-family: verdana, "微軟正黑體";

英文字型有半形空白的和中文字型，都要加上雙引號

範例1：

<style type="text/css">
#e1{ 
    font-size: 2rem; 
    font-family: verdana, "微軟正黑體";
}
</style>

<p id="e1">Good morning! 今天天氣不錯</p>

效果展示：

Good morning! 今天天氣不錯

範例2：

如果有需要用到外部字型，可以使用語法載入外部字型

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style type="text/css">
#k1{ 
    font-size: 2rem;
    font-family: "Sofia";       /* 字型名稱 */
}
</style>

<p id="k1">Good morning! 今天天氣不錯</p>

效果展示：

Good morning! 今天天氣不錯

寫法：color: blue;

HTML顏色參考網站：https://htmlcolorcodes.com/zh/yanse-ming/

範例：

<style type="text/css">
#g1{ 
    font-size: 2rem; 
    font-family: verdana, "微軟正黑體";
    color: blue;
}
#f2{ 
    font-size: 2rem; 
    font-family: verdana, "微軟正黑體";
    color: #ff6633;
}
</style>

<p id="f1">Good morning! 今天天氣不錯</p>
<p id="f2">Good morning! 今天天氣不錯</p>

效果展示：

Good morning! 今天天氣不錯

Good morning! 今天天氣不錯

寫法：line-height: 100px;

範例：

<style type="text/css">
#g1, #g2, #g3{ 
    font-size: 2rem; 
    font-family: verdana, "微軟正黑體";
    line-height: 100px;
    border: 1px solid gray;
}
</style>

<p id="g1">Good morning! 今天天氣不錯</p>
<p id="g2">Good morning! 今天天氣不錯</p>
<p id="g3">Good morning! 今天天氣不錯</p>

效果展示：

Good morning! 今天天氣不錯

Good morning! 今天天氣不錯

Good morning! 今天天氣不錯