CSS（Cascading Style Sheets）負責網頁的視覺呈現：顏色、字體、排版、間距、動畫。如果 HTML 是骨架，CSS 就是皮膚和衣服。
✨ Before / After
同樣的 HTML 內容，加上 CSS 之後完全不一樣。
手沖咖啡 · 自製甜點 · 安靜空間
手沖咖啡 · 自製甜點 · 安靜空間
寫 CSS 的時候，你要先「指定」想改的元素，然後才寫樣式。這個「指定」的動作就是選擇器。
假設你有這段 HTML：
你想把 <h1> 變紅色，CSS 就這樣寫：
這是一段文字
這是重點文字
h1 就是選擇器——它告訴瀏覽器「去找到 <h1>，然後套用大括號裡的樣式」。
如果你只想改有 class="highlight" 的那個 <p>，用 .highlight（前面加一個點）：
這是一段文字
這是重點文字
簡單說：選擇器就是「CSS 的瞄準器」。你先瞄準要改的元素，再寫要改什麼。用標籤名稱（h1、p）可以選到所有同類元素，用 class（.highlight）可以精準選到特定元素。
下方的 CSS 可以直接編輯，右邊的預覽會即時更新。
任務：把 h1 改成藍色，再幫 .highlight 加上 font-size: 20px
這是一段文字
這是重點文字
💡 試試改 color、background、font-size、font-weight，看看預覽怎麼變。
掌握字體、色彩、排版三個面向，就能讓網頁從「能看」變成「好看」。
不同的字體傳達不同的感覺，點擊切換看看效果。
設計不是裝飾，是溝通的方式。
無襯線字體，線條乾淨俐落。現代網頁最常用。
60% 主色、30% 輔色、10% 強調色。試試不同的預設配色方案。
字體大小和粗細決定閱讀順序，標題最大、內文次之、說明最小。
主標題
副標題
段落標題
這是一般的內文段落，適當的行高讓閱讀更舒適。
輔助說明文字、標籤、日期等次要資訊。
排版小技巧
標題和內文的大小比例建議 1.5 倍以上
中文行高建議 1.6 ~ 1.8，比英文稍大
每行控制在 25-35 個中文字最舒適
不確定配色？黑白灰 + 一個強調色永遠不出錯
Vibe Coder 重點
你不需要背 CSS 屬性，但要知道 CSS 能控制三件事：字體（選對類別傳達正確的感覺）、顏色（60-30-10 法則不出錯）、排版（大小粗細建立層級）。 跟 AI 說「標題用黑體 24px 粗體，配色用深藍底白字加橘色強調」，比「幫我弄好看一點」精準一百倍。