What Does CSS Font ?
Font property serves to set the font on an HTML element, be it type, size, style or its variations.
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: “Times New Roman”.
There are several kinds of font properties include:
- Font, to set the overall values that are used on an element.
example:
p {
font: bold 20px Arial, Helvetica sans-serif;
}
- Font-family, to set the model / type of font in an element.
example:
p {
font-family:"Verdana" Arial Helvetica sans-serif ;
}
- Font-size, to adjust the font size on an element. Value can be a unit, percentage, or inherit, xx-small, x-small, small, smaller, xx-large, x-large, large, larger and medium.
example:
p {
font-size:xx-large ;
}
- Font-style, to set the model / style of the font in an element. Value can be inherit, italic, normal and oblique.
example:
p {
font-style:italic ;
}
- Font-weight, to set the thick / thin font in an element. Value can be bold, normal, inherit, bolder, lighter, or the unit number from 100-900.
example:
p {
font-weight:bold;
}
What Does CSS Text ?
Text property serves to set the style or style of text in an element.
There are several types of Text properties include:
- Text-align, to determine the alignment of text on a elemen.Nilainya can be left, center and right.
example:
p {
text-align:left;
}
- Text-transform, to change the text to be large or small letters on an element. Its value can be either uppercase, lowercase, capitalize, and none.
example:
p {
text-transform:uppercase;
}
- Text-indent, to set the distance in the first text in a paragraph in an element. Its value can be either inherit or units.
example:
p {
text-indent:4px;
}
- Line-height, to set the distance between lines of text in an element. Its value can be either a percentage or units.
example:
p {
line-height:14px;
}
- Letter-spacing, to adjust the distance of space between the text of an element. Value can be inherit, normal, or the percentage of units.
example:
p {
letter-spacing:1px;
}
- Text-decoration, to specify the text decoration on an element. Value can be underline, line-through, overline, blink, and none.
example:
p {
text-decoration:underline;
}
