CSS Fonts and Texts

font
You can define the font-style, font-weight, font-variant, font-size and font-family all at once.

Value: font-style, font-weight, font-variant, font-size and font-family

<p style="font: italic bold 20px Verdana;">Sample Text</p>

Output:

font-family
You can choose which font family to use. You can put other font-family alternatives just in case the first font-family is not available in the user’s system. In our example below, if Arial is not available in the user’s system fonts, then it will use Helvetica . You can use many other generic fonts. They will be prioritized according to their order.

Value: font name

<p style="font-family: Arial, Helvetica">Sample Text</p>

Output:

font-size
used for setting the size of the font

Possible Values:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
percentage

<p style="font-size: large;">Sample Text</p>

Output:

font-style
Used for setting the style of the font

Value: normal, italic, oblique

<p style="font-style: italic;">Sample Text</p>

Output:

font-variant
Used for setting fonts to small caps or in normal format

Possible Values: normal, small-caps

<p style="font-variant: small-caps;">Sample Text</p>

Output:

font-weight
Used for setting the weight of the font

Possible Values:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

<p style="font-weight: bold;">Sample Text</p>

Output:

color
Used for setting the color of a text. The color value may be a color name: (blue, red, etc.), a hexadecimal number:(#ff00ff, #333443) or an RGB color: (rgb(255,255,000), rgb 122,234,123).

Value: color

<p style="color: red;">Sample Text</p>

Output:

direction
Used for setting the text direction

Possible Values: ltr, rtl

ltr (left to right) default
rtl (right to left)

<p style="direction: rtl;">Sample Text Sample Text2 Sample Text3</p>

Output:






line-height

Used for setting the spacing between lines.

Possible Values:
normal
number
length
percentage

<p style="line-height: 30px;">
Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph Sample Paragraph
</p>

Output:


letter-spacing

Used for adjusting the space between letters

Possible Values: normal, length

<p style="letter-spacing: 5px;">Sample Text</p>

Output:



text-align

Used for setting the text alignment

Possible Values:
left
right
center
justify

<p style="text-align: center;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph Sample Paragraph
</p>
<p style="text-align: justify;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
<p style="text-align: left;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
<p style="text-align: right;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>

Output:



















text-decoration

Used for adding decoration to texts

Possible Values:
none
underline
overline
line-through
blink

<p style="text-decoration: line-through;">Sample Text</p>

Output:

text-indent
Used for indenting the first line of a text

Possible Values: length, percentage

<p style="text-indent: 20px;">
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
Sample Paragraph Sample Paragraph
</p>
Output:





text-transform

Used for controlling text display

Possible Values:
none
capitalize
uppercase
lowercase

<p style="text-transform: uppercase;">Sample Text</p>

Output:



white-space

Used for controlling white spaces

Possible Values:
normal
pre
nowrap

<p style="white-space: pre;">
Sample Text
Sample Text Sample
Text Sample Text Sample Text</p>

Output:





word-spacing

Used to control the spacing between words

Possible Values: normal length

<p style="word-spacing: 10px;">Sample Text Sample Text</p>

Output: