CSS creation

When reading a style sheet, the browser will be formatted according to its HTML document.

How to insert a style sheet

Method of inserting a style sheet in three ways:

External style sheet (External style sheet)
Internal style sheet (Internal style sheet)
Inline style (Inline style)

External style sheet

When the style needs to be applied to many pages, an external style sheet would be the ideal choice. In the case of an external style sheet, you can change the appearance of the entire site by changing one file. Each page uses the <link> tag to link to the style sheet. <Link> tag (document) header:

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

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

External style sheet can be edited in any text editor. Files can not contain any html tags. In the name of the style sheet should be saved .css extension. Here is an example of a style sheet file:

Do not leave the space between the property value and the unit (such as: "margin-left: 20 px"), correct wording is "margin-left: 20px".

Internal style sheet

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

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

Inline style

Because you want to show and content mixed together, inline style loses many advantages out of style sheets. Use caution this method, for example, need only be applied when the style once in one element.

To use inline styles, you need to use the style (style) attribute in the relevant tag. Style attribute can contain any CSS property. This example shows how to change the color of the paragraph and left margins:

< P style = "Color: Sienna; margin-left: 20px" > This is a paragraph. </ P >

Multiple styles

If some attributes are defined the same selector in different style sheets, then the property value is 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;
}

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

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

If you have a style internal style sheet of the page concurrently with an external style sheet link, h3 get is:

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

I.e., the color attribute is inherited in an external style sheet, and the text alignment (text-alignment) and font size (font-size) can be substituted with the internal rules of style sheet.

Multiple styles priorities

Style sheets allow style information defined in various ways. Styles can be specified in a single HTML element, the first element in the HTML page, or an external CSS file in. Even multiple external style sheets can be referenced inside a single HTML document.

Generally, priority is as follows:

Inline style) Inline style> (internal style) Internal style sheet> (external style) External style sheet> browser's default style

< Head > 
    <-! External style the style.css -> 
    < Link the rel = "this stylesheet" type = "text / CSS" the href = "the style.css" /> 
    <-! Set: h3 {color: blue; } -> 
    < style type = "text / CSS" > 
      / * internal style * / 
      H3 { Color : Green ; } 
    </ style > 
</ head > 
< body > 
    < H3 > test! <
body>

Note: If the external style pattern on the back of the interior, the external style overrides the internal style.

Preliminary CSS - 5 Creating