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

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.