❐CSS❐

❐wD Learn

CSS

CSS Introduction

CSS Selectors

CSS Color

CSS Background

CSS Border

CSS Margin

CSS Padding

CSS Box Model

CSS Text

CSS Font

CSS Link

CSS List

CSS Overflow

CSS Display

CSS Combinators

CSS Pseudo-classes

CSS Navigation Bar

CSS Hover

CSS Z-index

CSS Media Queries

CSS Shadow

CSS 2D Transform

CSS Animations

CSS Button

CSS FlexBox

CSS Grid

CSS Pagination

CSS Text Styling In this tutorial, we will cover some of the important text styling properties:

Text Decoration The text-decoration property adds various types of text decorations.

Syntax


selector {

text-decoration: value;

}

Example

<html lang="en">
<head>
<style>
#p1 {text-decoration: overline;}
#p2 {text-decoration: underline;}
#p3 {text-decoration: line-through;}
#p4 {text-decoration: overline underline;}
</style>
</head>
<body>
<p id="p1">text-decoration: overline</p>
<p id="p2">text-decoration: underline</p>
<p id="p3">text-decoration: line-through</p>
<p id="p4">text-decoration: overline underline</p>
</body>
</html>
Text Alignment The text-align property is used to align the text within the container. The container can be a div, section, etc.

Syntax


selector {

text-align: value;

}

Example


<html lang="en">
<head>
<style>
#p1 {text-align: left;}
#p2 {text-align: right;}
#p3 {text-align: end;}
#p4 {text-align: justify;}
</style>
</head>
<body>
<p id="p1">text-align: left</p>
<p id="p2">text-align: right</p>
<p id="p3">text-align: end</p>
<p id="p4">text-align: justify</p>
</body>
</html>
Text Transformation It transforms the text case.

Syntax


selector {

text-transform: value;

}

Example

<html lang="en">
<head>
<style>
#p1 {text-transform: uppercase;}
#p2 {text-transform: lowercase;}
#p3 {text-transform: capitalize;}
#p4 {text-transform: none;}
</style>
</head>
<body>
<p id="p1">text-transform: uppercase</p>
<p id="p2">text-transform: lowercase</p>
<p id="p3">text-transform: capitalize</p>
<p id="p4">text-transform: none</p>
</body>
</html>
Letter Spacing The letter-spacing property allows you to specify the spacing between each character in the text. The property values can be in pixels (px), em, rem, percentage (%), etc.

Example

<html lang="en">
<head>
<style>
h1 {
letter-spacing: 5px;
}
</style>
</head>
<body>
<h1>CodeWithme</h1>
</body>
</html>
Line Height The line-height property controls the spacing between two lines of text.

Example

<html lang="en">
<head>
<style>
h1 {
line-height: 3.5;
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
<h1>Developer and CodeWithHarry.com founder</h1>
</body>
</html>
Text Shadow The text-shadow property adds a shadow to the text.

Example

<html lang="en">
<head>
<style>
h1 {
text-shadow: 2px 3px 4px red;
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
</body>
</html>