Three ways to insert an HTML document into a CSS style sheet

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags applied browser change document example external file how to

How to insert a style sheet

When you read a style sheet, the browser formats the HTML document according to it. There are three ways to insert a style sheet:

external style sheet

An external style sheet is an ideal choice when a style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file. Each page is linked to the style sheet using the <link> tag. <link> tags in (document) head:

&lt;head&gt; &lt;link rel= "stylesheet" type= "Text/css" href= "Mystyle.css"/&gt; &lt;/head&gt;

The browser reads the style declaration from the file mystyle.css and formats the document according to it.

An external style sheet can be edited in any text editor. The file cannot contain any HTML tags. The style sheet should be saved with a. css extension. The following is an example of a style sheet file:

hr {Color:sienna} p {margin-left:20px;} body {Background-image:url ("Images/back40.gif");}

Do not leave a space between the property value and the unit. If you use "margin-left:20 px" instead of "margin-left:20px," it works only in IE 6, but not in Mozilla/firefox or Netscape.

Internal style sheet

When a single document requires a special style, you should use an internal style sheet. You can use the <style> tag to define an internal style sheet in the head of the document, like this:

&lt;head&gt; &lt;style type= "Text/css" &gt; hr {Color:sienna;} p {margin-left:20px;} body {Background-image:url (" Images/back40.gif "); &lt;/style&gt; &lt;/head&gt; Inline Styles

Because you want to mix performance and content together, inline styles can lose many of the advantages of the style sheet. Use this method with caution, such as when a style only needs to be applied on one element at a time.

To use inline styles, you need to use style attributes in the relevant tags. The Style property can contain any CSS properties. This example shows how to change the color and left margin of a paragraph:

&lt;p style= "Color:sienna; margin-left:20px "&gt; This is a paragraph &lt;/p&gt; multiple styles

If some attributes are defined by the same selector in a different style sheet, the property value is inherited from a more specific stylesheet.

For example, an external style sheet has three properties for the H3 selector:

h3 {color:red; text-align:left; font-size:8pt;}

The internal style sheet has two properties for the H3 selector:

h3 {text-align:right; font-size:20pt;}

If this page with an internal style sheet is connected to an external style table, the H3 gets the following style:

color:red; Text-align:right; font-size:20pt;

That is, the color properties are inherited from the external style sheet, while the text flow (text-alignment) and font dimensions (font) are replaced by rules in the internal style sheet.

Related Article

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

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.