Four ways to combine CSS and HTML

(1) there is a style attribute on each html tag, which combines css with html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-color: burlywood;color: black">Chinese wolfberry with red dates</div>
</body>
</html>

The first color is the background color, and the second color is the font color

(2) use a tag of html to implement the < style > tag, which is written in the head

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            background-color: aqua;
            color: coral;
        }
    </style>
</head>
<body>
<div>Chinese wolfberry with red dates</div>
</body>
</html>

The div in < style > changes the style of < div > in < body >

(3) in the style tag, use the statement @ import url (path of css file)

First, CSS file code

div{
	background-color:blue;color:green;
}

Followed by html file code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @import "div.css";
    </style>
</head>
<body>
<div>Chinese wolfberry with red dates</div>
</body>
</html>

Browser display results

(4) use the header tag link to import the external css file

div{
	background-color:yellow;color:gray;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div>Chinese wolfberry with red dates</div>
</body>
</html>

The third method does not work in some browsers. Generally, the fourth method is used.

Posted by sryder on Wed, 18 Dec 2019 08:15:14 -0800

Programmer Group

Four ways to combine CSS and HTML

Hot Keywords