# How do you link CSS to HTML? Guide with examples
To format HTML attractively, the stylesheet language CSS is used. Attributes such as layout, color, and shape of individual HTML elements are defined this way. The CSS styling instructions exist independently of HTML and must first be linked to the electronic document.
## What methods are available for linking CSS to HTML?
When you include [CSS](https://www.ionos.com/digitalguide/websites/web-design/what-is-css/) in HTML, it can be done through **internal** or **external stylesheets**. Internal stylesheets place the CSS instructions directly in the HTML document. Here, you can integrate CSS **at the beginning of the HTML file** or continuously throughout the source code. This method benefits from a good [basic understanding of HTML](https://www.ionos.com/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/) and its syntax.
However, the most common and cleanest method in website development is using external CSS stylesheets. This method involves linking the HTML document with an external CSS file. Below, we provide an overview of the three methods:
- Inline style, i.e., directly in the source code
- At the beginning of the HTML document
- Outsourced to an external CSS file
## Include CSS with inline style
With this approach, styling instructions are placed directly within the source code using the `style` attribute. The defined properties apply only to a single [HTML element](https://www.ionos.com/digitalguide/websites/web-development/html-element/), making it easy to give individual elements different designs within the same HTML document. In the example below, the `h1` heading is styled to appear in blue with a font size of 14:
```html
This is a heading
```
When you include CSS this way, you lose many of its strengths. For example, you can’t set a single rule that targets every `h1` in the document. It also increases maintenance, since changes must be made directly in the HTML.
## Include CSS at the beginning of HTML
In this method, you place the CSS in the `head` section of your HTML document. The `style` tag is added inside the `head` element and applies to the entire file. The [CSS styling instructions](https://www.ionos.com/digitalguide/websites/web-design/css-coding-made-easy/) are still located within the same document but are more clearly separated from the HTML code. In the example below, the same styling as before is used—this time applying to all `h1` headings throughout the file.
```html
This is a heading
This is a paragraph.
hash_c20f5567a6bb6fe07ee71f91a05710762c504631
```
## Integrate CSS with an external file
This is generally the best method to include CSS in HTML. Since a website often consists of many pages, it makes sense to store all styling instructions in a separate file. This approach keeps content and design clearly separated and makes ongoing maintenance much easier. The external file is simply linked to the HTML document. Save the stylesheet with the extension *.css* and use a `link` tag to include it in your HTML file. In the example below, the CSS file is named “stylesheet.css”.
```html
This is a heading
This is a paragraph.
hash_c20f5567a6bb6fe07ee71f91a05710762c504631
```
The `rel` attribute specifies the relationship between the HTML document and the linked file, while `href` points to the CSS file to be embedded. The *link* element can also include other attributes—for example, the `media="print"` property specifies that the stylesheet should be used only for the print view. The external stylesheet itself contains no [HTML tags](https://www.ionos.com/digitalguide/websites/web-development/html-tags/), only selectors and curly brackets with declarations, as shown in the following example:
```css
h1 {
color: blue;
font-size:14px;
}
```
## The most common new CSS features
Alongside these classic methods of linking CSS to HTML, numerous new features have emerged in recent years, making website design far more flexible. Modern selectors like `:has()` let you target parent elements based on their children, while **container queries** allow individual components to adapt to their container size rather than the overall window width. These and other innovations make it easier to create modular, dynamic, and user-friendly designs without depending on complex workarounds or JavaScript.
### CSS pseudo-class `:has()`
It is a **parent selector** that can tie predefined styles to specific conditions. For instance, a field can be colored red for invalid input and green for valid input:
```css
.form-group:has(input:invalid) {
border: 2px solid red;
}
.form-group:has(input:valid) {
border: 2px solid green;
}
```
### Container queries
Container queries let CSS rules respond not only to the size of the entire browser window (as with [CSS media queries](https://www.ionos.com/digitalguide/websites/web-design/css-media-queries/)), but also to **the size of the surrounding container**.
This means each module or component can adapt individually based on the available space in its parent element. This enables **modular, truly flexible** [responsive web design](https://www.ionos.com/digitalguide/websites/web-design/what-is-responsive-design/) that works independently of the window width. For example, you can set cards with images and text to display **side by side in a row** once their surrounding container is wide enough.
If the container is narrower than a specified value—in this example 400 pixels—the default display remains.
```css
@container (min-width: 400px) {
.card { flex-direction: row; }
}
```
### CSS nesting
CSS nesting allows **selectors to be placed directly inside other selectors**, similar to how it works in SCSS or [LESS CSS](https://www.ionos.com/digitalguide/websites/web-development/less-css-tutorial/).
This makes the code more organized by grouping related styles together instead of repeatedly writing long selector chains. In this example, all buttons share the same base style, and depending on the additional class (`primary` or `secondary`), they receive a different look:
```css
button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background: blue;
color: white;
}
&.secondary {
background: gray;
color: black;
}
}
```
### New color functions
With new CSS functions like `color-mix()` or `light-dark()`, you can dynamically mix colors directly in the stylesheet or automatically select variants based on brightness. This allows you to create color transitions, themes, or dark mode adjustments without pre-calculating fixed color values.
This makes CSS more flexible, as colors can be **calculated and adjusted** rather than simply set as static values. In this example, the background color of all elements with the class `.btn` is defined using the `color-mix()` function to create a 50:50 mix of red and blue, resulting in purple.
```css
.btn {
background: color-mix(in srgb, red 50%, blue);
}
```
### Scroll Snap
Scroll Snap is a CSS feature that lets elements **automatically “snap” to specific positions** while scrolling. It’s useful for creating image galleries, carousels, or page sections that neatly stop at a defined point during scrolling.
This provides smooth and user-friendly navigation. In the following example, the parent container `.slider` scrolls **horizontally** (`x`) and makes snapping **mandatory**. Each child element `.slide` aligns so that it **snaps to the start of the container** (`start`) when scrolling.
```css
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}
```
This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-design/linking-css-to-html/](https://www.ionos.com/digitalguide/websites/web-design/linking-css-to-html/) for AI/LLM consumption.