Text Styles
Different properties of CSS text styles
color
text-align
text-decoration
text-transform
text-indent
letter-spacing
line-height
word-spacing
text-shadow
text-color
used to specify color of the text. Color can be specified as name, rgb or hexadecimal value.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
</html>
text-alignment
The text-align property in CSS is used to set the horizontal alignment of text within an element. Possible values include: left, right, center, justify, and inherit.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
text-decoration
The text-decoration property in CSS is used to specify the visual effects applied to text, such as underlining, overlining, strike-through, and blinking. The value can be one of the following: none, underline, overline, line-through, blink.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
</style>
</head>
<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><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses
the reader.</p>
</body>
</html>
text-transform
The text-transform property in CSS is used to specify the capitalization of text within an element. Possible values include: none, capitalize, uppercase, lowercase, and full-width.
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class=”uppercase”>This text is transformed to uppercase.</p>
<p class=”lowercase”>This text is transformed to lowercase.</p>
<p class=”capitalize”>This text is capitalized.</p>
</body>
</html>
Text Indent
The text-indent property in CSS is used to specify the amount of space that should be inserted before the start of the first line of a text block. The value can be set in length units (e.g. px, em) or as a percentage of the containing block width. It is commonly used to indent the first line of a paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<h1>Using text-indent</h1>
<p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.'</p>
</body>
</html>
Letter-spacing
The letter-spacing property in CSS is used to specify the space between characters in a text. The value can be set in length units (e.g. px, em) or as a percentage of the font size. It can also be set to normal for the default spacing or to inherit to inherit the value from a parent element.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>
Text-shadow
The text-shadow property in CSS is used to add a shadow effect to text. The value is specified as a list of offset-x, offset-y, blur-radius, and color values, in that order. The offset values specify the distance between the text and its shadow, while the blur-radius specifies the degree to which the shadow should be blurred. The color value specifies the color of the shadow. For example: text-shadow: 2px 2px 2px #333;
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Font Family
The font-family property in CSS is used to specify the font family to be used for an element’s text. The value can be a specific font name (e.g. Arial, Times New Roman) or a generic font family (e.g. serif, sans-serif, monospace). The browser will use the first available font in the list. For example: font-family: Arial, sans-serif;.
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: “Times New Roman”, Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: “Lucida Console”, “Courier New”, monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class=”p1″>This is a paragraph, shown in the Times New Roman font.</p>
<p class=”p2″>This is a paragraph, shown in the Arial font.</p>
<p class=”p3″>This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>