Four methods of using CSS style sheets on webpages are found.

Source: Internet
Author: User

How to insert CSS into a webpage

We have learned the CSS syntax before, but to display the effect in the browser, we need the browser to identify and call it. When the browser reads a style sheet, it must read it in text format. Here we introduce four ways to insert a style sheet into the page: link an external style table, an internal style table, an external style table, and an embedded style.

1. link the external style sheet
To link an external style sheet, save the style sheet as a style sheet file, and then mark it with <link>, this tag must be placed in the Copy codeThe Code is as follows: ......
<Link href = "mystyle.css" rel = "stylesheet" type = "text/css" media = "all">
......
</Head>

In this example, the browser reads the defined style sheet in document format from the mystyle.css file. Rel = "stylesheet" refers to the external style sheet used in the page. Type = "text/css" indicates that the file type is style sheet text. Href=”mystyle.css "is the file location. Media is a media type. These media types include screen, paper, speech synthesis devices, and Braille reading devices.

An external style sheet file can be applied to multiple pages. When you change the style sheet file, the style of all pages changes accordingly. It is very useful when creating a large number of websites with the same style pages, which not only reduces the repetitive workload, but also facilitates later modification and editing, and reduces repeated download code During browsing.

You can use any text editor to edit a style sheet file (for example, the extension name of the general style table file is. CSS. The content of mystyle.css is as follows:
Hr {color: sienna}
P {margin-left: 20px}
Body {background-image: url ("images/back40.gif")}/* images file */

2. Internal Style Sheets
The internal style sheets place the style sheets in the Copy codeThe Code is as follows: ......
<Style type = "text/css">
Hr {color: sienna}
P {margin-left: 20px}
Body {background-image: url ("images/back40.gif ")}
</Style>
......
</Head>

Note: Some earlier browsers do not recognize the style tag, which means that earlier browsers ignore the content in the style tag, and the content in the style tag is directly displayed on the page as text. To avoid this situation, we add HTML annotations (<! -- Note -->) Hide the content without displaying it:Copy codeThe Code is as follows: ......
<Style type = "text/css">
<! --
Hr {color: sienna}
P {margin-left: 20px}
Body {background-image: url ("images/back40.gif ")}
-->
</Style>
......
</Head>

3. Import an external style sheet
To import an external style table is to import an external style table in the internal style table <style>. Use @ import to import the table. See the following example:
<Head>
......
<Style type = "text/css">
<! --
@ Import export mystyle.css"
Declaration of other style sheets
-->
</Style>
......
</Head> In the example, @ import into mystyle.css. Note the path of the external style sheet when using it. The method is similar to the method used to link a style sheet, but the method used to import an external style sheet is more advantageous. In essence, it is equivalent to exists in the internal style sheet.
Note: importing an external style sheet must be at the beginning of the style sheet and at the top of other internal style sheets.

4. Embedded Style
Embedded styles are mixed in HTML tags. Using this method, you can easily define a style for an element. The embedded style directly adds the style parameter to the HTML Tag. The content of the style parameter is the attributes and values of CSS, as shown in the following example:
<P style = "color: sienna; margin-left: 20px;">
This is a paragraph
</P> <! -- The color of this section is earth yellow, and the left margin is 20 pixels. -->
The content in the quotation marks behind the style parameter is equivalent to the content in the style sheet braces.
Note: The style parameter can be applied to any BODY element (including the BODY itself), except BASEFONT, PARAM, and SCRIPT.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.