Tech Articles

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.

Have something to say about this article? Comment below or share it with us on Facebook or Twitter.

Step by step hacking tutorials about wireless cracking, kali linux, metasploit, ethical hacking, seo tips and tricks, malware analysis and scanning.



Subscribe to Our Newsletter and Get Instant Delivered to Your Email Inbox.

We respect your privacy and take protecting it seriously.

Leave a Reply

Your email address will not be published. Required fields are marked *