Flash cards
Review the key moves
What is the main idea behind How To Add CSS?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<!___ html>Put the learning moves in the order that makes the concept easiest to apply.
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.
There are three ways of inserting a style sheet:
- External CSS - link to an external .css file
- Internal CSS - use the <style> element in the head section
- Inline CSS - use the style attribute on HTML elements
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 <link> element, inside the head section.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Live preview
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 "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Note
Do not add a space between the property value (20) and the unit (px): Incorrect (space): margin-left: 20 px; Correct (no space): margin-left: 20px;