Lesson 18 - Text & Color
LEARN
Office Hours
- If you need help please attend office hours
- Connect in person of via zoom
- Check the Canvas page for details
- Wednesday Lab Session 2:30-3:20 in Kepner 0090
Reading for Today
- Read 3.2 Basic selectors
- Follow Reading Schedule
Today
- CSS Text Properties
- CSS Color Properties
CSS Rule Set
- Example Rule Set
css
h1 {
font-family: serif;
font-size: 120%;
}
CSS Rule Set
- CSS syntax
```css selector { property: value; / one rule / property: value; }
```
Hooking up CSS
- Link the Stylesheet to each HTML page
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS Property Groups
- Text
- Color
- Spacing
- Borders
Text Properties
- font-family
- font-size
- font-weight
- text-align
- text-shadow
font-family
- Inherited by all descendants
```css body { font-family: Arial, Helvetica, sans-serif; }
p { font-family: "Times New Roman", Times, serif; } ```
Size Units
- Units of size for values
20px - 20 pixels
10pt - 10 points
2em - twice the line height (M)
50% - half the size
font-size
- Multiple units
css
p {
font-size: 20px; /* in pixels */
font-size: 12pt; /* in points */
font-size: 150%; /* parent element */
font-size: 1.5em; /* M is line height */
}
font-weight
- Special font treatment
```css p { font-weight: 400; / normal / font-weight: normal; / 400 /
font-weight: 700; /* bold */
font-weight: bold; /* 700 */
font-weight: lighter; /* parent element */
} ```
text-align
- Where does the space go?
css
p {
text-align: left;
text-align: center;
text-align: right;
}
text-shadow
- Give a 3D look
```css h1 { text-shadow: 2px 2px; }
h2 { text-shadow: -2px -2px 4px yellow; } ```
font
- Shorthand font property
css
p {
font: italic bold 16px Arial, sans-serif;
font: 120% Times;
}
Color Properties
- color
- background-color
Color Values
- By Name
- By RGB
- By Hexidecimal
```css h1 { color: rgb(20%, 20%, 20%); / Red Green Blue /
color: silver; /* Named color */
color: #0a0a0a; /* Hex - Red Green Blue */
} ```
Hexidecimal Values
```
01ffa5 -- Hex value
R -- 01 (1) G -- ff (255) B -- a5 (165) ```
Hexidecimal Colors
```
ffffff -- white
000000 -- black
080808 -- gray
ff0000 -- red
00ff00 -- green
0000ff -- blue
```
BUILD
CSS Demo
- Demo Code
- Study code so that you can reproduce these results
- See Demo on Server