What does the <link> tag do? How is CSS linked?
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
<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:
<head>
<meta charset="UTF-8">
<title>My site</title>
<link rel="stylesheet" href="style.css">
</head>3. Example of linking CSS
External file:
<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:
<link rel="stylesheet" href="https://example.com/css/main.css">Used when linking external libraries (for example, Bootstrap).
Multiple files:
<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
- The browser loads the HTML.
- It reaches
<head>. - It sees
<link rel="stylesheet" href="style.css">. - It loads the CSS file and applies the styles to the DOM.
- 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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.