Chapter 2

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

· External CSS

· Internal CSS

· Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

Example

External styles are defined within the element, inside thesection of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="new.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 any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "new.css" file looks:

"new.css"

body {
  background-color: lightblue;
}

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

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the

Courses

Chapter 2

"new.css"

Internal CSS