How to add CSS to HTML Web Page

This tutorials will teach you How to add CSS to HTML Web Page. You can apply cascading style sheets in your HTML file in three ways:

  • Internal style sheet
  • External style sheet
  • Inline style

Internal Style Sheet

The page in which we want to apply the style, we write the CSS code inside the tag of the html of that page.

Example

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

h1 {
  color: maroon;
  margin-left: 50px;
} 
</style>
</head>
<body>

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

</body>
</html>

External Style Sheet

In this method , we create a separate file and write the code of CSS and save it with the .css extension, then link the file to the page where the style is to be applied. To link the CSS file, use the tag in the section of html.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

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

</body>
</html>

Inline Styles

The HTML element that has the effect of applying the style, we can apply the CSS attribute directly to the style attribute in its tag.

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>