Styling Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Styling Text</title>
<style>
/* coloring the font text of h3 element*/
h3 {
color: indigo;
}
/* text align properties */
p.demoAlign {
text-align: justify;
text-align-last: center;
}
/* right-to-left direction */
p.demoDirection {
direction: rtl;
}
/* text decoration & transform properties */
span {
font-weight: 600;
vertical-align: sub;
text-decoration-line: underline;
text-decoration-color: blue;
text-decoration-style: dashed;
text-decoration-thickness: 6px;
/* text-decoration: underline blue dashed 6px;*/ /* this is shorthand for the text-decoration-* properties */
text-transform: uppercase;
}
p.demoIndent {
text-indent: 25%;
}
p.demoSpace {
letter-spacing: 3px;
line-height: 2;
word-spacing: 15px;
white-space: wrap;
}
p.demoShadow {
text-shadow: 3px 3px 5px orange, 2px 6px 4px blue, 3px 3px 5px green ;
}
</style>
</head>
<body>
<!--
color : is used to set the color of the text.
text-align : is used to set horizontal alignment of a text.
text-align-last : specifies how to align last line of a text.
direction : can be used to change text direction of an element.
unicode-bidi : can be used to change text direction of an element.
vertical-align : sets vertical alignment of an element.
text-decoration-line : is used to add a decoration line to text.
text-decoration-color : is used to set color of decoration line.
text-decoration-style : is used to set style of decoration line.
text-decoration-thickness : is used to set thickness of decoration line.
text-decoration : is a shorthand property for:
- text-decoration-line (required)
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
text-transform : is used to specify uppercase & lowercase letters in a text.
text-indent : is used to specify indentation of first line of a text.
letter-spacing : is used to specify space between characters in a text.
line-height : is used to specify space between line.
word-spacing - is used to specify space between words in a text.
white-space : specifies how white-space inside an element is handled.
text-shadow : property adds shadow to text, you only specify horizontal & vertical shadow.
-->
<h1>Demo: Styling Text</h1>
<h3>Demo text Align</h3>
<p class="demoAlign">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<hr>
<h3>Demo text direction</h3>
<p class="demoDirection">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<hr>
<h3>Demo text decoration & transform</h3>
<p>Lorem ipsum dolor <span>sit amet consectetur </span>adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti.</p>
<hr>
<h3>Demo text Indent</h3>
<p class="demoIndent">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<hr>
<h3>Demo text space</h3>
<p class="demoSpace">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<hr>
<h3>Demo text shadow</h3>
<p class="demoShadow">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam cum inventore aliquid beatae tempore magnam similique voluptatibus ipsa laudantium quaerat expedita, tenetur alias magni totam fugit rem vitae impedit, non velit, enim vero? Neque incidunt minima mollitia, sed, beatae quisquam rem omnis maiores ipsam iusto atque ex deleniti. Possimus deleniti voluptatum nam pariatur fugit quisquam dolor porro magni iusto ducimus similique ipsa ut officiis fuga natus, voluptate magnam, asperiores distinctio maiores eum cupiditate, aliquid animi? Libero dolorum eius tempora aliquam accusantium molestias sapiente odit mollitia saepe voluptatum! Aliquam tempora nostrum voluptas necessitatibus accusamus! Mollitia laboriosam eum porro ipsum nobis cupiditate?</p>
<hr>
</body>
</html>