Lesson 17 - Using Stylesheets
LEARN
Reading for Today
- Read 3.1 Using CSS in HTML
- Follow Reading Schedule
Stylesheets
- Linking a CSS
- CSS Syntax
- Text Properties
CSS Rule Set
- Example Rule Set
- Use a specific font for h1 tags
css
h1 {
font-family: serif;
font-size: 120%;
}
CSS Rule Set
- CSS syntax
```css selector { property: value; / one rule / property: value; }
```
Hooking up CSS
- Use external CSS
- Link the Stylesheet to each HTML page
html
<head>
<link rel="stylesheet" href="style.css">
</head>
Groups of CSS Properties
- Text
- Color
- Spacing
- Borders
Using CSS
- Demo Code
- Study code so that you can reproduce these results
- See Demo on Server
BUILD
Create a CSS File
- Build CSS file and use it in your HTML page
css
h1 {
color: red;
}
Style Your Page
- Link external CSS File (my_style.css)
html
<head>
<link rel="stylesheet" href="my_style.css">
</head>
Create a CSS File
- Build CSS file for Your Home Page
- my_style.css
```css h1 { color: green; background-color: gray; }
a { color: red; }
li { color: green; } ```
Explore Source Code
- View source code in browser
- Follow links to embedded stylesheet
- Enable developer tools