Ways to Introduce CSS in HTML

There are 4 ways to introduce CSS in HTML. Two of them are to directly add CSS code in the HTML file, and the other two are to introduce external CSS files. Let's look at these methods and their advantages and disadvantages.

Inline style

Inline style refers to adding CSS directly in thestyleattribute of an HTML tag.

Example:

<div style="background: red"></div>

This is usually a very bad way of writing. It can only change the style of the current tag. If you want multiple<div>tags to have the same style, you have to repeatedly add the same style to each<div>tag. If you want to modify a style, you have to modify all the code in `style` again. Obviously, introducing CSS code inline will make the HTML code verbose and make the webpage difficult to maintain.

Embedded style

Embedded style refers to writing CSS code in the HTML head's<style>`<style>` tag.

Example:

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

The embedded CSS is only effective for the current webpage. Because the CSS code is in the HTML file, the code is more concentrated, which is usually advantageous when we write template webpages. Because people viewing the template code can see the HTML structure and CSS styles at a glance. Because the embedded CSS is only effective for the current page, when multiple pages need to introduce the same CSS code, writing it this way will lead to code redundancy and is not conducive to maintenance.

Linked style

Linked style refers to using the HTML head's<head>`<link>` tag to import an external CSS file.

Example:

<head>
    <link rel="stylesheet" type="text/css" href="style.css.html">
</head>

This is the most common and most recommended way to introduce CSS. Using this method, all CSS code exists only in a separate CSS file, so it has good maintainability. Moreover, all CSS code only exists in the CSS file, and the CSS file is introduced when first loaded. Later, when switching pages, only the HTML file needs to be loaded.

Imported style

Imported style refers to using a CSS rule to import an external CSS file.

Example:

<style>
    @import url(style.css);
</style>

Comparing linked style and imported style

Linked style (hereinafter referred to as@import`@import`) are both ways to introduce external CSS files. Let's compare these two methods and explain why using `@import` is not recommended.@import。

`link` belongs to HTML, through<link>the `href` attribute in the tag to import external files, while@import`@import` belongs to CSS, so the import statement should be written in CSS. Note that the import statement should be written at the beginning of the stylesheet, otherwise the external file cannot be imported correctly.
@import`@import` is a concept that only appeared in CSS2.1. Therefore, if the browser version is low, external style files cannot be imported correctly.
When the HTML file is loaded, the files referenced by `link` are loaded at the same time, while@importfiles referenced by `@import` are loaded after the page is fully downloaded.

Summary: We should try to use<link>the `link` tag to import external CSS files, and avoid or use less the other three methods.

Source: https://segmentfault.com/a/1190000003866058