CSS Text and Layout
By Emmanuel Chinonso
Web Developer
CSS Text
CSS provides a range of properties to style and control the display of text.
Text Color
The color
property is used to specify the color of the text.
p { color: red;}
In this example, the text color of the p
element is set to red.
Text Alignment
The text-align
property is used to specify the horizontal alignment of the text. It can be set to left
, right
, center
, or justify
.
p { text-align: center;}
In this example, the text in the p
element is centered.
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
CSS Code:
img.top { vertical-align: top;}img.middle { vertical-align: middle;}img.bottom { vertical-align: bottom;}
Text Decoration
The text-decoration
property is used to add decoration to the text. It can be set to underline
, overline
, line-through
, or none
.
p { text-decoration: underline;}
In this example, the text in the p
element is underlined.
Text Transformation
The text-transform
property is used to specify the capitalization of the text. It can be set to uppercase
, lowercase
, capitalize
, or none
.
p { text-transform: uppercase;}
In this example, the text in the p
element is transformed to uppercase.
Text Spacing
The letter-spacing
property is used to specify the space between characters, and the word-spacing
property is used to specify the space between words.
p { letter-spacing: 2px; word-spacing: 2px;}
In this example, the space between characters and words in the p
element is set to 2px.
Text Indentation
The text-indent
property is used to specify the indentation of the first line of text.
p { text-indent: 50px;}
In this example, the first line of text in the p
element is indented by 50px.
Line Height
The line-height
property is used to specify the height of a line.
p { line-height: 1.6;}
In this example, the line height in the p
element is set to 1.6, which means the line height is 1.6 times the size of the default line height.
Text Shadow
The text-shadow
property is used to apply a shadow effect to the text. It takes four values: the horizontal offset, the vertical offset, the blur radius, and the color of the shadow.
p { text-shadow: 2px 2px 4px blue;}
In this example, a blue shadow is applied to the text in the p
element. The shadow is offset 2px to the right and 2px down from the text, and it has a blur radius of 4px.
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
CSS Code:
h1 { letter-spacing: 3px;}h2 { letter-spacing: -3px;}
Line Height
The line-height property is used to specify the space between lines
CSS Code:
p.small { line-height: 0.8;}p.big { line-height: 1.8;}
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
CSS Code:
h1 { word-spacing: 10px;}h2 { word-spacing: -5px;}
White Space
The white-space property specifies how white-space inside an element is handled.
CSS Code:
p { white-space: nowrap;}
This shows how disable text wrapping inside an element.
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
Related Posts