Most Common Font Style-sheet Properties in CSS

There are many style sheet properties available for each of the HTML physical and logical styles. CSS also enables you to add emphasis in many ways not possible with HTML. For example, while HTML only permits you to add underlines to text, CSS includes properties capable of creating overlines.

S.No	Sample Property Value	Description	Possible Values	Notes
1	font-style: italic	Changes the style of the text, causing it to appear vertical or slightly slanted. Similar to using <i> in HTML.	Can be normal, italic, or oblique.	Italic and oblique
2	font-variant: small	Lets you specify text as small capitals.	Can use normal or small caps.	n/a
3	font-weight: bold	Changes how heavy or thick the font appears. Similar to using <b> in HTML.	Can use keywords (normal, bold, bolder, lighter) or numbers (100, 200, 300…900). Normal is 400, bold is 700; bolder and lighter cause the weight to be one step lighter or darker than the rest of the text.	Some browsers only understand normal and bold.
4	letter-spacing: 10em	Changes the spacing between the letters. Similar to kerning in other programs and print methods.	Can be specified by a length value (such as 5em) or the keyword normal.	Negative values provide for a tighter, more condensed display, where letters run together.
5	line-height: 2	Changes the spacing between lines. Similar to leading in other programs and print methods.	Can be specified as a percentage of the font size (such as 200% to achieve a “double-spaced” look), multiples of the font size (1.5 or 2), lengths (72px), or with the keyword normal.	n/a
6	text-decoration: overline	Lets you alter the appearance of the text in a variety of ways.	Can use none, underline, overline, linethrough, or blink.	Non-linked text defaults to none, while linked text defaults to underline.
7	text-transform: uppercase	Changes the case of the text.	Can use none, capitalize (capitalizes all words), uppercase (makes all letters uppercase), or lowercase (makes all letters lowercase).	n/a
8	word-spacing: 20em	Changes the spacing between words. Similar to tracking in other programs or print methods.	Can be specified by a length value (such as 20em) or the keyword normal.	Negative values provide for a tighter, more condensed display where words run together.
9	font-stretch: wider	Lets you expand and condense characters in fonts.	Can be absolute keywords (ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded) or relative keywords (wider and narrower).	Browser support varies.
10	text-shadow: 10px, 20px, 5px, blue	Allows for text to have a shadow effect.	Can specify a length value for both the top and left side of the shadow, as well as a color and optional color blur radius. (Commas separate these values.)	Browser support varies.

You may also like:

Related Posts