All CSS text properties- how can you apply it?

CSS text-align property:

Using the Properties screen text to the left, right, in the middle of the Align, or as printed pages can be justified. The values used for –

CSS text-justify Property:

Align is used to determine the text justification method. Align text to justify the two-set width – will be the same. As a newspaper or a book of text, it can be seen.

CSS Text: vertical-align:

1. Vertical-align in the vertical alignment of an inline element of the block-level element can be controlled.
II. This property only applies to inline elements and table. For example – elements are <img>, <em>, <td>, <strong>, <a> etc
3. Vertical Alien’s value%, pixel (PX), or can be expressed by em.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{font-family:Verdana; background:rgba(1,1,1,0.8); padding:5px; color:#2ee555;}
  .center{text-align:center;}
  .left{text-align:left;}
  .right{text-align:right;}
  .justify{text-align:justify;}
</style>
</head>
<body>
<p class="center">This is text-align:center</p>
<p class="left">This is text-align:left</p>
<p class="right">This is text-align:right</p>
<p class="justify">This is text-align:justify</p>
</body>
</html>

Display in Browser:

css text align

CSS text-decoration property:

Using the text is decorated by the property. There are quite a few values of the property. Such as:

Declaration Syntax:

Example:

<HTML>
<HEAD>
<style type="text/css">
.underLine {text-decoration: underline;}
.overLine {text-decoration: overline;}
.lineThrough {text-decoration: line-through;}
.blink {text-decoration: blink;}
</style>
</HEAD>
<BODY>
<h1>CSS Text Decorations </h1>
<p class="underline"> CSS Text Underline</p>
<p class="overLine"> CSS Text OverLine</p>
<p class="lineThrough"> CSS Text Line Through</p>
<p class="underline"> CSS Text Underline</p>
<p class="blink"> CSS Text Blink</p>
</BODY>
</HTML>

Display in Browser:

css text decoration property

CSS text direction property:

This property can be used to control the direction of the text.

Direction syntax:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.rtl {
    direction: rtl;
}
</style>
</head>
<body>
<h1>Text direction Property</h1>

<p class="rtl">This text will go from right to left</p>

</body>
</html>

Display in Browser:

css text direction property

Properties CSS text-indent:

The text of these properties by using certain amounts of the 1st line of the paragraph indent means a certain amount of space is left. Properties of the values are: normal, percentage (%) or pixel (PX). If you want to make hanging indents, you can use the negative value.

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p {font-family:Verdana; text-indent:100px;}
</style>
</head>
<body>
<p>When you are courting a nice girl an hour seems like a second. When you sit on a red-hot cinder a second seems like an hour. That's relativity.We cannot solve our problems with the same thinking we used when we created them.</p>
</body>
</html>
<html>
<body>
<p style="text-indent:35px;">This Paragraph purpose is text indent in 35 pixels space first leave a space than the after start a first line paragraph text.</p>
</body>
</html>

Display in Browser:

css text indent property

CSS Properties text overflow:

The text of the existing space by using this property can be highly controlled. There are two values. Namely:

Example:

HTML Code:

<!DOCTYPE HTML>
<html>
<head>
<style>
p{font-family:Verdana; padding:10px 0px 10px 0px;}
.ellipsis{width: 450px; white-space: nowrap; overflow: hidden;
    border:5px solid #ccc;
    text-overflow: ellipsis;}
.clip{width: 450px; white-space: nowrap; overflow: hidden;
       border:5px solid #ccc; text-overflow: clip;} 
</style>
</head>
<body>
<p class="ellipsis">We are what our thoughts have made us; so take care about what you think. Words are secondary. Thoughts live; they travel far. <span>- Swami Vivekanada</span></p>
<p class="clip">We are what our thoughts have made us; so take care about what you think. Words are secondary. Thoughts live; they travel far. <span>- Swami Vivekanada</span></p>
</body>
</html>

Display in Browser:

css text overflow property

 CSS letter-spacing Property:

The space between the text character sequences is used to determine these properties. The values – normal, percent, px and em. This property is used with the negative and positive values.

Declaration Syntax :

Example:

<html>
<head>
<style type="text/css">
#example1 { letter-spacing: 0.3em; }
#example2 { letter-spacing: 1em; }
</style>
</head>
<body>
<p>Welcome to my website.</p>
<p id="example1">Welcome to my website.</p>
<p id="example2">Welcome to my website.</p>
</body>
</html>

Display in Browser:

css text-letter space property

CSS text-outline property:

These properties are used to determine the outline of the text. Values are used in the thickness of text characters, set the color and blur radius.

Syntax:

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 text-outline Property</title>
<style type="text/css">
h1{text-outline: 4px 5px #fa4b2a;}
</style>
</head>
<body>
<h1>Wisdom Quotes</h1>
<p>When I was growing up, my parents told me, 'Finish your dinner. People in China and India are starving.' I tell my daughters,  'Finish your homework. People in India and China ajob.'</p>
</body>
</html>

Display in Browser:

css text-outline property

CSS Properties word-spacing:

This property is used to create space to another set of words based on the value. This value is: normal, px, %, em, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p { 
    word-spacing: 25px;
}
</style>
</head>
<body>

<p>
CSS word spacing property.
</p>

</body>
</html>

 

Display in Browser:

css word spacing property

Properties CSS line-height:

This property is used to create a space line between each other (top-down) will be determined by the values. Values are normal, px, pt, %, em, etc. But the negative value is not valid.

Declaration Syntax:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
    line-height: 70%;
}

p.big {
    line-height: 200%;
}
</style>
</head>
<body>

<p>
 paragraph with a standard line-height.<br>
 paragraph with a standard line-height.<br>

</p>

<p class="small">

paragraph with a smaller line-height.<br>
 paragraph with a smaller line-height.<br>
</p>

<p class="big">

paragraph with a bigger line-height.<br>
paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Display in Browser:

css line-height property

CSS text- transform property:

Using This property text characters can be transformed in a various way. The values are as follows:

Declaration Syntax :

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{font-family:Verdana;background:rgba(1,1,1,0.7);padding:7px; color:white;}
  .uppercase{text-transform:uppercase;}
  .lowercase{text-transform:lowercase;}
  .capitalize{text-transform:capitalize;}
  .none{text-transform:none;}
</style>
</head>
<body>
  <p class="uppercase">This is text-decoration: underline</p>
  <p class="lowercase">This is text-decoration: overline</p>
  <p class="capitalize">This is text-decoration: through</p>
  <p class="none">This is text-decoration:none</p>
</body>
</html>

Display in Browser:

css text transform property

CSS word-break property:

Using the properties it is determined that how the lines will be broken inside the word. Basically, it is used for CJK (Chinese / Japanese / Korean) for the language.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
p.ex1 {
    width: 150px; 
    border: 2px solid #000000;
    word-break: keep-all;
}

p.ex2 {
    width: 150px; 
    border: 2px solid #000000;
    word-break: break-all;
}
</style>
</head>
<body>

<p class="ex1">Word-break property example-1.Word-break property example-1.</p>

<p class="ex2">Word-break property example-1.Word-break property example-1.</p>


</body>
</html>

Display in Browser:

Set the zoom level:

By the zoom  properties the zoom level can be determined . As the value of: number, %, normal and so on.

Example:

<html>
<head>
<style type="text/css">
#ex1{zoom: 3;}
#ex2{zoom: 150%}
#ex3{zoom: 70%}
</style>
</head>
<body>
<p>Normal text</p>
<p id="ex1"> The zoom level is 3.</p>
<p id="ex2"> The zoom level is 150%.</p>
<p id="ex3"> The zoom level is 70%.</p>

</html>

 

Display in Browser:

css zoom level

Leave a Reply

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