Style Sheets

Part 3 - Text Properties

There are 6 main Text Properties: text-decoration, vertical-align, text-transform, text-align, text-indent and line-height. In this section we will discuss each in turn.

  • text-decoration

    The default value for text-decoration is normal and the other possible values are underline, overline, line-through and blink. This property applies to all elements.

    <html>
    <body bgcolor=black text=white>
    <p>This is a plain paragraph.
    <p style="text-decoration: underline">This is a paragraph using underline.
    <p style="text-decoration: line-through">This is a paragraph using line-through.
    <p style="text-decoration: blink">This is a paragraph using blink.
    </body>
    </html>

  • vertical-align

    The default value for vertical-align is baseline and there are several other possible values: sub, super, top, text-top, middle, bottom and text-bottom. This applies to inline elements only.

    <html>
    <body bgcolor=black text=white>
    <img src="logo.jpg" style="vertical-align: middle">Some text.
    <img src="logo.jpg" style="vertical-align: bottom">More text.
    </html>

  • text-transform

    The default value for text-transform is none and the other values are: capitalize, uppercase and lowercase. This applies to all elements.

    <html>
    <body bgcolor=black text=white>
    <p style="text-transform: uppercase">this is a lowercase paragraph.
    <p style="text-transform: lowercase">THIS IS AN UPPERCASE PARAGRAPH.
    </body>
    </html>

  • text-align

    The default value for text-align is left and the other values are: right, center and justify. This applies to block-level elements.

    <html>
    <body bgcolor=black text=white>
    <p>This is a plain paragraph.
    <p style="text-align: right">This is right aligned.
    <p style="text-align: center">This is centered.
    </body>
    </html>

  • text-indent

    The default value for text-indent is 0. This applies to block-level elements.

    <html>
    <body bgcolor=black text=white>
    <p>This is a plain paragraph.
    <p style="text-indent: 15">This is indented by 15.
    <p style="text-indent: 30">This is indented by 30.
    </body>
    </html>

  • line-height

    The default value for line-height is normal. This applies to all elements.

    <html>
    <body bgcolor=black text=white>
    <p>This is a plain paragraph with a line height of 100%.
    <p style="line-height: 200%">This paragraph has a line height of 200% of normal.
    </body>
    </html>

In the next section we will see how to change the colour and background properties of your documents.

Back Next