To format HTML at­tract­ively, the stylesheet language CSS is used. At­trib­utes such as layout, colour, and shape of in­di­vidu­al HTML elements are defined this way. The CSS styling in­struc­tions exist in­de­pend­ently of HTML and must first be linked to the elec­tron­ic document.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • 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 in­struc­tions directly in the HTML document. Here, you can integrate CSS at the beginning of the HTML file or con­tinu­ously through­out the source code. This method benefits from a good basic un­der­stand­ing of HTML and its syntax.

However, the most common and cleanest method in website de­vel­op­ment 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
  • Out­sourced to an external CSS file
Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI as­sist­ance
  • Create cap­tiv­at­ing images and texts in seconds
  • Domain, SSL and email included

Include CSS with inline style

With this approach, styling in­struc­tions are placed directly within the source code using the style attribute. The defined prop­er­ties apply only to a single HTML element, making it easy to give in­di­vidu­al 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 main­ten­ance, 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 in­struc­tions 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 through­out 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 in­struc­tions in a separate file. This approach keeps content and design clearly separated and makes ongoing main­ten­ance 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 re­la­tion­ship 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 at­trib­utes—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 de­clar­a­tions, 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 in­di­vidu­al com­pon­ents to adapt to their container size rather than the overall window width. These and other in­nov­a­tions make it easier to create modular, dynamic, and user-friendly designs without depending on complex work­arounds or JavaS­cript.

CSS pseudo-class :has()

It is a parent selector that can tie pre­defined styles to specific con­di­tions. 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 sur­round­ing container.

This means each module or component can adapt in­di­vidu­ally based on the available space in its parent element. This enables modular, truly flexible re­spons­ive web design that works in­de­pend­ently of the window width. For example, you can set cards with images and text to display side by side in a row once their sur­round­ing 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 re­peatedly writing long selector chains. In this example, all buttons share the same base style, and depending on the ad­di­tion­al 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 dy­nam­ic­ally mix colours directly in the stylesheet or auto­mat­ic­ally select variants based on bright­ness. This allows you to create colour trans­itions, themes, or dark mode ad­just­ments without pre-cal­cu­lat­ing fixed colour values.

This makes CSS more flexible, as colours can be cal­cu­lated and adjusted rather than simply set as static values. In this example, the back­ground 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 auto­mat­ic­ally ‘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 nav­ig­a­tion. In the following example, the parent container .slider scrolls ho­ri­zont­ally (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
Go to Main Menu