On

There are three ways of inserting a style sheet:

  • Internal CSS 
  • External CSS 
  • Inline CSS


How to add Internal CSS?


An internal style sheet should be used if one single HTML page has a unique style. You will have to write internal style inside the <style> element, in the head section. Example:



<html>
<head>
<style>
body {
  background-color: yellow;
}

h1 {
  color: #691983;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

 

How to add External CSS?

You can change the look of an entire website by changing just one file using an external .css file. Each HTML page must include a reference to the external .css file inside the <link> element, in the head section. Example:


<html>
<head>
<link rel="stylesheet" type="text/css" href="files/style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in even notepad or notepad++, and must be saved with a .css extension. Here is how the "style.css" file looks:



body {
  background-color: yellow;
}

h1 {
  color: #691983;
  margin-left: 40px;
}



How to add Inline CSS?


An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Example:



<html>
<body>

<h1 style="color:violet;text-align:center;">This is a heading</h1>
<p style="color:green;">This is a paragraph.</p>

</body>
</html>