How To Make HTML Text Stylish Using CSS

This is part 5 of our CSS basics series and in this article, you will learn everything you need to know to make HTML text stylish using CSS. With CSS you can change the size and shape of the text with a range of properties. Let’s talk about that.

Font-family

Font-family specifies font itself like Times New Roman, Arial, or Verdana.

Users’ browser has to find the font you specify which in most cases means it needs to be on their computer so there is no point in using obscure fonts that are only on your computer. There are a select few safe fonts (the most used are Arial, Verdana, and Times New Roman), but you can specify more than one font by separating them with commas. The purpose of this is that if the user does not have the first font you specified, then the browser will go through the list until it finds one user has. This is useful because different computers sometimes have different fonts installed. You can use a wider selection than the safe fonts using several methods like importing fonts from Google fonts, but if for the beginning to learn CSS, you should not worry about that just yet.

Font-size

Font-size changes the size of the font. Worth noticing that text-like headings should use HTML tags. Do not simply apply a bigger font size to a paragraph and call it a header.

Font-weight

Font-weight is commonly used as font-weight: bold or font-weight: normal. Other values are bolder and lighter or you can use numeric expressions like 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, and 900.

Font-style

Font-style states whether the text is italic or not. It can be written in font-style: italic or font-style: normal.

Text-decoration

Text-decoration states whether the text is underlined, overlined, or crossed.

• text-decoration: underline, does what you would expect.
• text-decoration: overline places a line above the text.
• text-decoration: line-through puts a line through the text.

Text-transform

Text-transform will change the case of the text.

• text-transform: capitalize turns the first letter of every word into uppercase.
• text-transform: uppercase turns everything into uppercase.
• text-transform: lowercase turns everything into lowercase.
• text-transform: none I’ll leave it for you to work out.

Text spacing

Another thing you have to know is text spacing. The letter-spacing and word-spacing are for spacing between letters and words. The value can be length or just set to normal.

The line-height property sets the height of the lines in an element such as a paragraph. Font size stays the same. It can be number, length, percentage, or normal.

The text-align property will align the text inside an element to the left, right, center, or justify.

The text-indent property will indent the first line of a paragraph to a given length or percentage.