আগামী ৩০ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

CSS Basic Part-3

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>

</body>
</html>

Visual Example 2

Text Decoration

The text-decoration CSS property is used to set the text formatting to underlineoverlineline-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 pxemrem)
  • 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>

Visual Example 8

Leave a Reply

Your email address will not be published. Required fields are marked *