How do i insert a CSS in a Web page

[Dvnews_page] Want to display the effect in the browser, you need to let the browser recognize and invoke. When the browser reads the style sheet, read it in text format, here are four ways to insert a style sheet on a page: link to an external style sheet, an internal style sheet, import a foreign style sheet, and an inline style.

Linking to an external style sheet

The link to an external style sheet is to save the stylesheet as a style sheet file, and then link the style sheet file with the <link> tag 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 in document format from the Mystyle.css file. Rel= "stylesheet" refers to the use of this external style sheet in a 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 style sheet file, the style of all the pages changes. It is useful when making lots of web sites with the same style pages, not only reducing the amount of repetitive work, but also being helpful for later revisions, edits, and less repetitive downloading of code when browsing.

The style sheet file can be opened and edited with any text editor (for example, Notepad), and the general style sheet file extension is. css. The content is a defined style sheet and contains no 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 a horizontal line with a color of naturals; The margin to the left of the paragraph is 20 pixels; the background picture of the page is the Back40.gif file in the images directory)

Internal style sheet

The internal style sheet is where the stylesheet is placed in the ......
<style type= "Text/css" >
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
</style>
......

Note: Some of the lower versions of browsers do not recognize the style tag, which means that a 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 annotations (<!--annotation-->) to hide content without displaying 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 into the <style> of an internal style sheet, using @import when importing, and looking at the following example:
......
<style type= "Text/css" >
<!--
@import "Mystyle.css"
Declaration of other style sheets
-->
</style>
......
Example, @import "Mystyle.css" represents the import of the MYSTYLE.CSS style sheet, noting the path to the external style sheet when used. Methods are similar to methods that are linked to style sheets, but importing external style sheet input is more advantageous. Essentially, it is equivalent to being in an internal style sheet.
Note: Importing an external style sheet must be at the beginning of the style sheet, above the other internal style sheet.

inline style

Inline styles are mixed in HTML tags, and in this way, you can simply define a style for an element individually. The inline style is used directly to add the style parameter to the HTML tag. The content of the style argument is 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 quotation marks that follow the style argument correspond to the contents of the curly braces.
Note: The style parameter can be applied to elements within any body (including body capabilities), except for Basefont, Param, and script.

Overlay of multiple style sheets

In the previous chapter we have mentioned the cascading order of style sheets, here we discuss the superposition of these methods of inserting a stylesheet, and if a few different style sheets are used on the same selector, the property value will overlay several stylesheets, where the conflict will be the final definition. 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;&NBSP
font-size:8pt 
} 
(Heading 3 has a red text color, a left alignment, a text size of 8th words)  
The text-align and Font-size attributes of the H3 selector are also defined in the Internal style table:  
h3 
{ 
text-align:right; 
FONT-SIZE:20PT&NBSP
} 
(Heading 3 text to the right, size 20th)  
then this page overlays the style is:  
color:red; 
TEXT-ALIGN:RIGHT;&NBSP
font-size:20pt 
(text color is red; right, size 20th)  
Font color is retained from the external style sheet. When alignment and font size are defined, follow the internal style sheet according to the precedence defined above. &NBSP
Note: Following the precedence defined, the highest priority is the inline style, the internal style sheet is higher than the imported external style sheet, and the link between the external style sheet and the internal style sheet is the last-defined high priority.