CSS can be used to style text by changing the font, color, size, weight, spacing, alignment, and more.

HTML provides a few tags that are used to give text special meaning and the browser will often style this text differently depending on what tag is used. These tags are more for marking up text in a semantic way so that the browser understands the meaning of each section of text.

Below are a few of the HTML tags most often used.

<b>This text is bold.</b>

<strong>This text is important!</strong>

<i>This text is italicized.</i>

<em>This text is emphasized.</em>

<u>This text is underlined because it is missspelled.</u>

<small>This is some smaller text.</small>

These tags are not meant to exist on their own. They are meant to be placed within heading tags or paragraph tags.

<p>This text is <strong>important!</strong></p>

Below are several examples of stying text using CSS. They include setting the text color, font-size, font-weight, font-style, text-alignment, and text-transform.

/* all headings will have red, bold text */
h1, h2, h3, h4, h5, h6 {
    color: red;
    font-weight: bold;
}

/* all paragraphs will have a font size of 18px; */
p {
    font-size: 18px;
}

/* text with the class .our_mission will be italicized and centered
in its parent element */
.our_mission {
    text-align: center;
    font-style: italic;
}

/* text within the HTML small tag will be 80% as big as its parent
element text, green, and transformed to all uppercase */
small {
    color: green;
    font-size: 80%;
    text-transform: uppercase;
}

• CSS – color Property
  The color property specifies the color of the text of an element and can be expressed as a hexadecimal value, RGB, HSL, or as an HTML color keyword.
• CSS – font-style Property
  The font-style property specifies the font style for a text: normal, italic, or oblique.
• CSS – font-variant Property
  The font-variant property specifies whether or not a text should be displayed in a small-caps font.
• CSS – font-weight Property
  The font-weight property sets how thick or thin characters in text should be displayed.
• CSS – letter-spacing Property
  The letter-spacing property defines the amount of space between characters in a string of text.
• CSS – line-height Property
  The line-height property specifies the height of a line, which is the spacing between lines of text when wrapping to new lines, such as in paragraphs.
• CSS – text-align Property
  The text-align property specifies the horizontal alignment of text in an element (left, right, centered, or justified).
• CSS – text-decoration Property
  The text-decoration property specifies the decoration added to text, and is a shorthand property for the other text-decoration properties.
• CSS – text-indent Property
  The text-indent property specifies the indentation of the first line in a text-block. The first line will be outdented to the left if the value is negative.
• CSS – text-shadow Property
  The text-shadow property accepts a comma-separated list of shadows to be applied to the text.
• CSS – text-transform Property
  The text-transform property controls how text is capitalized or not capitalized.
• CSS – word-spacing Property
  The word-spacing property increases or decreases the white space between words, with negative values used to condense the space between the words.