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

How to import CSS styles into HTML external style sheets

Specific steps

Four ways to switch tab pages in VUE

MySQL 8.0 installation tutorial under Linux

Implementing countdown effect with javascript

A simple example of using js to get the time of the last week, month and three months

Design and implementation of Vue cascading drop-down box

How to set the page you are viewing to not allow Baidu to save its snapshot

Detailed explanation of MySQL user rights verification and management methods

How to redirect to https through nginx load balancing

Example code for converting http to https using nginx

Complete steps for vue dynamic binding icons

Recommend

How to enter and exit the Docker container

Solution to the system abnormality (unable to boot) caused by upgrading glibc in Centos7

Detailed explanation of axios encapsulation and API interface management in React project

Teach you the detailed process of using Docker to build the Chinese version of gitlab community

How to find identical files in Linux

Go to another file after submitting the form

Linux kernel device driver kernel linked list usage notes

Web Design Skills: High Ranking Problems of Mixed Chinese and English Web Pages

Detailed analysis of classic JavaScript recursion case questions

Detailed explanation of Vue's live broadcast function

How to quickly install and deploy MySQL in Windows system (green free installation version)

Call js function or js variable in html's img src="" to dynamically specify the image path

Detailed explanation of basic concepts of HTML

Docker Gitlab+Jenkins+Harbor builds a persistent platform operation

MySQL 8.0.22 winx64 installation and configuration graphic tutorial