The texts cover a large portion of Web pages. Styling the text may improve the appearance of web pages and can draw attention to certain elements of the text.

letter-spacing

The letter-spacing property controls the spacing of each character in a word.

- Values: - Syntax:
selector { letter-spacing: value; }
Example:
<style>
#idp { letter-spacing: 4px; }
</style>

<h4>Example letter-spacing</h4>
<p id='idp'>Web site: CoursesWeb.net</p>

word-spacing

The word-spacing property increase or decrease the space between words.
- Values: - Syntax:
selector { word-spacing: value; }
Example:
<style>
#idp { word-spacing: 0.5em; }
</style>

<h4>Example word-spacing</h4>
<p id='idp'>Free courses and tutorials.</p>

line-height

The line-height property sets the distance between lines.
- Values: - Syntax:
selector { line-height: value; }
Example:
<style>
#idp { line-height: 185%; }
</style>

<h4>Example line-height</h4>
<p id='idp'>First line text<br>
A second line ...<br>
Another line in the paragraph.</p>

text-transform

The text-transform controls the capitalization of text.
- Values: - Syntax:
selector { text-transform: value; }
Example:
<style>
#idp { text-transform: capitalize; }
</style>

<h4>Example text-transform</h4>
<p id='idp'>free CSS course and lessons.</p>

text-align

The text-align defines the horizontal alignment of text inside a containing block.
- Values: - Syntax:
selector { text-align: value; }
Example:
<style>
#idp1 { text-align: right; }
#idp2 { text-align: center; }
</style>

<h4>Example text-align</h4>
<p id='idp1'>Text with right align.</p>
<p id='idp2'>Paragraph with center align.</p>

vertical-align

The vertical-align sets the alignment of text (or other inline content) in relation to the line box controlled via line-height.
Because this property controls the positioning of an inline element in relation to a line box and not a block element, it is not suitable for aligning block elements in a layout grid.
- Values: - Syntax:
selector { vertical-align: value; }
Example:
<style>
.sp1 { vertical-align: sub; }
.sp2 { vertical-align: super; }
</style>

<h4>Example vertical-align</h4>
<p>Some text: <span class='sp1'>sub span</span> and a <span class='sp2'>super span</span> sub-string.</p>

text-indent

The text-indent defines an indentation for the first line of text in a block.
- Values: - Syntax:
selector { text-indent: value; }
Example:
<style>
p { text-indent: 20px; }
</style>

<h4>Example text-indent</h4>
<p>The first line of the paragraph, with indentation,<br>
The second line ...</p>

text-decoration

Via the text-decoration property you can set underlines, strikethrough, or other text decorations (even blink).
- Values: - Syntax:
selector { text-decoration: value; }
Example:
<style>
.sp1 { text-decoration: underline; }
.sp2 { text-decoration: overline; }
.sp3 { text-decoration: line-through; }
</style>

<h4>Example text-decoration</h4>
<p>Some text: <span class='sp1'>underline span</span>, a <span class='sp2'>overline text</span> and a <span class='sp3'>line-through</span> sub-string.</p>

white-space

The white-space sets how white space inside an element is handled.
- Values: - Syntax:
selector { white-space: value; }
Example:
<style>
p { white-space: pre; }
</style>

<h4>Example white-space</h4>
<p>The first line of the paragraph with more spaces between words.
The second line, without BR tag.</p>

word-wrap

With word-wrap you can allow browsers to break lines in the middle of words to prevent long strings of characters from overflowing a box.
- Values: - Syntax:
selector { word-wrap: value; }
Example:
<style>
p {
 width: 88px;
 word-wrap: break-word;
}
</style>

<h4>Example word-wrap</h4>
<p>Short paragraph with looooooooonnnnnnggggg wwwoooooorrrrrddddddsssss.</p>

text-shadow

The text-shadow property introduced in CSS3 allows for one or more shadow effects to be applied to the text of an element. This shadow is drawn around the letters themselves (not supported in Internet Explorer).
- Values: - Syntax:
selector { text-shadow: h-shadow v-shadow blur color; }
Example:
<style>
h3 { text-shadow: 3px 5px 2px green; }
</style>

<h4>Example text-shadow</h4>
<h3>Web site: marplo.net</h3>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Configuring Text

Last accessed pages

  1. Simple Admin Login PHP Script (1674)
  2. PHP getElementById and getElementsByTagName (23092)
  3. Select in MySQL, Output results in HTML Table (6553)
  4. Insert, Select and Update NULL value in MySQL (33235)
  5. setTimeout and this with bind() method in JavaScript class (622)

Popular pages this month

  1. Contact page - CoursesWeb (1957)
  2. Tabs effect with CSS (1944)
  3. Insert, Select and Update NULL value in MySQL (1039)
  4. Read Excel file data in PHP - PhpExcelReader (833)
  5. PHP getElementById and getElementsByTagName (514)