Text
This lesson discusses the text properties in CSS and how they affect the layout of elements on a web page.
Text
Text Align
The text-align property is used to set the alignment of the text
within an element. The text can be aligned to the left, right, center,
or justified.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the text-align property. In this
example, the text in the <p> element is aligned to the center.
Text Decoration
The text-decoration property is used to set the decoration of the text
within an element. The text can be none, underline, overline,
line-through, or a combination of these values.
This is a paragraph.
<p>This is a <span class="underline">paragraph</span>.</p>
The code above shows an example of the text-decoration property. In this
example, the text in the <span> element with the class underline is
underlined.
Text Transform
The text-transform property is used to set the transformation of the
text within an element. The text can be transformed to uppercase,
lowercase, capitalize, or none.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the text-transform property. In this
example, the text in the <p> element is transformed to uppercase.
Line Height
The line-height property is used to set the height of a line of text
within an element. The line height can be set to a specific size, such as
pixels or percentages, to create different line heights.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the line-height property. In this
example, the line height of the text in the <p> element is set to 1.5
times the font size.
Font Family
The font-family property is used to set the font family of the text
within an element. The font family can be set to a specific font name or
a list of font names to use as fallbacks.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the font-family property. In this
example, the font family of the text in the <p> element is set to Arial,
with a fallback to the sans-serif font family.
Font Size
The font-size property is used to set the font size of the text within
an element. The font size can be set to a specific size, such as pixels
or percentages, to create different font sizes.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the font-size property. In this
example, the font size of the text in the <p> element is set to 16
pixels.
Font Weight
The font-weight property is used to set the weight of the text within
an element. The font weight can be set to a specific value, such as
normal, bold, or a numeric value.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the font-weight property. In this
example, the font weight of the text in the <p> element is set to bold.
Font Style
The font-style property is used to set the style of the text within an
element. The font style can be set to normal, italic, or oblique.
This is a paragraph.
<p>This is a paragraph.</p>
The code above shows an example of the font-style property. In this
example, the font style of the text in the <p> element is set to italic.