Integrating CSS into an HTML page: the practical guide

To format an HTML document in an attractive way, we use the CSS style sheet language. It allows you to define properties such as the layout, colors or typography of different HTML elements. CSS style instructions are independent of HTML code and must first be embedded in the document to be applied.

What integration methods exist?

When you embed CSS in an HTML document, this can be done using internal style sheets Or external.

With internal style sheets, CSS instructions are inserted directly into the HTML document. You can integrate CSS in the header of the HTML file or add it directly in the source code. However, this approach requires a good basic knowledge of HTML and its syntax.

The most common and cleanest technique in web development is to use external style sheets. In this case, the HTML document is linked to a separate CSS file which contains all the formatting instructions.

Here is an overview of the three possible methods:

• Inline styling : directly in the source code
• Internal style sheet : at the beginning of the HTML document
• External style sheet : in an external CSS file

Integrate CSS into HTML: inline styling

With this method, style instructions are embedded directly in the source code using the attribute style. The chosen properties then apply to a single HTML element, which allows you to individually personalize certain elements of the document.

In the example below, the title h1 is displayed in blue with a font size of 14 pixels:

With this type of integration, one must keep in mind that many of the benefits of CSS are lost. For example, it is no longer possible to define a global rule applicable to all elements h1 of the HTML document. In addition, this approach makes maintenance more complex, because each modification involves directly editing the source code.

Embed CSS in HTML document header

In this variation, the CSS is embedded in the header section (head) of the HTML document. The tag style is inserted and the defined rules apply to the entire document.

CSS style instructions remain included in the document, but are much better separated from HTML content.

In the example below, the same formatting as before is used, but this time it applies to all titles h1 of the file.

Ceci est un paragraphe.

Embed CSS from an external file

This is undoubtedly the most effective technique for integrating CSS into an HTML document. Since a website often consists of several pages, it is best to group all styling instructions into a separate file. This approach allows clearly separate content from design and considerably facilitates maintenance. The external file, saved with the extension .cssis then linked to the HTML document using the tag link.

In the example below, the external style sheet is called “ stylesheet.css »:

Ceci est un paragraphe.

The attribute rel defines the type of relationship between the HTML document and the associated file, while href indicates the path to the CSS file to integrate. The element link can also include other attributes: for example, with media="print"you can specify that the style sheet will only apply to printing. The external style sheet does not contain HTML tags, but only selectors followed by braces containing the CSS declarations, as in the example below:

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

Overview of the most common new CSS features

In addition to traditional methods of integrating CSS into HTML, many recent features have emerged, offering greater flexibility in website design. Thanks to modern selectors like :has()it is now possible to target parent elements based on their children, while container queries allow individual components to scale to the size of their container, independent of the window width. These developments make the creation of interfaces more modular, dynamic And ergonomicwithout resorting to complex scripts or JavaScript.

CSS pseudo-class :has()

The pseudo-class :has() acts like a parent selector capable of applying specific styles depending on the presence or state of certain child elements. For example, a form field might appear red when it contains an error and green when it is correctly filled in:

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

Container queries

Container queries allow CSS rules to be applied no longer based on the size of the browser window (as with Media Queries), but based on parent container dimensions.

Each module or component can thus dynamically adapt to the space available to it, offering a responsive Web design. modular and truly flexibleindependent of the overall width of the window.

For example, you can configure cards containing an image and text to display side by side as soon as their container becomes large enough.

If the container is narrower than a defined value (here 400 pixels), the default display is retained.

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

CSS nesting

CSS nesting allows you to placing selectors inside other selectorsas is already the case with SCSS or LESS. This feature makes the code more readable and better structured, because styles related to the same element are grouped into a single block, without having to repeat long chains of selectors.

In the example below, all buttons share basic formatting and, depending on the additional class (primary Or secondary), take on a different appearance.

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

New color functions

New CSS functions like color-mix() And light-dark() offer more flexibility in color management. They allow dynamically mix shades directly in the style sheet or automatically select variants depending on the brightness of the theme. Thanks to these functions, it becomes possible to easily create gradients, custom themes or automatic adaptations for dark mode, without having to manually calculate color values. The CSS thus gains flexibility: the colors are no longer defined statically, but can be calculated and adjusted in real time.

In the example below, the background color of all elements with the class .btn is generated using the function color-mix() with a 50:50 ratio of red to blue, thus producing a purple tone.

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

Scroll Snap

The Scroll Snap property in CSS allows you to make certain elements snap automatically lock at set positions when scrolling. This feature is particularly useful for creating image galleries, carousels, or page sections that stop exactly at a specific point as the user scrolls through the content. It improves the fluidity and ergonomics of navigation.

In the example below, the parent container .slider parade horizontally (x) and applies a lock OBLIGATORY (mandatory). Each child element .slide automatically aligns to “lock” at the start of the container (start) when scrolling.

.slider {
    scroll-snap-type: x mandatory;
}
.slide {
    scroll-snap-align: start;
}