Cascading Style Sheets (CSS) describe how HTML displays elements on the screen. CSS can control the layout of multiple web pages with a few lines of code.
CSS has formatting properties that affect the spacing, appearance, and alignment of text. Here are some properties that you can use to style text on your app pages.
1. Text Color
The color property specifies the main foreground color of your text. You can use a predefined color name like red, white, or green. You can also use a hex value or other units like RGB, HSL, and RGBA.
CSS frameworks like Tailwind CSS have a built-in color feature that displays a variety of shades. This makes it easier for you to select a shade you prefer. Let's change the color of the following headings 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: orange;
}
h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
And the styled text will appear like so:
2. Background Color
You can use the background-color property to create appealing backgrounds. 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: orange;
}
h2 {
background-color: #009900;
}
h3 {
background-color: rgb(204, 0, 0);
}
h4 {
background-color: hsl(60, 100%, 50%);
}
When your browser renders this page, it will look something like this:
3. Text Alignment
The text-align property sets the horizontal alignment of text. This value can be left, right, center, or justify.
The justify value stretches each line of text, so they all take up the same width on the right and left margins. Use the following sample code to explore these four values:
<body>
<h1>Align Me Left</h1>
<h2> Align Me Right</h2>
<h3>Align Me center</h3>
<p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
Use the following CSS to apply different alignments:
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
In the browser, this will appear like so:
4. Text Direction
The text-direction property defines the direction of text. Define the direction using properties rtl (right to left) or ltr (left to right). These two specify which direction you want the text to flow.
For example, use rtl when working with languages written from right to left like Hebrew or Arabic. You use ltr for languages written from left to right like English.
Let's illustrate this with the code below:
<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 accompanying CSS:
.ex1 {
direction: rtl;
}
#ex2 {
direction: ltr;
}
The end result will look something like this:
5. Text Decoration
The text-decoration property sets the appearance of decorative lines on text. It's shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness property. If you don't wish to have the property on elements that have links, use text-decoration: none;
You should avoid underlining normal text since that style usually indicates a link. The following illustration shows 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>
You 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 they'll display something like this:
6. Text Transform
The text-transform property specifies the type of case the letters appear. This can be in uppercase or lowercase letters. You can also use it to capitalize 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
The letter-spacing property specifies the space between the letters in text. The following example illustrates how to specify different spacing styles.
<body>
<h1>Examples of Letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
Use pixels, or other units of measure, in your CSS file:
h2 {
letter-spacing: 7px;
}
h3 {
letter-spacing: -2px;
}
And the resulting text will be stretched or squeezed:
8. Word Spacing
The word-spacing property specifies the space between the words in a text. Browsers have a standard length for space between words, but you can set your own. The following example illustrates 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;
}
You can clearly see the effect of word spacing:
9. Line Height
The line-height property specifies the spacing between lines in a paragraph. The standard and default line height in most browsers is about 110% to 120%. The following code illustrates how to change it:
<body>
<h1>Using line-height</h1>
<p>
Standard line-height.
Standard line-height.
</p>
<p class="small">
Small small line-height.
Small line-height
</p>
<p class="big">
Bigger line-height.
Bigger line-height.
</p>
</body>
Using the following CSS:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
You can see the results between each line in each paragraph:
10. Text Shadow
The text-shadow property applies shadows to text. You have to specify the horizontal shadow and the vertical shadow. Text-shadow can include color and blur radius. Let's illustrate that with 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>
With 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 CSS Text-Styling Properties?
CSS is the backbone of modern web design. Whether in its vanilla form or in frameworks, the basic function of CSS properties is the same. Mastering text formatting properties allow you to create attractive and readable user interfaces.
The latest version of CSS, CSS3, introduces new concepts from animations to multiple-column layouts. These concepts make it easier to create professional applications and documents.