你写了一个HTML文件，浏览器把它显示成白底黑字的纯文本，像一份没排版的Word文档。这时你需要CSS——它负责“长什么样”。CSS不是编程语言，它是样式表，告诉浏览器每个元素该用什么颜色、多大字号、摆在哪里。

最直接的方式是写在HTML文件的头部，用<style>标签包裹。比如你想让所有段落变蓝：

<style> p {  color: blue; } </style>

把这段放进<head>里，刷新页面，所有<p>标签内的文字就变蓝了。这叫“内嵌样式”，适合页面少、改动不频繁的情况。但如果你有10个页面，每个页面都要改字体大小，你得复制粘贴10次——麻烦。

更常用的做法是“外部样式表”。单独建一个.css文件，比如style.css，里面写：

p {  color: blue; font-size: 18px; }

然后在HTML的<head>里用一行代码引入：

<link rel="stylesheet" href="style.css">

这样所有页面都能共用这一个文件。改一次，全站生效。我见过一些新手把CSS全堆在HTML里，结果改个按钮颜色要Ctrl+F找半天——外部文件才是正经做法。

CSS的语法本身不复杂。选择器（比如p、.class、#id）指定要装饰的HTML元素，大括号里写属性和值。属性是“改什么”，值是“改成什么样”。color是文字颜色，background-color是背景色，margin是外边距，padding是内边距。就这么几个常用词，够你应付90%的页面。

类（class）和ID是CSS里两个关键概念。类可以重复使用，ID在一个页面里只能出现一次。比如：

<p class="warning">注意！</p> <p class="warning">再次注意！</p> .warning {  color: red; font-weight: bold; }

ID则用于唯一的元素，比如导航栏或页脚：

<div id="footer">版权信息</div> #footer {  text-align: center; }

优先级方面，ID最高，类其次，标签最低。如果你写了p { color: red; }，又写了.warning { color: blue; }，那么带warning类的段落会显示蓝色——类赢过标签。这个规则叫“层叠”，CSS里的“C”就是它。别背，用多了自然记住。

还有一点容易踩坑：CSS的继承。父元素设置了字体，子元素会继承，但margin和padding不会继承。比如你在body里设了font-family: sans-serif，所有文字都会变成无衬线体；但如果你给div设了padding: 20px，里面的p并不会自动有内边距。

实际写的时候，你可以用浏览器开发者工具（F12）实时调试。选中一个元素，右侧就能看到它当前应用的CSS规则，还能直接改数值看效果。我调试页面时从来不猜，都是先改着看，满意了再复制回源码文件。

最后提醒一句：CSS文件里别写注释太多，但该写还得写。比如一段复杂的布局代码，三个月后你再看，可能完全不记得当时为什么这么写。留一行/* 左侧栏宽度固定 */，能省下不少回忆时间。

CSS没那么玄乎。打开你的HTML文件，加个<style>标签，改个颜色试试。看到页面变了，你就入门了。