Latest web development tutorials

Create CSS

When reading a style sheet, the browser will be based on its formatted HTML document.

How to insert the stylesheet

Insert the style sheet in three ways:

  • External style sheet
  • Internal style sheet
  • Inline style

External style sheet

When the style is applied to many pages required, an external style sheet would be the ideal choice. In the case of an external style sheet, you can change a file to change the appearance of the entire site. Each page uses the <link> tag to link to a style sheet. <Link> tag in the (document) Head:

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

The browser will read from the file mystyle.css style declaration in accordance with it to format the document.

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

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

Remark Do not leave spaces between the property value and units. If you use the "margin-left: 20 px" instead "margin-left: 20px", it is only valid in IE 6, but it does not work in Mozilla / Firefox or Netscape in.

Internal style sheet

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

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

Inline style

Due to the performance and content mixed together, inline styles will lose many of the advantages of style sheets. Please caution this method, for example, when the style needs to be applied only once on 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 the left margin:

<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 from the more specific style sheet is inherited.

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 the style has internal style sheets and external style sheets link this page at the same time, then h3 get is:

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

That is the color property will be inherited from the external style sheet and the text arrangement (text-alignment) and font size (font-size) will be replaced by the internal style sheet rules.

Multiple styles are laminated one

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

Stacking order

When the same HTML element is defined by more than one style, which style will use it?

In general, all styles will be stacked in a new virtual style sheet according to the following rules, where number 4 has the highest priority.

  1. Default browser
  2. External style sheet
  3. Internal style sheet (in the <head> tag inside)
  4. Inline style (HTML elements inside)

So, an inline style (inside an HTML element) has the highest priority, which means that it takes precedence over the following style declaration: label style statement, external style sheet style statement, or browser style statement (default value).

RemarkTip: If you use an external style file in the <head> is also defined the style, the style sheet will replace the internal style external files.