Ways to introduce CSS in HTML

There are 4 ways to introduce CSS in HTML. There are two ways to add CSS code directly to the HTML file, and the other two are to introduce an external CSS file. Let's take a look at these methods and their advantages and disadvantages.
Inline
Inline means adding CSS directly to the style attribute in an HTML tag.
Example:

This is usually a bad way of writing. It can only change the style of the current tag. If you want multiple

s to have the same style, you have to repeatedly add the same style to each

. To modify a style, you have to modify the code in all styles. Obviously, the introduction of CSS code inline makes HTML code verbose and makes web pages difficult to maintain.
Embedding method
Embedding means writing CSS code under the tag in the HTML header.
Example:

    

     .content {
         background: red;
     }

    

Embedded CSS is only valid for the current web page. Because the CSS code is in the HTML file, it will make the code more concentrated, which is usually advantageous when we write template web pages. Because anyone looking at the template code can see the HTML structure and CSS styles at a glance. Because the embedded CSS is only valid for the current page, when multiple pages need to introduce the same CSS code, writing this way will lead to code redundancy and is not conducive to maintenance.
Link method
Linking refers to the introduction of external CSS files using the tag in the HTML head.
Example:

    

This is the most common and recommended way to introduce CSS. In this way, all CSS code exists only in a separate CSS file, so it is maintainable. And all the CSS code only exists in the CSS file, the CSS file will be introduced when it is first loaded, and only the HTML file needs to be loaded when the page is switched later.
Import method
The import method refers to the introduction of external CSS files using CSS rules.
Example:

     @import url (style.css);

Compare link and import methods
Both the link method (replaced by link below) and the import method (replaced by @import below) are both ways of introducing external CSS files. Below we compare the two methods and explain why @import is not recommended.

The link belongs to HTML, and external files are introduced through the href attribute in the tag, while @import belongs to CSS, so the import statement should be written in CSS. It should be noted that the import statement should be written at the beginning of the style sheet, otherwise it cannot be correct. Import external files;
@import is a concept that only appeared in CSS2.1, so if the browser version is lower, you cannot import external style files properly;
When the HTML file is loaded, the file referenced by link will be loaded at the same time, and the file referenced by @import will be loaded after the page is completely downloaded;

Summary: We should try to use the tag to import external CSS files, avoiding or using the other three methods.

Author: