Introduction to several ways to introduce CSS in HTML

Introduction to several ways to introduce CSS in HTML

Using different methods to reference CSS style sheets will ultimately achieve the same effect, but using different methods to apply CSS files will affect SEO and the speed and efficiency of web page opening.

The html reference css method is as follows

Next we will explain the examples of HTML referencing CSS methods one by one

1. Embed CSS styles directly in HTML tag elements

For example, <div style="font-size:14px; color:#FF0000;">I am div css test content-www.jb51.net support</div> The effect is as follows

2. Style declaration in the head section of HTML

The insertion code is as follows:

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*Here is the CSS style content*/ 
--> 
</style>

The specific method is as follows:

3. Use @import to reference external CSS files

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>123WORDPRESS.COM test</title>
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*Here is the CSS style content referenced by @import*/ 
--> 
</style> 
</head>
<body>
<div class="ceshi">I am div css test content-www.jb51.net support</div>
</body>
</html>

Code in Wcss.css file.ceshi {font-size:14px; color:#FF0000;}

The effect is as follows:

It can be seen that using this method is similar to using the built-in CSS style sheet method, both of which require using the style tag in the HTML head to reference external CSS.

4. Use link to call external css files

Place <link rel="stylesheet" href="wcss.css" type="text/css" /> in the head to call the external wcss.css file to implement HTML reference CSS file

Details as shown below

This method does not require a style tag, but directly references an external style by linking a style. It is generally recommended to use link to reference external CSS style methods.

Advantages of using link to reference external CSS

1. It is beneficial to SEO. Using this method to reference external CSS files will make the source code of the HTML page much less than directly adding CSS styles. Because search engine spiders do not crawl CSS files when crawling web pages, this makes the HTML source code very small, allowing spiders to crawl faster and process less, increasing the weight of this web page, which is beneficial to ranking.
2. Saving HTML allows the browser to download web pages in separate threads, just like loading a page and opening a page in two threads at the same time, making the web page open very quickly. (When users browse this webpage, the HTML source code and CSS files are downloaded at the same time, making it faster)
3. It is convenient to modify the style of a web page. You only need to modify the CSS style to modify the art style of the web page. If this method is used in a website project, since the entire site applies a common CSS basic style, it is quick and convenient to modify the style of the entire site.

Here are some additional

In HTML, there are three main ways to introduce CSS: inline, embedded, imported, and linked.
Inline style: that is, setting the CSS style in the style attribute of the tag. This method does not essentially reflect the advantages of CSS, so it is not recommended.

example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
</head>
<body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
</body>
</html>

Embedded: Embedded writes the settings of various elements in the page between <head> and </head>. This method is very convenient for a single web page. However, for a website with many pages, if each page sets its own style in an embedded manner, the great advantages brought by CSS will be lost. Therefore, a website usually writes an independent CSS style sheet file and introduces it into the HTML document using one of the following two methods.
example:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
       color:white;
       background-color:boue;
       }
</style>
       </head>
       <body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
       </body>
       </html>

Import and link: The purpose of both import and link is to introduce an independent CSS file into the HTML file, and there are corresponding differences between the two.
In fact, the biggest difference between the two is that the link method uses HTML tags to introduce external CSS files, while the import method uses CSS rules to introduce external CSS files. Therefore their syntax is also different.
If you use the link style, you need to use the following statement to import the external CSS file.

<link href="mystyle.css" rel="stylesheet" type="text/css" />

If you use the import method, you need to use the following statement.

<style type="text/css">
@import "mystyle.css";
</style>

In addition, the display effects after using these two methods are slightly different. When using the link method, the CSS file will be loaded before the main part of the device page, so that the displayed web page will have a style effect from the beginning. When using the import method, the CSS file will be loaded after the entire page is loaded. For some browsers, in some cases, if the web page file is large, the unstyled page will be displayed first, and then the style setting effect will appear after flashing. From the viewer's perspective, this is a drawback of using the import method. For some larger websites, you may want to categorize all CSS styles into several CSS files for ease of maintenance. In this case, if you use link-style import, you will need several statements to import the CSS files separately. If you want to adjust the classification of the CSS file, you need to adjust the HTML file at the same time. This is a disadvantage for maintenance work. If you use the import method, you can only introduce one main CSS file, and then import other independent CSS files in this file; the link method does not have this feature.

Therefore, my suggestion is that if you need to import a CSS file, use the link method; if you need to import multiple CSS files, first use the link method to import a "directory" CSS file, and then use the import method to import other CSS files in this "directory" CSS file.

If you want to use JavaScript to dynamically decide which CSS file to import, you must use the link method to achieve it.

<<:  Example of MySQL slow query

>>:  Docker renames the image name and TAG operation

Recommend

The difference between ${param} and #{param} in MySQL

The parameter passed by ${param} will be treated ...

MySQL 8.0.20 installation and configuration detailed tutorial

This article shares with you a detailed tutorial ...

Web page text design should be like smart girls wearing clothes

<br />"There are no ugly women in the w...

Implementation of Docker Compose multi-container deployment

Table of contents 1. WordPress deployment 1. Prep...

CSS modular solution

There are probably as many modular solutions for ...

JavaScript - Using slots in Vue: slot

Table of contents Using slots in Vue: slot Scoped...

Graphic tutorial on installing Mac system in virtual machine under win10

1. Download the virtual machine version 15.5.1 I ...

Pay attention to the use of HTML tags in web page creation

This article introduces some issues about HTML ta...

JS implementation of Apple calculator

This article example shares the specific code of ...

MySQL error: Deadlock found when trying to get lock; try restarting transaction solution

Find the problem Recently, when I was filling in ...

User needs lead to marketing-oriented design

<br />For each of our topics, the team will ...

10 Underused or Misunderstood HTML Tags

Here are 10 HTML tags that are underused or misun...

Implementation of whack-a-mole game in JavaScript

This article shares the specific code for JavaScr...

17 404 Pages You'll Want to Experience

How can we say that we should avoid 404? The reas...

JS realizes the front-end paging effect

This article example shares the specific code of ...