在HTML中编写CSS的方法有多种，以下是一些常见的方法：
1、内联样式：在HTML元素的style属性中直接编写CSS代码，这种方法的优点是可以直接修改元素的样式，但缺点是代码冗余，不利于维护。
<p style="color: red; font-size: 20px;">这是一个红色的段落。</p>
2、内部样式：在HTML文档的<head>标签内使用<style>标签编写CSS代码，这种方法的优点是可以将样式与HTML内容分离，但缺点是只能影响同一HTML文档内的其他元素。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
<p>这是另一个红色的段落。</p>
</body>
</html>
3、外部样式：将CSS代码保存在一个单独的文件中，然后在HTML文档中使用<link>标签引入该文件，这种方法的优点是可以实现样式的复用和维护，但需要额外的文件操作。
创建一个名为styles.css的CSS文件：
p {
color: red;
font-size: 20px;
}
在HTML文档中使用<link>标签引入该文件：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>这是一个红色的段落。</p> <p>这是另一个红色的段落。</p> </body> </html>
4、使用CSS类：在HTML元素上添加一个或多个类名，然后在CSS文件中定义这些类的样式，这种方法可以实现样式的复用和灵活调整。
在HTML文档中为元素添加类名：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p class="red-text">这是一个红色的段落。</p> <p class="red-text">这是另一个红色的段落。</p> </body> </html>
在CSS文件中定义这些类的样式：
.red-text {
color: red;
font-size: 20px;
}
5、使用CSS ID：在HTML元素上添加一个唯一的ID，然后在CSS文件中定义这个ID的样式，这种方法可以实现对单个元素的精确控制，但不建议频繁使用，以免增加代码复杂度。
在HTML文档中为元素添加ID：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p id="unique-paragraph">这是一个红色的段落。</p> <p id="unique-paragraph">这是另一个红色的段落。</p> </body> </html>
在CSS文件中定义这个ID的样式：
#unique-paragraph {
color: red;
font-size: 20px;
}