Three common methods of embedding CSS in HTML documents: HTML/Xhtml _ webpage Creation

Source: Internet
Author: User
Tags processing instruction
CSS can be defined in HTML in the following ways: Embedding (embedded), Linking (referenced), Inline (Inline ), the following examples describe their features in detail. In HTML, CSS is often defined in the following three methods: Embedding (embedded), Linking (referenced), and Inline (Inline)

I. embedded

Use the HTML style element to define CSS styles in the document.

The Code is as follows:






Ii. inline

Each HTML element contains a style attribute that can be directly defined. This style can only be used for the content of this element. It does not work for another element with the same name.

The Code is as follows:


Inline Style



Iii. external references

External Reference refers to the dynamic reference of external CSS file definitions rather than CSS styles.

1. Use the Processing Instruction statement of the style sheet

Write an instruction processing statement about the style sheet at the beginning of the HTML document.

The Code is as follows:




Command statement


However, this command is only supported for html documents written in xml syntax. Most browsers are only valid when they are saved in xhtml or xml format, and JS cannot process such CSS, it is not recommended.

2. Run the @ import command.

Use the @ import command between style elements to import external css files

The Code is as follows:






Any @ import rule must appear before all rules. The parameter is the URL of a css file. In a css file, you can also use the @ import command to import another css file.

3. Use the link Element

The Code is as follows:






This is also the most common method.

4. Use the HTTP message header to link to the style sheet

You can use the link field of the HTTP message header to link an external style sheet.

The Code is as follows:


Link: ; Rel = stylesheet;
// Equivalent


Multiple links can be used in the HTTP header to link Multiple style sheets. The link in the HTTP header has a higher priority than the link in the HTML document.

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.