CSS Tutorial (iv) How to insert CSS in a Web page

We know the syntax of CSS in the first two chapters, but to show the effect in the browser, let the browser recognize and invoke it. When a browser reads a style sheet, it is read in text format, which describes four ways to insert a style sheet on a page: a link to an external style sheet, an inner style sheet, an imported outer style sheet, and an inline style.

Linking to an external style sheet

Linking to an external style sheet is to save the stylesheet as a stylesheet file, and then link the?lt;link> tag to the stylesheet file in the page, which must be placed in the ......
<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css" >
......
The above example indicates that the browser reads the defined style sheet from the Mystyle.css file in document format. Rel= "stylesheet" refers to the use of this external style sheet in the page. Type= "Text/css" means that the type of the file is the style sheet text. Href= "Mystyle.css" is where the file is located.

An external style sheet file can be applied to multiple pages. When you change the stylesheet file, the style of all the pages changes with it. It is very useful when making a large number of web sites of the same style page, not only reduces duplication of effort, but also facilitates subsequent modifications, edits, and a reduction of duplicate download code when browsing.

The stylesheet file can be opened and edited with any text editor (for example, Notepad), and the general style sheet file extension is. css. Content is a defined style sheet that does not contain HTML tags, mystyle.css the contents of this file are as follows:
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
(defines the color of the horizontal line as naturals; The left margin of the paragraph is 20 pixels; the background image of the page is the Back40.gif file in the images directory)

Internal style sheet

The internal style sheet is to put the style sheet in the page?lt;head> area, these defined styles are applied to the page, the style sheet is inserted with the <style> tag, from the following example can be seen in the use of the <style> tag:
......
<style type= "Text/css" >
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
</style>
......

Note: Some low-version browsers do not recognize the style tag, which means that the lower version of the browser ignores the contents of the style tag and displays the contents of the style tag directly to the page as text. To avoid this, we use HTML notation (<!--comment--) to hide the content without showing it:
......
<style type= "Text/css" >
<!--
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
-
</style>
......

Import an external style sheet

Importing an external style sheet refers to importing an external style sheet in the <style> of an internal style sheet, using @import when importing, to see the following example:
......
<style type= "Text/css" >
<!--
@import "Mystyle.css"
Declarations for other style sheets
-
</style>
......
The example @import "mystyle.css" means importing the MYSTYLE.CSS style sheet, noting the path of the external style sheet when used. Methods are similar to the way they are linked into style sheets, but importing an external style sheet is a more advantageous approach. Essentially it is equivalent to the existence of an internal style sheet.
Note: Importing an external style sheet must be at the beginning of the style sheet, above the other internal style sheets.

inline style

Inline styles are mixed in HTML tags, and in this way, it's easy to define a style individually for an element. The use of inline styles is to add the style parameter directly to the HTML tag. The contents of the style parameter are the properties and values of the CSS, as in the following example:
<p style= "Color:sienna; margin-left:20px ">
This is a paragraph
</p>
(This paragraph color is naturals, the left margin is 20 pixels)
The contents of the quotation marks after the style parameter are equivalent to the contents of the style sheet curly braces.
Note: The style parameter can be applied to elements within any body (including body capability), except Basefont, param, and script.

Overlay of multiple style sheets

In the previous chapter we have mentioned the cascading order of stylesheets, and here we discuss the overlay of these methods of inserting style sheets, and if you use several different stylesheets on the same selector, the value of this property will overlay several stylesheets, where the conflict will be the last defined. For example, we first link to an external style sheet that defines the color, Text-alig, and Font-size properties of the H3 selector:
H3
{
color:red;
Text-align:left;
font-size:8pt
}
(The text color of heading 3 is red; aligned to the left; text size is 8th words)
The Text-align and Font-size properties of the H3 selector are then also defined in the Internal style table:
H3
{
Text-align:right;
Font-size:20pt
}
(Heading 3 text to the right; size 20th)
Then the style of this page overlay is:
color:red;
Text-align:right;
Font-size:20pt
(The text color is red; right is aligned; size is 20th number)
The font color is preserved from the external style table, and the alignment and font dimensions are defined, followed by the internal style sheet as defined above.
Note: According to the precedence defined later, the highest priority is the inline style, the inner style sheet is higher than the imported external style sheet, and the link between the external style sheet and the inner style sheet is the last defined priority.