How to Add CSS to HTML

How to Add CSS

The rules in a style sheet tell the browser reading it how to format the HTML page.

You can bring CSS into a page in three ways:

  • External CSS — a link to a separate .css file.
  • Internal CSS — a <style> element placed in the head section.
  • Inline CSS — the style attribute of an HTML element.

External CSS

Editing a single external style sheet is enough to change the look of a whole website.

For that to work, every HTML page needs a <link> element in its <head> section that points to the file.

Any text editor will do for writing the file. It has to carry a .css extension and should be free of HTML tags.

Note: A value and its unit stay together with no space between them, so margin-left: 20px; is right and margin-left: 20 px; is not.

Example

A <link> element in the <head> connects the external style sheet to the page.

Prompt
An HTML page that links to an external style sheet. In the <head>, use a <link rel="stylesheet" href="mystyle.css"> element to pull in external CSS. Add a heading and a paragraph in the body.
Output: complete HTML page

mystyle.css

Inside the linked mystyle.css file you will find CSS only, with no HTML.

styles.css 
body {
background-color: lightblue;
}

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