Three ways to introduce CSS styles

Style sheets are placed in different places and have different scopes of effect. Roughly speaking, style sheets are divided into inline style sheets and external style sheets, that is, there are three methods: placement on the page, external reference, and external import.
1. Inline style sheet
Inline style sheet places the style sheet rules between < HEAD> and < /HEAD>, so that the style sheet has an effect on the entire current HTML page.
The inline style sheet also includes a direct insertion method, which is to separately specify a certain mark in the HMTL page and specify its style, which can be written as:

   < Table style=" font-size:10pt; color:blue;">

Define the character size in the table to be 10pt and the color to be blue.

2. External style sheet
Compile a website's classified pages. The styles are often the same or similar. The same cumbersome and complicated style sheets are inserted into < HEAD> and < /HEAD> every time. Rules are obviously not what we want.
Write a style sheet to implement it on different pages with the same style. This can be achieved by introducing an external style sheet. And when the external style sheet is changed, the style of each HTML page that references the style sheet will also change accordingly, without the need to manually change each one.
External style sheet refers to creating a completely independent text file with the extension .css. The content of the file is entered with style sheet information, excluding any related HTML language.
For example, enter in the external style sheet:

We see that only the < STYLE> and comment tags are missing, and the rest of the writing in the external style sheet has not changed. After entering it, save it as example.css.
There are two ways to reference external style sheets.
(1) Use the < LINK> tag to link to an external style sheet
Use the following statement to link to an external style sheet:
< LINK REL=STYLESHEET HREF="example.css">
HREF should contain path information, What this means is that the style sheet file is in the same directory as the HTML document.
An HTML document can reference multiple external style sheets, for example:

   < LINK REL=STYLESHEET HREF="example.css">
   < LINK REL=STYLESHEET HREF="style/other.css">

The example.css linked first is the default style sheet of the document. When there is a conflict in style definitions, the former should be satisfied first.
(2) Use @IMPORT to import style sheet information
Use the @import command to import external style sheet information into the page. It exists in the < STYLE> and < /STYLE> tags. For example:

< STYLE TYPE="text/css"> 
@import "example.css"; 
@import "style/other.css"; 
< /STYLE>

Obviously, this method can also reference multiple external style sheet information at the same time. The priority of the style sheet is set according to the order of import.
These three methods can be used mixedly, that is, they can be used simultaneously in one page. However, when there are too many style sheet information rules, conflicts are more likely to occur. For example, several of the style sheet information cited have settings for the H1 title, so which one is the main one? At this time, it depends on which style sheet is referenced first, which has the first priority. Therefore, when we deal with complex style sheet information, we must fully consider the possibility of style sheet conflicts, better resolve conflicts, and coordinate and match them.

For more related articles on the three methods of introducing CSS styles, please pay attention to the PHP Chinese website!