How to import CSS styles into HTML external style sheets

The link-in style is to put all the styles in one or more external style sheet files. This file has the extension of css. Through the link tag, the external style sheet (external style file named css) is linked to the HTML document. In this way, the structure and style can be divided into two files, which makes it easier to edit the style or structure.

The basic syntax is:

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

Tips: The shortcut key is link+tab

Specific steps

① Create HTML and CSS files separately, with the file names ending with .html and .css respectively.

In HTML, only the structure and the content that needs to be changed in style are written;
Only styles are written in css files.

For example:

HTML file write:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="demo">Learn external style sheets with Zhang Wangwang</div>
	<div>Learn external style sheets with Zhang Wangwang</div>
	<div>Learn external style sheets with Zhang Wangwang</div>
	<div>Learn external style sheets with Zhang Wangwang</div>
</body>
</html>

css file write:

.demo{
	color: blue; 
}

At this point, the browser displays:

insert image description here

As can be seen from the above code, we have set the color of the first line "Learn external style sheets with Zhang Wangwang" to blue, but because there is no connection between the .html and .css files, the first line of text in the browser does not display the edited color.

②Insert into the <head> of HTML

<link rel="stylesheet" href="css file path" />

After that, press Ctrl+S and refresh the browser to display the following:

You can see that the first line of text has turned blue~

Notice

When practicing, it is best to put the .css file and the .html file in the same directory folder, and remember to save it first by pressing Ctrl+S after writing the style or structure, so that the results can be displayed better and faster.
The function of the link tag is to introduce external CSS styles into the current HTML page, and it is a bridge between HTML and CSS files.

This is the end of this article about how to introduce CSS styles into HTML external style sheets. For more relevant content about introducing CSS styles into HTML, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: HTML table cross-row and cross-column operations (rowspan, colspan)

>>: CSS3 achieves infinite scrolling/carousel effect of list

Use href in html to pop up a file download dialog box when clicking a link

How to import CSS styles into HTML external style sheets

Specific steps

Use href in html to pop up a file download dialog box when clicking a link

Practical method of deleting a row in a MySql table

Docker configuration Alibaba Cloud Container Service operation

How to Apply for Web Design Jobs

Ajax responseText parses json data case study

A useful mobile scrolling plugin BetterScroll

Solution to JS out-of-precision number problem

Quickly solve the problem of slow and stuck opening of input[type=file]

Virtual domain name configuration and test verification under Linux\Nginx environment

A brief analysis of Docker private image library and Alibaba Cloud object storage OSS

Recommend

How to run postgreSQL with docker

CentOS uses expect to remotely execute scripts and commands in batches

MySQL common statements for viewing transactions and locks

HTML table markup tutorial (2): table border attributes BORDER

SQL left join and right join principle and example analysis

How to add vector icons to web font files in web page production

An in-depth introduction to React refs

Implementation of Docker configuration modification of Alibaba Cloud image repository

Examples and comparison of 3 methods for deduplication of JS object arrays

Solve the problem of OpenLayers 3 loading vector map source

Toolkit: A more powerful front-end framework than Bootstrap

Various ways to achieve the hollowing effect of CSS3 mask layer

Solution to css3 transform transition jitter problem

Vue implements custom "modal pop-up window" component example code

How to set up jar application startup on CentOS7