CSS Creation

When a style sheet is read, the browser will format the HTML document according to it.

How to insert a style sheet

There are three ways to insert a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

External style sheet

When styles need to be applied to many pages, an external style sheet will be the ideal choice. In the case of using 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. The <link> tag is at the head (of the document):

< head > < link rel = " stylesheet " type = " text/css " href = " mystyle.css " > </ head >

The browser will read the style declaration from the file mystyle.css and format the document according to it.

The 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: 20 px
 ; } body { background-image: url ("/ images / back40 . gif ")
 ; }
Do not leave a space between the attribute value and the unit (for example: “margin-left: 20 px” ), the correct way of writing is “margin-left: 20 px”.

Internal style sheet

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

< head > < style > 
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
 </ style > </ head >

Inline style

Because of the mixing of presentation and content, inline styles lose many of the advantages of style sheets. Please use this method with caution, for example when the style only needs to be applied once to an element.

To use inline styles, you need to use the style attribute 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:

< p style = " color:sienna;margin-left:20px " > This is a paragraph. </ p > 

Multiple styles

If certain attributes are defined by the same selector in different style sheets, then the attribute values ​​will be inherited from the more specific style sheet. 

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

h3 { color: red

    ;
     text-align: left;
     font-size: 8 pt;
 }

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

h3 { text-align: right

    ;
     font-size: 20 pt;
 }

If this page with an internal style sheet is linked to an external style sheet at the same time, then the style obtained by h3 is:

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

That is, the color properties will be inherited from the external style sheet, and the text-alignment and font-size will be replaced by the rules in the internal style sheet.

Multiple style priority

The style sheet allows the style information to be specified in a variety of ways. The style can be specified in a single HTML element, in the head element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.

In general, the priority is as follows:

(Inline style) Inline style> (Internal style) Internal style sheet> (External style) External style sheet> Browser default style

test! </ h3 > </ body >

Note: If the external style is placed after the internal style, the external style will override the internal style.