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

Analysis of the underlying principle of MySQL multi-version concurrency control MVCC

How to import CSS styles into HTML external style sheets

Specific steps

Analysis of the underlying principle of MySQL multi-version concurrency control MVCC

Specific use of CSS front-end page rendering optimization attribute will-change

Mac node deletion and reinstallation case study

Pure HTML+CSS to achieve Element loading effect

A brief discussion on several situations where MySQL returns Boolean types

How to set utf-8 encoding in mysql database

VUE+Canvas implements the sample code of the desktop pinball brick-breaking game

Future-oriented all-round web design: progressive enhancement

Let's talk about the difference between containers and images in Docker

Example of horizontal and vertical centering of div sub-element using CSS

Recommend

Detailed steps to delete environment variables in Linux

How to share Flash pages through verification methods in website standards

How to create a trigger in MySQL

Summary of naming conventions for HTML and CSS

React passes parameters in several ways

WeChat applet to achieve automatic video playback imitating GIF animation effect example

How to purchase and initially build a server

Programs to query port usage and clear port usage in Windows operating system

How to deploy tomcat in batches with ansible

How to click on the a tag to pop up the input file upload dialog box

Learn about TypeScript data types in one article

js to realize web music player

Automatic line breaks in html pre tags

React implements double slider cross sliding

Summary of several submission methods of HTML forms