CSS Tutorial - Lesson 3 - Properties background-color, font-style, font-weight, text-align, text-decoration, text-transform.

16/04/2025, by Ivan

Over time, many HTML tags have been created, but with the widespread adoption of CSS, some of them should be avoided—such as , , , and <center>. We’ll look at other “deprecated” tags later. These CSS properties will help you reduce unnecessary code in your HTML and move styling into CSS files.

In the previous lesson, we explored how to add CSS properties and choose colors. In this lesson, we’ll look at some common formatting features that you may have seen in HTML before—but now we’ll do it the proper way using CSS.

Background-color

This property can be used not only for block backgrounds but also for text and links. For example:

span {
  background-color: yellow;
}

Or for a link:

a {
  background-color: blue;
}

You can also use numeric color values, e.g., #ff0000 for red.

Font-style

Instead of using tags like , , or , which are outdated for visual formatting, use the font-style property. A common value is:

p {
  font-style: italic; /* italic text */
}

This replaces the tag with a proper CSS rule.

Font-weight

To apply bold styling instead of using the deprecated tag, use font-weight:

body {
  font-weight: normal; /* regular font weight */
}

p {
  font-weight: 400; /* regular */
}

span {
  font-weight: 700; /* bold */
}

a {
  font-weight: bold; /* bold */
}

Values like 400 or normal represent normal weight, while 700 or bold represent bold weight.

Text-align

The text-align property replaces the old <center> tag and the align attribute. Examples:

body {
  text-align: left;
}

p {
  text-align: center;
}

span {
  text-align: right;
}

div {
  text-align: center;
}

Text-decoration

To replace tags like <strike> (strikethrough) and (underline), use text-decoration:

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

Text-transform

The text-transform property lets you control letter casing, such as uppercase or lowercase text:

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

Don’t worry about memorizing every CSS property. As you revisit and use them in practice, the most important ones will become second nature. You can always look up the less common ones when needed.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience