Three ways to introduce CSS styles

Style sheets are placed in different places and have different scopes of action. In general, style sheets are divided into inline style sheets and outreach style sheets, which are three ways to place, external, and import in-page.
1. Inline style sheet
The inline style sheet is where the stylesheet rules are placed in the middle of < head> and Inline style sheets also include a direct insertion method that specifies a flag in the HMTL page, specifying its style style, which can be written as:

   < Table style= "FONT-SIZE:10PT; Color:blue; " >

Defines a character size of 10pt and a blue color in the table.

2. External style sheet
Compiling a Web site's category page, the style is often the same or similar, each time in < head> and Write a stylesheet to implement the same different styles of pages, which can be achieved by introducing an external style sheet. And when an external style sheet is changed, the style of the HTML page that references the style sheet changes as well, without having to change it manually.
An external style sheet refers to the creation of a completely separate text file with a. css extension, and a file content that enters the style sheet information, removing any associated HTML language.
For example, enter in an external style sheet:

We see that there is only less < style> and comment marks, and the rest of the writing of the external style sheet does not change. The input is complete, save it as example.css.
There are two ways to implement referencing an external style sheet.
(i) Use the < link> tag to link an external style sheet
Use the following statement to implement a link to an external style sheet:
< LINK rel=stylesheet href= "Example.css" >
The HREF should contain the path information, which refers to the style sheet file in the same directory as the HTML document.
Multiple external style sheets can be referenced in an HTML document, for example:

   < link rel=stylesheet href= "example.css" >   < LINK rel=stylesheet href= "Style/other.css" >

First, the linked example.css is the default stylesheet for the document, and should be met first when the style definition conflicts.
(ii) Importing style sheet information using @IMPORT
Use the @import command to import external style sheet information into the page, which is present 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, and the priority of the style sheet is set according to the order of the import.
These three methods can be mixed, that is, to be able to use these three methods in a single page, but when the style sheet information rules are more than one, it is more prone to conflict. For example, in the reference to a number of style sheet information on the H1 title of the set, then which is the main? At this point, it is the first priority to see which style sheet is referenced before. Therefore, when we deal with the complicated style sheet information, we should fully consider the possibility of the style sheet conflict, and resolve the contradiction well and make it match each other harmoniously.