Lesson 5 – CSS3 Font And Text Properties

CSS3 has some properties dedicated to formatting text and fonts. Let us start with CSS Font properties first.

CSS3 Font Properties

The following is a brief explanation of all the CSS3 properties to style the webpage’s font.

  • The font-family property enables you to change the webpage’s font.
  • The font-size property will change the size of the font.
  • The font-weight property allows you to make the font appear lighter or bolder to the readers.
  • The font- variant property helps you create a small-caps effect.
  • You can also use shorthand font property to set some of the other font properties.

Let us now see all these properties in operation in the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 Font Properties</title>
</head>
<body>
    

Font-Family property changes the font front or simply the font

Font-size property changes font's size

Font weight property makes font appear bolder of lighter

You can create a small-caps effect using the font-variant property

The shorthand font property enables you to set many of the other font properties

</body> </html>

Here is the final output of the above code

CSS3 Text Properties

Just like fonts, there are a number of CSS3 properties to control styling and presentation of the text.

  • We use the color property to set the text color.
  • The word-spacing property increases or decreases space between two words.
  • The letter-spacing property increases or decreases space between letters of a word.
  • We set text direction using the direction property.
  • If you want to indent a paragraph’s text, you will use the text-indent property.
  • The text-decoration property enables you to overline, underline, or strikethrough text.
  • The text-align property aligns the text to right, center, or left.
  • For capitalizing the text or converting it to upper or lower case, you will use the text-transform property.
  • The text-shadow property adds a shadow around the text.

Now we check how these properties work in CSS3.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 Text Properties</title>
</head>
<body>
    

We use color property to set the text's color

The word-spacing property adds or decreases space between a word's letters

The word-spacing property adds or subtracts space between two words.

Text direction property changes text's direction

The text-indent property indent's the text

Text decoration property for overlinesing, underlining, or striking through the text.

text-align property aligns the text according to the assigned value

text-property transform the text to uppercase or lowercase

text-shadow property adds shadow around the text

</body> </html>

Here is the visual presentation of the above style rules.

In the next lecture, we will discuss CSS3 Links and Borders