Home >>CSS Tutorial >How to add CSS

How to add CSS

How to add CSS

In HTML pages CSS is added to format the document according to info in the stylesheet. There are three ways to put CSS in HTML documents.

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

It may be used for a single element to apply a unique style.

To apply the CSS, add attribute style to the relevant element. Any type of CSS property can contain by style attribute.

Let's take an example of Inline CSS:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a H1 heading</h1>
<h2 style="color:red;">This is a paragraph.</h2>
</body>
</html>
Output:

This is a H1 heading

This is a paragraph.

Internal CSS

It may be used for a single HTML page to apply a unique style.

For applying Internal CSS style, add element and execute your internal style inside the head section.

Let's take an example of internal CSS:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: dodgerblue;
}

h1 {
  color: #000;
  margin-right:-40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a paragraph.</h2>
</body>
</html>
Output :

This is a heading

This is a paragraph.

External CSS

It is used to apply CSS on more than one page or all pages and by changing just one file, you can change the look of an entire website.

You can also add external style sheet file inside the <link> element under the head section.

External CSS code is written in a CSS file. Its extension must be .css for example style.css

Let's take an example of internal CSS:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a paragraph.</h2p>
</body>
</html>
Output :

This is a heading

This is a paragraph.