Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Top 10 Text-Styling Properties in CSS for Beginners
Text is very important and it is demanded in web design. Give an awesome look to your text, given by the CSS properties. In this post, we learn the 10 Text-Styling Properties in CSS. CSS (Cascading Style Sheets) describe how HTML displays the element on the screen. CSS controls your website’s overall layout with a few lines of code.
CSS has formatting properties line alignment of text, spacing, and appearance. Here are 10 Text-Styling Properties in CSS which can help to understand.
10 Text-Styling Properties in CSS
1. Text Color
The text color property is very useful in CSS. You can use the predefined color name like… red, white, black, blue, etc. You can also use a hex value or other like RGB, HSL, and RGBA.
CSS frameworks like tailwind CSS make the color feature display the very color shades. That makes it easy to select your preference. Let’s change the below heading colors.
Using some of these properties:
<body>
<h1>Change My Color</h1>
<h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
The CSS will look like this:
h1 {
color: #d85600;
}
h2 {
color: #b80c0c;
}
h3 {
color: #17871e;
}
h4 {
color: #0098ac;
}
And the styled text will appear like so:
2. Background Color
You can use the background-color property to apply the background behind the items. Use it to set different backgrounds for the following headings:
<body>
<h1>Change My Background Color</h1>
<h2>Change My Background Color</h2>
<h3>Change My Background Color</h3>
<h4>Change My Background Color</h4>
</body>
With the following CSS:
h1 {
background-color: #d85600;
}
h2 {
background-color: #b80c0c;
}
h3 {
background-color: #17871e;
}
h4 {
background-color: #0098ac;
}
When your browser renders this page, it will look something like this:
3. Text Alignment
Of these Top 10 Text-Styling Properties in CSS, this property is the most used. The text alignment property is set the text horizontally way. These values can be set like left, right, center, or justify. Justify is the value that takes the full width and stretches up the word and fulfills the total width.
<body>
<h1>Left-Alignment</h1>
<h2>Center-Alignment</h2>
<h3>Right-Alignment</h3>
<p class="ex4">
<strong>justified-Alignment</strong>: Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Harum, voluptate, veniam dignissimos unde
expedita excepturi illo accusamus assumenda et exercitationem
reprehenderit aperiam ratione asperiores minus fuga autem at
perspiciatis veritatis?
</p>
<p>
<strong>None-Alignment </strong>: Lorem ipsum dolor sit amet consectetur
adipisicing elit. Rem nesciunt obcaecati fugiat. Consequatur,
consectetur nostrum quaerat ratione vitae culpa ipsam quos veniam cumque
incidunt odio eligendi perferendis dolorem quae tempore repellat aliquam
beatae non molestiae.
</p>
</body>
Use this CSS to apply alignments:
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4 {
text-align: justify;
}
This will appear like this:
4. Text Direction
This property defines the direction of the text. Default the direction of text is rtl means (right-to-left) or ltr (left to right). This direction decides the flow of text. For example, rtl is used when the languages are written from right to left like Urdu or Arabic. ltr use when languages are written from left to right like English.
Let’s example this with the code:
<body>
<div>
<p class="ex1">
This paragraph goes from right to left. The cursor moves from right to
left when you type more information on the page.
</p>
<p id="ex2">
This paragraph goes from left to right. The cursor moves from left to
write when you type more information on the page!
</p>
</div>
</body>
With this CSS:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
The result will look like this:
5. Text Decoration
This property can the appearance of decorative lines on text. Text decoration property sets for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness properties. If you don’t want any decoration, then simply type the Text-decoration: None; You should avoid to written normal text because they are indicated as a link.
Some examples in code:
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
<p><a href="default.asp">This is a link</a></p>
</body>
Can apply various decoration effects with this CSS:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
And these are displayed like this:
6. Text Transform
If you want to transform your text in a specific type then use the text-transform property. This helps you to transform your text. there are values like uppercase or lowercase letters or capitalizing the first letter of each word
The following example shows how to do it in code:
<body>
<h1>Examples of text-transform property</h1>
<p class="uppercase">This sentence is in uppercase.</p>
<p class="lowercase">This sentence is in lower case.</p>
<p class="capitalize">Capitalize this text.</p>
</body>
The CSS file:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
With the following result:
7. Letter Spacing
This property helps to space between the letters in the text. The following example helps to understand the spacing styles in different spacing sizes.
<body>
<h1>Examples of Letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
Use measures like pixels, in your CSS file:
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
And the resulting text will be stretched:
8. Word Spacing
This property specifies the space between the words in a text. The space between two words can set your own. The following example shows how to increase or decrease the space between words:
<body>
<h1>Examples of the Word-spacing Property</h1>
<p>Normal word spacing.</p>
<p class="ex1">Large word spacing.</p>
<p class="ex2">Small word spacing.</p>
</body>
Using this CSS:
p.ex1 {
word-spacing: 1rem;
}
p.ex2 {
word-spacing: -0.3rem;
}
See the effect of word spacing:
9. Line Height
This property specifies the spacing between lines in a paragraph. The default line height is mostly between 110% to 120%. You can change also as shown below.
<body>
<h1>Using line-height</h1>
<p>
Standard line-height. <br />
Standard line-height.
</p>
<p class="small">
Small small line-height. <br />
Small line-height
</p>
<p class="big">
Bigger line-height. <br />
Bigger line-height.
</p>
</body>
Using the following CSS:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
See the results between each line in each paragraph:
10. Text Shadow
This property is used to apply the shadow on the text. You can use specifically like horizontal shadow and vertical shadow. In this property, you can also include the color and the blur effect. Like the following code:
<body>
<h1>Examples of Text-shadow effect.</h1>
<h1 class="ex1">Text-shadow with color</h1>
<h1 class="ex2">Text-shadow with blur effect.</h1>
</body>
Using this CSS:
h1 {
text-shadow: 2px 2px;
}
.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Will produce some unusual and interesting effects:
Why Learn These 10 Text-Styling Properties in CSS?
CSS is very important in web design. It’s like a bone of modern web design. While using only vanilla CSS basic function is very important. with these 10 Text-Styling Properties in CSS, you will Master text formatting properties, and that will help you to create an attractive website as well as a readable user interface.
