When the browser reads the style sheet, it will format the file according to it. There are three ways to insert a style sheet: external style sheet, internal style sheet, and inline style. The following is the details.
External style sheet
External style sheets are ideal for many web pages. With external style sheets, you can change the entire website by changing a file to see. Each page must be linked to a style sheet using tags. Mark the header part:
| Reference content is as follows: <Head> <Link rel = "stylesheet" type = "text/css" href = "teststyle.css"/> </Head> |
External style sheets can be written in any text editor. This file should not contain any HTML Tag. Your style sheet should be saved. CSS extension. An example of a style sheet file is as follows:
| Reference content is as follows: Hr {color: sienna} P {margin-left: 20px} Body {background-image: url ("backimage.gif ")} |
Note: Do not leave the property value and unit space between them! "Margin-left: 20 px" (instead of "margin-left: 20px") is normal in IE, but not in Firefox or Opera.
Internal style sheet
An internal style sheet should use a single file with a unique style. As long as you define the internal style of the beginning of an HTML webpage, use the <style> tag as follows:
| Reference content is as follows: <Head> <Style type = "text/css"> Hr {color: sienna} P {margin-left: 20px} Body {background-image: url ("backimage.gif ")} </Style> </Head> |
Inline Style
Inline mixing loses many advantages of the content and style sheet. Use this method with caution!
You need to use the inline style of the style attribute with the relevant tag. The style attribute can contain any CSS attribute. This example shows how to change the left margin of the color and paragraph:
| Reference content is as follows: <P style = "color: red; margin-left: 20px"> This is a paragraph. </p> |
Multiple Style Sheets
If some features have the same selection in different style sheets, this value will be inherited from more specific style sheets.
For example, you have selected these attributes for H1 of the external style sheet:
| Reference content is as follows: H1 { Color: blue; Text-align: center; Font-size: 8pt } |
In addition, the H1 of the internal style sheet has selected these attributes:
| Reference content is as follows: H1 { Text-align: right; Font-size: 20pt } |
If it is linked to the internal style sheet page, the H1 attribute of the external style sheet will be:
| Reference content is as follows: Color: blue; Text-align: right; Font-size: 20pt |
That is, the inherited colors are aligned from the external style sheet and text, and the font size is replaced by the internal style sheet.
Note: If the external style sheet is linked and placed inside the HTML style sheet
In addition:
In general, we can say that all styles are "cascade to a new" virtual "style table", and the following rules have the highest priority in No. 4:
1. Browser default
2. External style sheet
3. Internal (in the first section style sheet)
4. Inline style (in HTML element)
Therefore, inline styles (within HTML elements) have the highest priority, which means they will overwrite the
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
