---
# System prepended metadata

title: HTML如何跟CSS搭配使用
tags: ['HTML, CSS']

---

# HTML如何跟CSS搭配使用

---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`

1.Inline CSS
An inline CSS is used to apply a unique "style" to **a single HTML element**.
**
An inline CSS **uses the style attribute of an HTML element**.

The following example sets the text color of the element to blue, and the text color of the element to red:

```
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
```

------
2.Internal CSS

An internal CSS is used to define a style for a **single HTML page**.

An internal CSS is **defined in the head section of an HTML page**, within a style element.

The following example sets the text color of ALL the h1 elements (on that page) to blue, and the text color of ALL the p elements to red. In addition, the page will be displayed with a "powderblue" background color: 

```
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```

------------

3.External CSS

An external style sheet is used to define the style for **many HTML pages**.

To use an external style sheet, **add a link to it in the head section of each HTML page**:

```
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```