Suggest an edit

Improve this article

Refine the answer for “What does the <link> tag do? How is CSS linked?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `<link>` tag is used to **connect an HTML document to external files**.
It is most often used to **link CSS stylesheets**, which define the page's styling: colors, fonts, spacing, background, animations, and so on.

---

### 1. General syntax of the `<link>` tag

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

Breakdown:

- `rel="stylesheet"`: specifies the link type: this is a stylesheet;
- `href="style.css"`: the path to the CSS file (can be relative or absolute);
- `<link>`: a **void tag** (it has no closing tag).

---

### 2. Where it is placed

The `<link>` tag is always placed **inside the** `<head>` **block**,
so the browser loads the styles **before rendering the page**:

```html
<head>
  <meta charset="UTF-8">
  <title>My site</title>
  <link rel="stylesheet" href="style.css">
</head>
```

---

### 3. Example of linking CSS

#### External file:

```html
<link rel="stylesheet" href="styles/main.css">
```

This approach is preferred:

- the styling code is separated from HTML,
- the CSS file can be reused across multiple pages,
- the page is cached faster by the browser.

#### Absolute path:

```html
<link rel="stylesheet" href="https://example.com/css/main.css">
```

Used when linking external libraries (for example, Bootstrap).

#### Multiple files:

```html
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="media.css">
```

Order matters: **the last file can override the previous ones**.

---

### 4. Attributes of `<link>`

| Attribute | Purpose | Example |
|---|---|---|
| `rel` | Defines the link type | `rel="stylesheet"` |
| `href` | Path to the file | `href="style.css"` |
| `type` | MIME type (optional) | `type="text/css"` |
| `media` | Which devices/screens to apply it to | `media="screen and (max-width: 768px)"` |
| `as` | For preloading (`rel="preload"`) | `as="style"` |

---

### 5. How linking CSS works

1. The browser loads the HTML.
2. It reaches `<head>`.
3. It sees `<link rel="stylesheet" href="style.css">`.
4. It loads the CSS file and applies the styles to the DOM.
5. After that, it renders the page with the styling.

---

### Summary:

| Property | Description |
|---|---|
| Tag | `<link>` |
| Type | Void |
| Main purpose | Linking external resources (primarily CSS) |
| Location | Inside `<head>` |
| Key attributes | `rel`, `href`, `media` |
| Importance | Critical for styling and structure |

---

**In simple terms:**
`<link>` tells the browser:

> "Take this file and use it to style the page."

And **CSS is linked exactly through it**, so the page looks not like bare HTML, but like a fully styled site.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts412 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.