text- vs font- Properties in CSS – Learn the Difference
What is the difference between a text-
and a font-
property in CSS? Let's find out.
text-
A CSS text- property specifies a text's layout on the page.
For instance, to specify a text's horizontal alignment, you will use the text-align
property like so:
h1 {
text-align: center;
}
font-
A CSS font- property specifies a text's design.
For instance, to specify a text's size, you will apply a font-size
property like so:
h1 {
font-size: 4.5rem;
}
CSS Text and Font Properties
Below are the CSS text and font properties.
CSS Text Properties | CSS Font Properties |
---|---|
|
|
|
|
CodeSweetly TIP Use |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use the font
property as a shorthand for the following CSS properties:
font-stretch
(optional)font-style
(optional)font-variant
(optional)font-weight
(optional)font-size
(required)line-height
(optional and must immediately succeed font-size like this: 2rem/5)font-family
(required and must be the last specified value)
Example:
p {
font: condensed italic small-caps bold 2rem/50px cursive;
}
Overview
CSS text-
properties format a text's layout while font-
properties design the text.