Four methods to add a style sheet to a webpage

Last Update:2018-12-05 Source: Internet

Author: User

Tags comment tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

You can add a style sheet to a webpage in four ways. Each method has its own advantages:

1. Insert a style sheet into an HTML file.
<HTML>
<Style type = "text/CSS">
<! --
H1 {color: green; font-family: Impact}
P {Background: yellow; font-family: courier}
-->
</Style>
<Head>
<Title> my first stylesheet </title>
</Head>
<Body>
<H1> stylesheets: the tool of the web design gods <P> amaze your friends! Squash your enemies! </P>
</Body>
</Html>

Type = "text/CSS" is set to adopt the MIME type. In this way, style sheets can be ignored in browsers that do not support CSS.

Comment tag (<! -- And -->) is more important. Some old browsers (such as IE 2.0 for Mac) cannot ignore the style sheet and continue to execute the following commands even if the type = "text/CSS" attribute is set, the style sheet code is also displayed. Using annotation labels can avoid this situation.

2. Link an external style sheet to an HTML file.

Use the <link> label in

<HTML>
<Head>
<Title> my first stylesheet </title>
<LINK rel = stylesheet href = "mystyles.css" type = "text/CSS">
</Head>
<Body>
<H1> stylesheets: the tool of the web design gods <P> amaze your friends! Squash your enemies! </P>
</Body>
</Html>

(You do not need to use annotation labels when using a linked style sheet .)
Now, you can create a file named mystyles.css (or whatever name you like ). The file content is as follows:

H1 {color: green; font-family: Impact}
P {Background: yellow; font-family: courier}

3. Input an external style sheet to an HTML file.
The method for inputting an external style sheet is similar to that for linking. The difference is that the link method cannot be used in combination with other methods, but the input method can. Example:

<HTML>
<Style type = "text/CSS">
<! --
@ Import url(company.css );
H1 {color: orange; font-family: Impact}
-->
</Style>
<Head>
<Title> my first stylesheet </title>
</Head>
<Body>
<H1> stylesheets: the tool of the web design gods <P> amaze your friends! Squash your enemies! </P>
</Body>
</Html>

The content of the input company.css file is as follows:

H1 {color: green; font-family: times}
P {Background: yellow; font-family: courier}

The browser first enters the company.css rule (@ import must be followed by a header), and then adds the transplanted rule to generate a rule set for the webpage.

The flexibility of the input style sheet allows you to input countless style sheets, and you can use the embedded style sheet to overwrite the input style sheet as per your preferences.

4. Add the style sheet to the HTML file row.
Add style rules to HTML rows as follows:

<HTML>
<Head>
<Title> my first stylesheet </title>
</Head>
<Body>
<H1 style = "color: orange; font-family: Impact"> stylesheets: the tool of the web design gods <P style = "Background: yellow; font-family: Courier"> amaze your friends! Squash your enemies! </P>
</Body>
</Html>

In this example, you do not need to add Sample Table code to the top of the HTML. Adding the style table attribute in the row will enable the setter to execute style table rules.

This method is inconvenient because you must add style rules in each row. Otherwise, the setter will go back to the default settings of the file in the next row.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More