CSS Text with all Properties
CSS Text with all properties of text with programming examples; Part – 1
In this tutorial (CSS Text) we will learn a lots of format text including color, align, transform, index, decoration of text, text shadow, text spacing, word spacing, line height of text, white space and text direction with all the programming examples with and outputs.
CSS Text
Text in CSS including the lots of properties to design the text, we use these properties to decorate the text of HTML documentation, such as line braking, white space handing, text transformation etc. we learn all the properties in this ‘CSS Text’ Tutorial.
CSS Text Color
You know about text color in CSS and also used this in style element, so I won’t tell you much about this, let’s see the programming example below. The color property is used to set the color of text, the valid value to set the color of text is <color>.
Programming Example of Text Color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Example of CSS Text Color</title>
<style type="text/css">
#color-1 {color:rgb(83, 153, 2) ;}
#color-2 {color: red;}
#color-3{color: green;}
#color-4{color: blue;}
</style>
</head>
<body>
<div>
<h1 id="color-1">StudyMuch</h1>
<h2 id="color-2">My Color is Red.</h2>
<h3 id="color-3">My Color is green.</h3>
<h4 id="color-4">My color is Blue.</h4>
</div>
</body>
</html>
|
Output of above programming example,
 |
Above you can see the programming output of CSS Text Color, the text color is color is colorful.
CSS Text Align
The CSS text-align property is used to set the horizontally alignment of the text, to set the align we are using the valid value and this value are given below with functions, we see also programming example.
Valid Value to set CSS Text Align
- left: Using this property to set the align text to the left edge.
- center: Using this property to aligns text to the center.
- right: This property is used to set the text align to the right side.
- justify: This property is used to align text its left and right edge to the left and right edge of the line box except for the last line.
Example of CSS Text Align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Example of CSS Text Color</title>
<style type="text/css">
#color-1 {text-align: center;}
#align-2 {text-align: left;}
#align-3{text-align: right;}
#align-4{text-align: justify;}
</style>
</head>
<body>
<div>
<h2 id="align-2">My Align is in Left
Side.</h2>
<h1 id="align-1">StudyMuch</h1>
<h3 id="align-3">My Align is in Right
Side.</h3>
<h4 id="align-4">This is Justified.
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quidem, beatae?.</h4>
</div>
</body>
</html>
|
Output of above programming example
 |
You see the above programming output, first line align is left, second line align is center, third line align is right and the last two line is justified.
CSS Text Indent
This property text-indent is used to set the length of the indentation of a text. We can increase and decrease the indention length of text or paragraph using through CSS Text Indent property, valid value to use this property is <length> and <percentage>.
Example of CSS Text Indent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Example of CSS Text Color</title>
<style type="text/css">
#study{text-align: center;}
#indent-1{text-indent: 5px;}
#indent-2{text-indent: 25%;}
</style>
</head>
<body>
<div>
<h1 id="study">StudyMuch</h1>
<p id="indent-1">This is the
indented text, -StudyMich</p>
<p id="indent-2">This is also
indented text, -StudyMuch</p>
</div>
</body>
</html>
|
Output of the above programming example
 |
Above you can see the output of the program the indention length is different of both lines.
CSS Text Transform
The text-transform property is used to set the capitalization of the text, we Cn change the text’s capital letter, small letter, uppercase letter and lowercase letter through using this property.
Valid value is given below to using Text Transform;
- capitalize: Using this property to convert the first letter of each word to uppercase: and other character are still small letter.
- none: Using this to unchanged the case of text.
- uppercase: Using this property to converts a text to uppercase.
- lowercase: Using this property to converts a text to lowercase.
Example of CSS Text Transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Example of CSS Text Color</title>
<style type="text/css">
div{color: blue;}
#study{text-align: center;}
#p1{text-transform: capitalize;}
#p2{text-transform: uppercase;}
#p3{text-transform:lowercase;}
</style>
</head>
<body>
<div>
<h1 id="study">StudyMuch</h1>
<p id="p1">this text is capitalize, we
useed here capitalize property.</p>
<p id="p2">this text is uppercase, we
used here uppercase property.</p>
<p id="p3">This Text is Lowercase, We
used here Lowercase property.</p>
</div>
</body>
</html>
|
Output of above programming example,
 |
You see the above output we used here capitalize, uppercase and lowercase property to show different character.
CSS Text Shadow
In CSS the text-shadow property is used to add shadow of text. Each shadow is described by some combination X and Y offsets from the element, blur radius and we also fill the color on the text box through using this element.
Here the valid value to use the text-shadow property; <color>, offset-x offset-y and <length> value.
- <color>: Using this value to set the shadow with colorful, that means we can fill the color on shadow.
- offset-x offset-y: Its value is usually used to specific the shadow’s distance from the text. offset-x specific the horizontal distance between the text and shadow while offset-y is specific the vertical distance.
- <length>: This value is used to define the size of the shadow and blur.
Example of CSS Text Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Example of CSS Text
Color</title>
<style type="text/css">
div{font-weight: bold;}
#study{text-shadow:3px 3px 3px blue;
color: red;}
#p1{text-shadow:fuchsia 2px 5px;
color:darkgreen;}
#p2{text-shadow: 2px 5px 1px red;
}
#p3{text-shadow:2px 2px rgb
(123, 255, 0);}
#p4{text-shadow: 0 0 5px;
color:blue;}
#p5{text-shadow: 0 4px 2px red;
color: blueviolet;}
</style>
</head>
<body>
<div>
<h1 id="study">StudyMuch</h1>
<p id="p1">This Text is Designed
with text-shadow, We used here
text-shadow property.</p>
<p id="p2">This text is designed
with text-shadow, we used here
text-shadow property.</p>
<p id="p3">This Text is designed
with text-shadow, We used here
text-shadow property.</p>
<p id="p4">This Text is designed
with text-shadow, We used here
text-shadow property.</p>
<p id="p5">This Text is designed
with text-shadow, We used here
text-shadow property.</p>
</div>
</body>
</html>
|
Output of above programming example
 |
Above you can see the output of programming example of text-shadow, here we used the different- different length of text shadow, hew I define the shadow value above we used, such as “text-shadow: 5px 2px 4px blue;” here the first value is defined offset-x, second value is defined offset-y, third value is defined blur-radius and last value is defined the shadow color.
In this tutorial we learned the Text Color, Text Align, Text Shadow, Text transform and Text Indent under the CSS Text, I hope you all understand this tutorial if any queries please ask in the comment section below.
And left some properties we will learn in the next tutorial of CSS Text Part-2
in this tutorial we will cover and learn all the properties of CSS Text.
Read Also-
- Learn CSS Text Part-2 (Text Decoration, Letter spacing, Word spacing, line height, White space and Text direction)
- Learn All the Tutorial of HTML with example.
- Create a stylish Table with HTML.
- Learn how to create Contact Up page with CSS.
- Learn CSS Tutorial with Example.
3 Comments
Mahid · February 9, 2022 at 1:13 pm
This article is help to learn html text, Thanks !
Soraya Maddison · January 16, 2023 at 9:36 am
I got good info from your blog
d Change · November 24, 2023 at 5:33 am
Hey there just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly.
I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and
both show the same results.