CSS How To

How To Insert CSS

There are three ways of inserting a style sheet.

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

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

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

Here is how the “mystyle.css” looks:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Internal Style Sheet

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

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

h1 {
  color: maroon;
  margin-left: 40px;

</style>
</head>

Inline Styles

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

<h1 style=”color:blue;margin-left:30px;”>This is a heading</h1>

Updated: February 5, 2019 — 5:37 am
Java Script © 2019