Posted by Ridwan Fadilah on Aug 16, 2020 - 02:27 pm
CSS Text. Learn how to change the text style, alignment, color, and all about text formatting with CSS3 by examples.
The text formatting use on a website can improve your web appearance. The right choice of the text format is also can make the users easy to read each content on a page they visited.
By using CSS, you can change the style of the text with some of the text formatting properties, such as the text-align, text-transform, and color properties.
Now, in this tutorial, I'll show you how to change the text format with CSS3 text formatting properties.
If you want to change the text color, you can use the CSS color
property to set the color of the text. The color is specified by:
red
#ffffff
rgb(255,0,0)
The default text color for a page is defined in the body element. That will set all the text colors inside the body element, except you change a different color for a certain HTML element.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- The CSS
body {
color: blue;
}
h1 {
color: green;
}
Here's the result of the example above:
Just add the CSS background-color
property to set the text background color and fill the value with the name or color code like the example before.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- The CSS
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: green;
}
It's no problem if the CSS color
property used with the background-color
property.
The example above will display by the browser like this:
In CSS text formatting, you can set the text left or right-aligned, centered, or justified.
Use the CSS text-align
property to set the horizontal alignment of a text.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
</body>
</html>
- The CSS
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
The following example shows center-aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):
If the value is set to justify
, each line is stretched so that every line has equal width, and the left and right margins are straight.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Example</h1>
<p>Change the text align to justify.</p>
<p>If the value is set to "justify", each line is stretched so that every line has equal width, and the left and
right margins are straight.</p>
</body>
</html>
- The CSS
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
For this example, also add the border, padding, and specify the height and width of the element to see how it works. The text will look like in magazines and newspapers.
Changing the direction of the text is also one of the CSS text formatting parts.
Use the CSS direction
and unicode-bidi
properties to change the text direction of an element.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Example</h1>
<p>Text direction Right to Left</p>
</body>
</html>
- The CSS
p {
direction: rtl;
unicode-bidi: bidi-override;
}
The code above will display by the browser like this:
Use the CSS vertical-align
property to set the vertical alignment of an element.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Example</h1>
<p>An <img src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a default alignment.</p><br>
<p>An <img class="top" src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a top alignment.</p><br>
<p>An <img class="middle" src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a middle alignment.</p><br>
<p>An <img class="bottom" src="iniblog.png" alt="iniblog" height="50"> iniblog logo with a bottom alignment.</p>
</body>
</html>
- The CSS
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
Here's the result of the example above:
Use CSS text-decoration
property to add or remove decorations of the text.
The value text-decoration: none; is often used to remove underlines from links.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Example</h1>
<a href="go-somewhere">Go Somewhere</a><br>
<a class="link-2" href="go-somewhere">Go Somewhere</a>
</body>
</html>
- The CSS
a.link-2 {
text-decoration: none;
}
Here are the differences of the HTML link with and without text decorations:
The other CSS text-decoration
values are used to decorate text.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
</body>
</html>
- The CSS
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
The example above will display by the browser like this:
Use the text-transform
to specify uppercase and lowercase letters in a text.
You can use it to turn everything into uppercase or lowercase letters or set the capitalize the first letter of each word.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p class="uppercase">This is a paragraph</p>
<p class="lowercase">This is a paragraph</p>
<p class="capitalize">This is a paragraph</p>
</body>
</html>
- The CSS
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
The example above will display by the browser like this:
Adding some space to text is another text formatting. You are allowed to add the text spacing on a web page by using CSS.
Use the CSS text-indent
property to specify the indentation of the first line of a text:
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum maiores blanditiis impedit veniam, quasi porro
asperiores recusandae ab soluta minus aliquid cumque molestias in quibusdam, quae voluptatibus eum nostrum obcaecati
est eos? Recusandae voluptates totam facilis libero sapiente assumenda officiis!</p>
</body>
</html>
- The CSS
p {
text-indent: 40px;
}
The example above will display by the browser like this:
Use the CSS letter-spacing
property to specify the space between the characters in a text.
Here's the example of how to increase or decrease the space between characters:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
</body>
</html>
- The CSS
h1 {
letter-spacing: 4px;
}
h2 {
letter-spacing: -4px;
}
The example above will display by the browser like this:
Use the CSS line-height
property to specify the space between lines:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p class="small">Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>Dolorem tempore quibusdam itaque.
Impedit veniam odio necessitatibus eos officia modi voluptatem delectus illo.</p>
<p class="big">Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br>Dolorem tempore quibusdam itaque.
Impedit veniam odio necessitatibus eos officia modi voluptatem delectus illo.</p>
</body>
</html>
- The CSS
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
The example above will display by the browser like this:
Use the CSS word-spacing
property to specify the space between the words in a text.
Example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
</body>
</html>
- The CSS
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
The example above will display by the browser like this:
Use the CSS white-space
property to specify how white-space inside an element is handled.
Here's the example:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo neque dolores dignissimos doloremque? Amet eum
voluptatibus assumenda consequatur soluta facilis.</p>
<p>Try to remove the white-space property to see the different.</p>
</body>
</html>
- The CSS
p {
white-space: nowrap;
}
The example above will display by the browser like this:
Use the CSS text-shadow
property to adds shadow effect to text.
Here's the simple example of adding a shadow:
- The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Try to remove the white-space property to see the different.</p>
</body>
</html>
- The CSS
h1 {
text-shadow: 2px 2px;
}
The example above will display by the browser like this:
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
Here's the example of how to add color to the shadow:
h1 {
text-shadow: 2px 2px blue;
}
and here's the result:
You can also add the blur effect to the text with shadow effect:
h1 {
text-shadow: 2px 2px 5px blue;
}
Here's the result:
Okay, that's the CSS text formatting tutorial. You will learn more about the CSS basics in the next chapter.
You can read another CSS basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.
Thanks for reading.