WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS How to


In this chapter learn about css types


Three methods to Insert CSS

There are three methods of inserting a style sheet:

  • Internal style sheet
  • External style sheet
  • Inline style

Internal Style Sheet

internal style sheet used for one single page(unique style)

Internal styles : it is a <style> element, put inside the <head> section of an HTML page:

Example

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

h1 {
    color: #CC5A3D;
    margin-left: 20px;
}
</style>
</head>
Try it yourself »

Inline Styles

Inline styles used to add a unique style for one element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows You see single element how to change the color and the left margin of a <h1> element:

Example

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

External Style Sheet

External style sheetThis is good method for change entire website look using one .css file

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example

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

External style sheet file extension is .css . We can use use any text editor but file not contain any html tags . The style sheet file must be saved with a .css extension.

Here is how the "myStyle.css" looks:

body {
    background-color: #A0CC1C;
}

h1 {
    color: #CC5A3D;
    margin-left: 20px;
}

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. 

Example

Assume that an external style sheet has the following style for the <h1> element:

h1 {
    color: #A0CC1C;
}

then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
    color: #CC5A3D;   
}

internal style is details after the link to the external style sheet, the <h1> elements will be "#CC5A3D":

Example

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

If the internal style is defined before the link to the external style sheet, the <h1> elements will be "#A0CC1C":

Example

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