Four ways to combine CSS and HTML

(1) Each HTML tag has an attribute style, which combines CSS and HTML together

<div style="background-color:red;color:blue;">I am a little bird</div>

(2) Use an HTML tag, <style> tag: write it in the head

    <style type="text/css">
      css code;
    </style>
<style type="text/css">
div {
background-color:red;
color:gray;
}
</style>

(3) Use statements in the style tag (does not work in some browsers)

@import url(css file path);

- Step 1: Create a css file

   <style type="text/css">
    @import url(div.css);
  </style>

(4) Use the header tag link to introduce external CSS files

- Step 1: Create a css file

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

*** Disadvantages of the third combination method: It does not work in some browsers, and the fourth method is generally used

*** Priority (general)

From top to bottom, from outside to inside, priority from low to high

*** The later loaded ones have higher priority

*** Format selector name {attribute name: attribute value; attribute name: attribute value; ......}

Full code:

<html>
    <head>
        <title>World</title>
        <style type="text/css">
            div {
                background-color:gray;
                color:white;
            }
        </style>
    </head>
    <body>
        <div style="background-color:red;color:blue;">I am a little bird</div>
        <div>May we have the years to look back on, and grow old together with deep affection! </div>
    </body>
</html>

<html>
    <head>
        <title>World</title>
        <style type="text/css">
            @import url(div.css);
        </style>
    </head>
    <body>
        <div>May we have the years to look back on, and grow old together with deep affection! </div>
    </body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>world</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
    <div>May we have the years to look back on, and grow old together with deep affection! </div>
</body>
</html>

Summarize

The above are the four ways of combining CSS and HTML that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Analysis of the difference between HTML relative path and absolute path

>>: Specific usage instructions for mysql-joins