CSS Text Property Information

In this post, we will give you complete information about CSS Text Property. For ease of reading, we have divided this post into the following parts:

 

Introduction to CSS Text Property

The CSS Text Property is used to control the look of the text. If you want to customize the Visual Appearance of the Text with the CSS Text Property.

 

To style the text, many text properties are provided by CSS. You can customize the style of Text Color, Decoration, Word Space, etc. as per your requirement.

 

Different Type of CSS Text Properties

Many text properties are provided by CSS to control the visual appearance of the text. These are being told in detail below.

 

Color Property

Color Property is used to color the text. You can apply Color Property to different HTML elements. If you want to use the text of the same color throughout the document, then the color is applied to the body element. And if you want different colors of different elements. Then it should be defined on the Particular Element. You can choose the best web design course in Delhi and become an expert in web designing …

 

Try it

 

<!DOCTYPE html>

<html>

<head>

<title>CSS Color Property</title>

 

</head>

<body>

<p style=”color:red;”>

This Paragraph Text is Red.

</p>

</body>

</html>

 

Text-direction property

The direction of Document Content is defined by this property. By Default Text Direction is from left to right. The text-direction property has two possible values.

 

ltr – It means Left to Right. With this value, the text starts from the left side in the browser window. And goes to the right.

RTL – It means Right to Left. With this value, the text starts from the right side in the browser window.

 

Try it

<!DOCTYPE html>

<html>

<head>

<title>CSS text-direction Property</title>

 

</head>

<body>

<p;”>

 

This Paragraph Text Direction is Normal.

</p>

<p style=”text-direction: rtl;”;”>

This Paragraph Text Direction is Right to Left.

</p>

</body>

</html>

 

Letter-spacing property

The distance between the characters is controlled by this property. Its default value is normal. Which you can adjust by defining the length.

 

Try it

<!DOCTYPE html>

<html>

<head>

<title>CSS letter-spacing property</title>

 

</head>

<body>

<p;”>

This Paragraph Character is Normal.

</p>

<p style=”letter-spacing: 5px;”>

This Paragraph Characters is Spaced is 5px.

</p>

</body>

</html>

 

Word-spacing property

The distance between words is controlled by this property. Its also default value is normal. Which you can adjust by defining the length.

 

Try it

 

<!DOCTYPE html>

<html>

<head>

<title>CSS word-spacing property</title>

 

</head>

<body>

<p;”>

This Paragraph Text Space is Normal.

</p>

<p style=”word-spacing: 10px;”>

This Paragraph Text Space is 10px.

</p>

</body>

</html>

Learn the best web development course in Delhi from next-G Education with 100% job placements…

Text-indent property

The distance of the first line of paragraphs is controlled by this property. That is, what distance do you want to keep the first line from the browser window. Its default value is also normal. Which you can define and change.

 

Try it

 

<!DOCTYPE html>

<html>

<head>

<title>CSS text-indent Property</title>

 

</head>

<body>

<p;”>

This Paragraph Indent is Normal.

</p>

<p style=”text-indent: 30px;>

This Paragraph is 30px Indented.

</p>

</body>

</html>

 

Text-align property

The alignment of text is set by this property. Its possible values ​​are right, left, center, and justify. By default, its value is left aligned.

 

Try it

<!DOCTYPE html>

<html>

<head>

<title>CSS text-align property</title>

 

</head>

<body>

<p style=”text-align:left;”>

This Paragraph is Left Aligned.

</p>

<p style=”text-align: right;”>

This Paragraph is Right Aligned.

</p>

<p style=”text-align: center;”>

This Paragraph is Center Aligned.

</p>

<p style=”text-align: justify;”>

This Paragraph is Justify Aligned.

</p>

</body>

</html>

Text-decoration property

Text is decorated by this property. It has four possible values. none, underline, overline and line-through. You can use anyone as required.

 

Try it

 

<!DOCTYPE html>

<html>

<head>

<title>CSS text-decoration property</title>

</head>

<body>

<p style=”text-decoration:none;”>

This Paragraph Text is Normal.

</p>

<p style=”text-decoration: underline;”>

This Paragraph Text is Underlined.

</p>

<p style=”text-decoration: overline;”>

This Paragraph Text is Over lined.

</p>

<p style=”text-decoration: line-through;”>

This Paragraph Text has a Line Through.

</p>

</body>

</html>

 

Text-transform property

Text Case is controlled by this property. It has four possible values. none, uppercase, lowercase and capitalize.

 

Try it

<!DOCTYPE html>

<html>

<head>

<title>CSS text-transform Property</title>

</head>

<body>

<p style=”text-transform:none;”>

This paragraph text is normal.

</p>

<p style=”text-transform: uppercase;”>

This Paragraph Text is in Uppercase.

</p>

<p style=”text-transform: lowercase;”>

This Paragraph Text is in Lowercase.

</p>

<p style=”text-transform: capitalize;”>

This Paragraph Text Will be Capitalized.

</p>

</body>

</html>

 

Text-shadow property

Text Shadow is controlled by this property. You can define a shadow for any HTML element.

 

Try it

<!DOCTYPE html>

<html>

<head>

<title>CSS text-shadow property</title>

 

</head>

<body>

<h1 style=”text-shadow: 3px 2px red;”>

This Paragraph Text Has a Shadow Effect.

</h1>

</body>

</html>

 

What have you learned?

In this post, we have given you complete information about CSS Text Property. You have studied various text properties. We hope this post helped you to learn about CSS Text Property. If you liked the post, do share it with your friends on social media so that others also can learn something.

4 thoughts on “CSS Text Property Information”

  1. joker123 ที่พวกเราพรีเซ็นท์ เกมออนไลน์ได้เงินจริง ที่ตื่นเต้นเยอะแยะ กราฟฟิกงามไม่มีอันตราย ให้คุณเพลินและก็ศึกษาและทำการค้นพบระยะเวลาที่ความสนุกที่ pg และก็คุ้มค่ามาก

    Reply
  2. Pgslot รีวิวเกม Egypt’s Book Of Mystery รีวิวเกมออนไลน์ Egypt’s Book of Mystery เกมใหม่ค่าย PG ที่มากับธีมน่าสนใจ และน่าหลงใหลสำหรับในการลงพนันเวลานี้สูงที่สุด ไปดูกันเลย pgslot รีวิวเกม Egypt’s Book of Mystery

    Reply
  3. ดู anime master ซับไทยก่อนใคร ที่ทั้งสิ้นทั้งหมด ทั้งสิ้น นี้เป็นความพิเศษใหม่ ของเกมออนไลน์ ในเวอร์ชั่นของการเล่นที่เล่นแล้ว ได้เงินจริง ได้โดยไม่ต้องจ่ายเงินที่ megaslotgame

    Reply
  4. หาเพื่อนเล่น Mega Game ได้ใน omegle เล่น Mega Game คนเดียวมันเหงาไม่มีเพื่อนช่วยลุ้น หาเพื่่อนเล่นใน omegle มีคนเล่นด้วยเเล้วมันสนุกกว่า พาเพื่อนรวย แถมได้เพื่อนใหม่ด้วย สล็อต

    Reply

Leave a Comment