WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS How to


When a style sheet is read, the browser formats the HTML document based on it.


How to insert style sheets

There are three ways to insert style sheets:

  • External style sheet
  • Internal style sheet
  • Inline style

Internal Style Sheet

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

Example

<head>
<style>
body {
    background-color: #A0CC1C;
}

h1 {
    text-align:left;
    margin-left: 20px;
}
</style>
</head>
Try it yourself »

Inline Styles

Because of the mix of presentation and content, inline styles lose many of the advantages of style sheets. Use this method with caution, for example when styles need to be applied only once on an element.

To use inline styles, you need to use the style attribute within the relevant tags. The Style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph:

Example

<h1 style="color:#A0CC1C;margin-right:10px;">This is a heading.</h1>
Try it yourself »

External Style Sheet

When styles need to be applied to many pages, external style sheets are ideal. With external style sheets, you can change the look of your entire site by changing one file. Each page makes <link>Tags are linked to the style sheet. <link> The tag is in the (document) head:

Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it yourself »

The browser reads the style declaration from the file mystyle.css and formats the document based on 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:

body {
    background-color: #A0CC1C;
}

h1 {
    text-align:left;
    margin-left: 20px;
}

Multiple Style Sheets

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

For example, an external style sheet has three attributes for the h1 selector:

h1 {
    text-align:left;
}

The internal style sheet has two attributes for the h1 selector:

h1 {
    text-align:left;        font-size:20pt;   
}

If this page with an internal style sheet is also linked to an external style sheet, then the style obtained by h1 is:

Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    text-align:left;
}
</style>
</head>
Try it yourself »

Multiple style priorities

Style sheets allow style information to be specified in multiple 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 tables within the same HTML document.

In general, the priorities are as follows:

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

Example

<head>
<style>
h1 {
    text-align:left;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it yourself »