在HTML中加入CSS的方法有很多，这里我将介绍两种常见的方法：内联样式和外部样式表。
1、内联样式
内联样式是指在HTML元素中使用style属性来定义样式，这种方法的优点是简单易用，但缺点是样式与HTML代码紧密耦合，不利于维护。
<!DOCTYPE html>
<html>
<head>
<title>内联样式示例</title>
</head>
<body>
<h1 style="color: red; font-size: 24px;">这是一个标题</h1>
<p style="color: blue; font-weight: bold;">这是一个段落。</p>
</body>
</html>
2、外部样式表
外部样式表是指将CSS代码放在一个单独的文件中，然后在HTML文件中通过<link>标签引用该文件，这种方法的优点是样式与HTML代码分离，便于维护，创建一个名为styles.css的文件，并在其中编写CSS代码：
/* styles.css */
h1 {
color: red;
font-size: 24px;
}
p {
color: blue;
font-weight: bold;
}
在HTML文件中通过<link>标签引用该文件：
<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
除了这两种方法外，还可以使用JavaScript动态地修改元素的样式，可以使用element.style.property = value;语法来改变元素的样式，这种方法的优点是可以在运行时动态地改变样式，但缺点是需要编写额外的JavaScript代码。