1. **创建 CSS 文件**：
首先，在您的项目目录下新建一个 `.css` 格式的文件。例如： `styles.css`. 在此 CSS 文件中编写您需要定义的所有样式规则。
css
/* styles.css */
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
}
2. **链接到 HTML 文档**：
然后在对应的 HTML 页面头部（通常位于 `<head>`标签内）使用 link 元素来引用这个外部 CSS 文件。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>Hello World!</h1>
...
</body>
</html>
上述代码中的关键部分是通过 `<link>` 标签将 CSS 和 HTML 关联起来。这里有几个要点需要注意:
- 使用了 `rel` 属性，并将其值设置为 "stylesheet". 这表明我们正在关联的是样式表。
- 利用了 `href`属性指定要导入CSS文件的位置。路径应相对于当前HTML文档位置进行填写；在此例中，“./”表示同级目录下的“styles.css”。
3. **应用样式效果**:
一旦完成了以上两步操作，当浏览器解析该 HTML 文件时就会加载相应的 CSS 规则并对元素施加样式。如上示例所示，所有 h1 元素的颜色将会变为蓝色，而整个 body 的背景色会变成浅灰色(#f0f0f0)。
总结一下，为了能在 HTML 中有效且正确的引入及调用 CSS 文件，我们需要分别创建、编辑好 CSS 文件以及在其 HTML 相关源码中标记合适的<link>标签指向 CSS 资源地址即可生效对应样式设定。