CSS Basic Part-3 with advance feature of CSS Text Property
Text property is one of the useful properties in CSS. Text is very important for web because visitors come to visit website to read text. So, it is important to make talk nice and user-friendly.
What We Discuss
Text Color
Text Alignment
Text Decoration
Text Transform
Text indentation
Letter spacing
Word Spacing
Line Height
Text Color
Text color is useful property of CSS. It declares the color of text. The color can be declared in HEX, RGB and Color Name.
CSS Example
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
HTML Example
<html>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p>This is a paragraph with. This text is blue.</p>
</body>
</html>
Visual Example 1
Text Alignment
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
Mostly used text-align property
Right
Left
Center
CSS Example
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
HTML Example
<html>
<body>
<h1>CSS text-align Example</h1>
<p>May, 2009</p>
<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>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>14
</body>
</html>
Visual Example 2
Text Decoration
The text-decoration CSS property is used to set the text formatting to underline, overline, line-through, none.
Underline and overline decorations are positioned under the text, line-through over it.
Note: CSS Text Decoration Level 3 transformed this property as a shorthand for the three new text-decoration-color, text-decoration-line, and text-decoration-style CSS properties. Like for any other shorthand property, it means that it resets their value to their default if not explicitely set in the shorthand.
CSS Example
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
a {text-decoration:none}
</style>
HTML Example
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<a href="#">Click this link</a>
</body>
</html>
Visual Example 3
Text Transform
The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
You can use any of them according to you requirement.
Mostly used Text Transform values
Capitalize - Capitalises the first letter of every word.
Uppercase - Forces every letter into uppercase.
Lowercase - Forces every letter into lowercase.
CSS Example
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
HTML Example
<html>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Visual Example 4
Text indentation
The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.
The starting edge is usually on the left, but can be right if in right-to-left mode, ala the direction property.
The text-indent property is inherited when specified on a block element, which means it will affect inline-block descendant elements as well. When dealing with inline-block children, you may want to force them to text-indent: 0;.
Note: Text transform can be declared any measurement unit that is used in web.
CSS Example
article {
padding: 1em;
}
.first {
text-indent: 2em;
}
.second {
text-indent: -2em;
}
.third {
text-indent: 50%;
}
.fourth {
text-indent: 100%;
}
HTML Example
<html>
<body>
<article>
<h2>text-indent: 2em</h2>
<p class="first">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h2>text-indent: -2em</h2>
<p class="second">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h2>text-indent: 50%</h2>
<p class="third">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
<h2>text-indent: 100%</h2>
<p class="fourth">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
</body>
</html>
Visual Example 5
Letter spacing
The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), parent-relative values (percentage), absolute values (px) and the normal property, which resets to the font’s default.
Using font-relative values is recommended, so that the letter-spacing increases or decreases appropriately when the font-size is changed, either by design or by user behavior.
Note: Text transform can be declared any measurement unit that is used in web.
CSS EXAMPLE
.loose {
letter-spacing: 2px;
}
.tight {
letter-spacing: -1px;
}
<span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 13px; font-style: normal; line-height: 1.5;">
HTML Example
<html>
<body>
<p>This type has no additional letter-spacing applied.</p>
<p class="loose">This type is letter-spaced loosely at <code>2px</code>.</p>
<p class="tight">This type is letter-spaced tightly at <code>-1px</code></p>
</body>
</html>
Visual Example 6
Word Spacing
The word-spacing property is similar to letter-spacing, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters.
NOTE:
the “normal” keyword, which resets the default spacing
length values using any CSS units (most commonly px, em, rem)
the “inherit” keyword, which applies the word-spacing of the parent element
CSS Example
<style>
div.one
{
word-spacing:30px;
}
div.two
{
word-spacing:3em;
}
div.three
{
word-spacing:10%;
}
</style>
HTML Example
<html>
<body>
<div class=”one”> This is some text. This is some text.</div>
<div class=”two”> This is some text. This is some text.</div>
<div class=”three”> This is some text. This is some text.</div>
</body>
</html>
Visual Example 7
Line Height
On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.
On replaced inline elements, like buttons or other input element, line-height has no effect. [1]
Example Line Height Property with values
line-height: normal
line-height: 3.5 /* <number> values */
line-height: 3em /* <length> values */
line-height: 34% /* <percentage values */
line-height: inherit
CSS Example
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
<span style="font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 13px; font-style: normal; line-height: 1.5;">
HTML Example
<htm>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>
0 comments:
Post a Comment