There are four ways to load CSS styles

Inline style

Declare styles directly through the style attribute of an HTML element

<div style="color: orange;">Hello World</div>
Copy the code


Internal style sheet

Declare styles using the

tag

<head>
    <style>
        .title {
            color: orange;
        }
    </style>
</head>
Copy the code


Link to an external style sheet

Use the link tag to import CSS files

<head>
    <link rel="stylesheet" href="./app.css">
</head>
Copy the code


Import an external style sheet

Import CSS styles using @import

<head>
    <style>
        @import url(./app.css);
    </style>
</head>
Copy the code

Four ways of prioritizing

  • Inline styles have the highest priority
  • Of internal styles, inline, and imports, whichever is declared later has higher priority.


/* a.css */

.title {
    color: orange;
}
Copy the code
/* b.css */

.title {
    color: red;
}
Copy the code


case

<head>
    <! -- Internal style -->
    <style>
        .title {
            color: pink;
        }
    </style>

    <! -- Link to external stylesheet -->
    <link rel="stylesheet" href="./a.css" />

    <! Import external style sheet -->
    <style>
        @import url(./b.css);
    </style>
</head>
<body>
    <div class="title" style="color: blue;">Hello World</div>
</body>
Copy the code

F12 reviews the element attributes and you can see that the priority of the color attribute is blue(inline style) > Red (import) > orange(link in) > PINK (internal style), which is also the priority of the four ways in which the current document declares styles.