1 CSS Font & Text Properties
CS380
CSS properties for fonts
2
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
font-family
3
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
Enclose multi-word font names in quotes
More about font-family
4
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
We can specify multiple fonts from highest to lowest priority
Generic font names:
serif, sans-serif, cursive, fantasy, monospace
If the first font is not found on the user's computer, the
next is tried
Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font
font-size
5
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
vague font sizes: ,
xx-small x-small , , medium, large, x-large, xx-
small
large, smaller, larger
percentage font sizes, e.g.: 90%, 120%
font-size
6
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
pt specifies number of point, where a point is 1/72 of an inch
onscreen
px specifies a number of pixels on the screen
em specifies number of m-widths, where 1 em is equal to the
font's current size
font-weight, font-style
7
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
Either of the above can be set to normal to turn them off (e.g.
headings)
CSS properties for text
8
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
gaps between the various portions of
word-spacing,
the text
letter-spacing
indents the first letter of each
text-indent
paragraph
Color
9
You can set the color of text with the following:
color: value;
Possible values are
color name – example:(red, black…)
hexadecimal number – example:(#ff0000, #000000)
RGB color code – example:(rgb(255, 0, 0), rgb(0, 0,
0))
text-align
10
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
text-align can be left, right, center, or
justify
text-decoration
11
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.
output
can also be overline, line-through, blink, or
none
effects can be combined:
text-decoration: overline underline;
Letter Spacing
12
You can adjust the space between letters in the
following manner. Setting the value to 0, prevents
the text from justifying. You can use negative values.
letter-spacing: value;
Possible values are
normal
length
Example: letter-spacing:5px;
Text Transform
13
You can control the size of letters in an (X)HTML
element with the following:
text-transform: value;
Possible values are
none
capitalize
lowercase
uppercase
Word Spacing
14
You can adjust the space between words in the
following manner. You can use negative values.
word-spacing: value;
Possible values are
normal
length
