Normally we would define our font-size in px (pixels) of % (percent or parent element’s font size), however there are much more options:

• medium – (default) sets the font-size to a medium size;

• xx-small – sets the font-size to an xx-small size;

• x-small – sets the font-size to an extra small size;

• small – sets the font-size to a small size;

• large – sets the font-size to a large size;

• x-large – sets the font-size to an extra large size;

• xx-large – sets the font-size to an xx-large size;

• smaller – sets the font-size to a smaller size than the parent element;

• larger – sets the font-size to a larger size than the parent element.

In our example we will make text large: .p3 h {font-size: large;}

There are three possible values of font-style:

• normal (default);

• italic;

• oblique.

We’ll make our heading oblique: .p3 h {font-style: oblique;}

font-variant has only two values – default normal and small-caps. Let’s try this: .p3 h {font-variant: small-caps;}

We already used this property, but there are more values here:

• normal (default);

• bold;

• bolder;

• lighter;

• number values from 100 – 900, where 400 is the same as normal and 700 is the same as bold, we used 700 already.

We had .p3 h {font-weight: 700;}

Ok, you can change font color in app, but sometimes you might want to do it with CSS.

There are three ways, how you can tell the color:

• color: red; (using color name);

• color: #ff0000 or color: f00; (using hex color code);

• color: rgb(255,0,0); (using RGB color code).

In our example if we want to get red heading it would look like .p3 h {color: #f00;}

You can change text direction using property direction: .p3 h {direction: rtl;}

Letter spacing can be defined by adding pixels between letter for bigger spaces and subtracting to get letters tighter together: .p3 h {letter-spacing: -1px;}

In our example it’s not necessary, but if you have two or more lines, you would probably like to make space between lines bigger or smaller.

line-height can be defined in three ways:

• line-height: 110%; (line height in percent of the current font size);

• line-height: 1.5; (a number that will be multiplied with the current font size to set the line height);

• line-height: 15px; (a fixed line height in px).

Here’s how it looks like in our example: .p3 h {line-height: 120%;}

There are four values for text-align – left, right, center, justify. In our case let it be .p3 h {text-align: justify;}

We can set underline, overline or line-trough to our text: .p3 h {text-decoration: overline;}

You can set text-indent in px (fixed indentation in pixels) or % (indentation in % of the width of the parent element). We don’t need indentation since it’s heading we are making changes to, but let’s make it small .p3 h {text-indent: 10px;}

To set shadow we have to define 1) horizontal shadow (necessary), 2) vertical shadow (necessary), 3) blur-radius (optional, 0 by default) and 4) color (optional, color options are the same as for color property we discussed before). Complete look will be little more complicated – .p3 h {text-shadow: 3px 2px 10px #FF0000;}

There are three values for text-transform:

• capitalize – transforms the first character of each word to uppercase;

• uppercase – transforms all characters to uppercase;

• lowercase – transforms all characters to lowercase;

Let’s make our heading uppercase: .p3 h {text-transform: uppercase;}

You can specify word-spacing in px (pixels). Let’s say: .p3 h {word-spacing: 30px;}