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:20px;}
body {background-image:url("/images/back40.gif");}

Remark 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: 20px".


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:8pt;
}

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

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

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

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

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:

1. Inline style

2. Internal style sheet

3. External style sheet

4. Browser default style

<head>
     <!-- External style style.css -->
     <link rel="stylesheet" type="text/css" href="style.css"/>
     <!-- Setting: h3{color:blue;} -->
     <style type="text/css">
       /* Internal style */
       h3{color:green;}
     </style>
</head>
<body>
     <h3>TutorialFish.com</h3>
</body>

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


Deep Understanding of Multiple Style Priorities

Priority is used by the browser to determine and apply to the element by judging which attribute values are most relevant to the element.

The priority is only determined by the matching rules composed of selectors.

Priority is a weight assigned to the specified CSS declaration, which is determined by the value of each selector type in the matched selector.


Priority Order of Multiple Styles

The following is a list of selectors with increasing priority, where the number 7 has the highest priority:

  1. Universal selector (*)

  2. Element (type) selector

  3. Class selector

  4. Attribute selector

  5. Pseudo-class

  6. ID selector

  7. Inline style


!important Rule Exception

When the !important rule is applied to a style declaration, the style declaration overrides any other declarations in the CSS, no matter where it is in the declaration list. Nevertheless, the !important rule has nothing to do with priority. Using !important is not a good habit, because it changes the original cascading rules of your stylesheet, making it difficult to debug.

Some rules of thumb:

  • Always optimize to consider the priority of style rules to solve problems instead of !important

  • Only use !important in specific pages that need to cover the entire site or external css

  • Never use CSS on site-wide !important