text-indent

text-indent defines indention in a block of text.

Values

The value is usually a number which can be negative or positive. Having a negative indention will make the text go overboard and a positive one will push it backwards.

The value can sometimes be a percent value. A percent value will to the containing block’s width.

Example

<p style="text-indent:100;">Cras id dolor eu elit pulvinar bibendum ut ac neque. Praesent mollis ante ac urna varius aliquet. Cras vitae hendrerit elit, eget accumsan orci. Vivamus rhoncus, libero non porta semper, odio odio fringilla felis, a luctus ipsum orci a ipsum. Curabitur quis aliquam arcu. Fusce quis lorem eu massa lobortis tempus. Nulla cursus purus at sagittis tempus. Duis augue est, laoreet quis turpis quis, gravida vestibulum justo.</p>
<p style="text-indent:20%;">Cras id dolor eu elit pulvinar bibendum ut ac neque. Praesent mollis ante ac urna varius aliquet. Cras vitae hendrerit elit, eget accumsan orci. Vivamus rhoncus, libero non porta semper, odio odio fringilla felis, a luctus ipsum orci a ipsum. Curabitur quis aliquam arcu. Fusce quis lorem eu massa lobortis tempus. Nulla cursus purus at sagittis tempus. Duis augue est, laoreet quis turpis quis, gravida vestibulum justo.</p>

 font-weight

The font-weight property defines the weight that will be given to the text inside an element.

Values

bold
The text will have be bold.
normal
The text will be normal.
bolder
The text will be bolder than the ancestor element.
lighter
The text will be lighter than the ancestor element.
inherit
The text will inherit the property from the ancestor element.

Example

<p style='font-weight:bold;'>Bold</p>
<p style='font-weight:normal;'>Normal</p>
<p style='font-weight:lighter;'>Lighter</p>
<p style='font-weight:inherit;'>Inherit</p>
<p style='font-weight:bolder;'>Bolder</p>

 text-decoration

text-decoration defines how text will be decorated. Decoration usually means how a line will drawn on top of the element.

Values

underline
A line will be drawn underneath the element.
overline
A line will be drawn over the element.
none
No line will be drawn. This will not undo anything set by an ancestor element.
line-through
A line will be drawn across the element.

Example

<p style='text-decoration:underline;'>Underline</p>
<p style='text-decoration:overline;'>Overline</p>
<p style='text-decoration:none;'>None</p>
<p style='text-decoration:line-through;'>Line Through</p>

 text-transform

text-transform controls capitalization of text. When writing HTML, you have a choice to do capitalization in the HTML itself or using CSS.

Values

capitalize
Capitalizes the first character of each word. Take note that other characters that are not the first characters in each word will not be affected in any way.
uppercase
All characters will be transformed to uppercase counterparts.
lowercase
All characters will be transformed to lowercase counterparts.
none
No changes will be made.

Example

<p style="text-transform:uppercase;">Everything here will be capitalized.</p>
<p style="text-transform:lowercase;">Everything here will be changed to lowercase.</p>
<p style="text-transform:capitalize;">Only The First Letters of Each word will be Capitalized.</p>

Today in History (June 16)

  • IBM was founded

Browse Internet Slangs

ABCDEFGH
IJKLMNOP
QRSTUVWX
YZ

Categories

Recent Posts