CSS Font
➔ Font selection is very important for HTML pages.
➔ Using the CSS font property, it is possible to change the size, color, style and more of the text.
Generic Font Families
CSS has five generic font families.
- Serif fonts have a short stroke at the edge of each letter.
- Sans-serif fonts have clean lines (no small strokes attached).
- Monospace fonts have the same fixed width for all characters.
- Cursive fonts mimic human handwriting.
- Fantasy fonts are decorative, expressive fonts.
CSS Font Attributes
Here are some common font attributes:
colorfont-familyfont-sizefont-stylefont-variantfont-weight
CSS Font Color
➔ The color attribute is used to change the color of the text.
Syntax
color: color | initial | inherit;
Property values
| Value | Description |
|---|---|
| color | Specifies the text color. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Practice with examples
To see the output for every example click "Try it Now"
Click on the "Try it Now" button to see how it works.
Example
#p1 {
font-family: "Times New Roman", Times, serif;
}
#p2 {
font-family: Arial, Helvetica, sans-serif;
}
#p3 {
font-family: "Lucida Console", "Courier New", monospace;
}Click on the "Try it Now" button to see how it works.