CSS style creation detailed

When a style sheet is read, the browser formats 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

An external style sheet is an ideal choice when the 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 uses <link> tags to link to the style sheet. <link> tags at the head of (document):

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

External style sheets can be edited in any text editor. The file cannot contain any HTML tags. Style sheets should be saved with a. css extension. Here 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 spaces between the attribute values and the units. 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

An internal style sheet should be used when a particular style is required for a single document. You can use the <style> tag to define an internal style sheet at the head of the document, just like this:


inline style

Inline styles lose many of the benefits of stylesheets because of the mix of performance and content. Use this method with caution, such as when the style only needs to be applied once on one element.

To use inline styles, you need to use style properties within 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 some properties are defined by the same selector in a different style sheet, the property values are inherited from the more specific style sheet.

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

h3{color:red;text-align:left;font-size:8pt;}
An internal style sheet has two properties for the H3 selector:

h3{text-align:right;font-size:20pt;}
If this page with an internal stylesheet is connected to an external style sheet, the H3 gets the following style:

color:red;text-align:right;font-size:20pt;
That is, the color attribute will be inherited from the external style sheet, and the text arrangement (text-alignment) and font size (font-size) will be superseded by the rules in the inner style sheet.

Multiple styles are stacked as one

Style sheets allow style information to be specified in several ways. Styles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.

Stacking order

What style is used when the same HTML element is defined by more than one style?

Generally, all styles are stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest precedence.

Browser default settings

External style sheet

Internal style sheet (inside the 
Inline style (inside HTML elements)

Therefore, the inline style (inside the HTML element) has the highest precedence, which means that it takes precedence over the style declaration in the label, the style declaration in the external style sheet, or the style declaration in the browser (the default).

Tip: If you use an external file style that defines the style in 
1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial