How do i insert a CSS in a Web page

css| Insert | Web page

We explained the syntax of CSS before, but in order to display the effect in the browser, we should let the browser recognize and call. 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 a foreign style sheet, an internal style sheet, import a foreign style sheet, and an inline style.

　　1. Link to external style sheet

The link to an external style sheet is to save the stylesheet as a style sheet file, and then link to the style sheet file with the link> tag in the page, which must be placed in the head> area of the page as follows:
......
<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)
　　
　　2. Internal style sheet

The internal style sheet is where the stylesheet is placed in the head> area of the page, the defined styles are applied to the page, and the style sheet is inserted with the style> tag, and the following example shows 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 lower-version 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 the content without displaying it:

......
<style type= "Text/css" >
<!--
HR {Color:sienna}
p {margin-left:20px}
Body {background-image:url ("Images/back40.gif")}
-->
</style>
......
　　
　　 3. 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, and looking at the following example:
......
<style type= "Text/css" >
<!--
@import "Mystyle.css"
Declaration of other style sheets
-->
</style>
......

In the example above, @import "Mystyle.css" indicates that the MYSTYLE.CSS style sheet is imported, 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 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 sheet.
　　
　　 4. 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.
　　
　　5. 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-align, 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 attributes 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 is 20th words)
Then the overlay of this page is the following style:
color:red;
Text-align:right;
Font-size:20pt
(text color is red; right aligned; size is 20th words)

The font color is retained from the external style sheet, and the alignment and font dimensions are defined, followed by the internal style sheets, as defined by precedence.

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 linked external style sheet and the internal style sheet are the last-defined precedence.