There are three ways to insert CSS:

  • Inline style
  • Internal style sheet
  • External style sheet

 

Inline styles:

It is used to apply a unique style to a single HTML element. To use it, we should add the style attribute to the desired element and this style attribute can have any number of property-value pairs. For example,

<p style="color: red; margin-left:40px;">This is a paragraph</p>

 

Internal style sheet:

Internal style sheet is used when one single page has a unique style. It is added in the head section of an HTML page and internal styles are defined within the<style> element. For example,

<head>

<style>

p{

Color: black;

Text-align: left;

Margin-left:30px;

}

h1{

color: red;

text-align:center;

}

</style>

</head>

 

External style sheet:

With an external style sheet, we can change the look of the entire website by changing just one file. External style sheets are added in the head section of the HTML page and defined within <link> element.

The link element contains the attributes ‘rel’, ‘type’ and ‘href’. 

For example,

<head>

<link rel=”stylesheet” type=”text/css” href=”example.css”>

</head>

 

This is how the code will look inside example.css;

p{

Color: black;

Text-align: left;

Margin-left:30px;

}

h1{

color: red;

text-align:center;

}

 

The external style sheet is the best-used method to add CSS into a webpage. But, there are some things which need to be kept in mind such as the external CSS file should not contain any HTML tags and the style sheet file must be saved with a .css extension. Also, an external style sheet can be written in any text editor.

 

Report Error/ Suggestion

Related Posts:

[yuzo_views]











CopyRight © 2019

CopyRight © 2019