Fonts
Font Family
font-family property is used to declare a list of font family names (like Times, Arial) and generic family names (like fantasy, serif, sans-serif) for an element in a priority order. Family name that contains space in them must be written inside single or double quotes.
| Property | Possible Values | Description |
|---|---|---|
| font-family | family-name | Eg: tohima, arial, times |
| generic-name | serif, sans-serif, cursive, fantasy, monospace | |
| inherit | inherit the value of element's parent |
Syntax for using font-family:
body
{
font-family:Tohima,Arial,"Times New Roman";
}
Font Size
font-size is used to set the font size of text for an element. font-size can be in pixels, ems or percentage.
| Property | Possible Values | Description |
|---|---|---|
| font-size | absolute-size | Eg: xx-small, x-small, small, medium, large, x-large, xx-large |
| relative-size | Eg: smaller, larger | |
| length in pixel or percentage or em | Eg: 10px | |
| inherit | inherit the value of element's parent |
Syntax for using font-size:
p
{
font-size:20px;
}
Font Style
font-style property is used to set the font-style of text for an element. Using font-style you can render your text in bold, italics or oblique.
| Property | Possible Values | Description |
|---|---|---|
| font-style | normal | This is the default style. |
| italic | It makes the text italicized | |
| oblique | It makes the text oblique | |
| inherit | inherit the value of element's parent |
Syntax for using font-style:
span
{
font-style:italics;
}
Font Variant
font-variant property is used to set the text in small caps font for an element. Small caps means that every lowercase letter is converted into uppercase letter but the font-size of those letters is small as compared to rest of the text.
| Property | Possible Values | Description |
|---|---|---|
| font-variant | normal | This is the by default |
| small-caps | This converts every lowercase letter to uppercase but the font-size remains smaller than other text. | |
| inherit | inherit the value of element's parent |
Syntax for using font-variant:
div
{
font-variant:small-caps;
}
Font Weight
font-weight property is used to set the thickness of text for an element.
| Property | Possible Values | Description |
|---|---|---|
| font-weight | normal | This is the by default |
| bold | This renders the text as bold. | |
| lighter, bolder | This renders your text thickness relative to its parent elements font-weight. | |
| 100 - 900 | Numerically sets the thickness of text. 100 is the thinnest, 400 for normal, 700 for bold. | |
| inherit | inherit the value of element's parent |
Syntax for using font-weight:
p
{
font-weight:300;
}
font
font property is a shorthand property that is used to set all font properties in one line. This is very useful and greatly reduce space and time for writing your CSS font properties.
Syntax for using font shorthand:
selector {
font: style variant weight size/line-height family
}