To format HTML attractively, the stylesheet language CSS is used. Attributes such as layout, colour, 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.

Web hosting
The hosting your website deserves at an unbeatable price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced protection
  • Only at IONOS: up to 500 GB included

What methods are available for linking CSS to HTML?

When you include 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 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
Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI assistance
  • Create captivating images and texts in seconds
  • Domain, SSL and email included

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, 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:

<h1 style="color: blue; font-size: 14px;">This is a heading</h1>
html

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 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.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue; font-size: 14px;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
html

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’.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
html

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, only selectors and curly brackets with declarations, as shown in the following example:

h1 {
color: blue;
font-size:14px;
}
css

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 coloured red for invalid input and green for valid input:

.form-group:has(input:invalid) {
    border: 2px solid red;
}
.form-group:has(input:valid) {
    border: 2px solid green;
}
css

Container queries

Container queries let CSS rules respond not only to the size of the entire browser window (as with 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 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.

@container (min-width: 400px) {
    .card { flex-direction: row; }
}
css

CSS nesting

CSS nesting allows selectors to be placed directly inside other selectors, similar to how it works in SCSS or LESS CSS.

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:

button {
    padding: 0.5rem 1rem;
    border: none;
    &.primary {
        background: blue;
        color: white;
    }
    &.secondary {
        background: gray;
        color: black;
    }
}
css

New colour functions

With new CSS functions like color-mix() or light-dark(), you can dynamically mix colours directly in the stylesheet or automatically select variants based on brightness. This allows you to create colour transitions, themes, or dark mode adjustments without pre-calculating fixed colour values.

This makes CSS more flexible, as colours can be calculated and adjusted rather than simply set as static values. In this example, the background colour 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.

.btn {
    background: color-mix(in srgb, red 50%, blue);
}
css

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.

.slider {
    scroll-snap-type: x mandatory;
}
.slide {
    scroll-snap-align: start;
}
css
Was this article helpful?
Go to Main Menu