How to embed CSS in HTML documents

Source: Internet
Author: User
Tags processing instruction

CSS is often defined in HTML in the following three ways: Embedding (embedded), Linking (reference), Inline (Inline)


I. embedded

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


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.

<P style = "color: # FFF; font-weight: bold;"> inline style </p>

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.

<? Xml-stylesheet type = "text/css" href = "mystyle.css"?> <Html> 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

<Head> <style type = "text/css"> <! -- The following two lines of code have the same effect: @ import "mystyle.css"; @ import url ("mystyle.css"); --> </style> 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

<Head> <link rel = "stylesheet" href = "css url" type = "text/css"> 

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.

Link: <mystyle.css>; rel = stylesheet; // equivalent to <link rel = "stylesheet" href = "css url" type = "text/css">
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.