style
#header {background-color:yellow;font-size:20px;}
.title-text {color:red;}
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.br1 {color:red;border: 2px}
.br2 {font-size:20px;float:left;}
.br3 {color:blue;font-size:30px;float:left;}
body
<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>
นิยามศัพท์
px (Pixels) คือ หน่วยสำหรับวัดการแสดงผลบนหน้าจอ (Screen) โดย 1 Pixel เท่ากับ 1 จุดบนหน้าจอ
pt (Points) คือ หน่วยสำหรับสื่อสิ่งพิมพ์ ที่ต้องการพิมพ์บนกระดาษ (Paper) โดย 1 Point มีค่าเท่ากับ 1/72 นิ้ว
em หรือ rem (Root Element) คือ หน่วยที่เป็นจำนวนเท่าที่กำหนดไว้ในระดับบนสุด (Default pixel size)
ปกติ 1em =16px เทียบกับ Parent ที่ใกล้สุด
แต่ 1rem =16px โดยอ้างอิงจากค่า Root ของโฮมเพจ
ดังนั้นถ้า Root ของโฮมเพจกำหนดขนาดตัวอักษรเป็น 10px ก็จะได้ว่า 1rem=10px
html { font-size: 62.5%; } /* 16 x 0.625 =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
