How to Format Text on your Website with the Raspberry Pi - dummies

How to Format Text on your Website with the Raspberry Pi

By Sean McManus, Mike Cook

You can change a few properties to alter how your website’s text looks on the screen with the Raspberry Pi. Anything you can add to make your website more visually appealing will encourage people to keep visiting your site. The properties you can change are

  • font-family: The font used to display a web page depends on what fonts the visitor’s computer has installed. You use this property to specify a list of fonts you’d prefer to use for the text, starting with your first preference, and working your way down to last resort if your earlier choices aren’t available.

    You don’t know what fonts someone has on his or her computer to view your web page, and the fonts on your Raspberry Pi won’t be on most computers. It’s good then that you can also specify a generic type of font to be used, such as serif, sans-serif, or monospace (where every letter has the same width).

  • font-size: Use this property to change your text size. Users should be in ultimate control of how big the text is, using their browser settings, but you can specify how big you want a piece of text to be, relative to what it would otherwise have been. There are a couple of different ways to specify this, but the simplest is to use a percentage (such as 150%).

  • font-style: Set this to italic to make text italic. If you have italic text that you want to make non-italic, set the font-style to normal.

  • font-weight: Set this to bold to make text bold. If you have text that is bold that you want to make unbold, set the font-style to normal.

  • text-decoration: Set this to underline to underline text, and to none if you don’t want text to be underlined. Because website visitors expect underlined text to be a link, it’s rarely a good idea to underline any other text.

  • text-align: Give this property a value of left, right, center, or justify to specify how text is aligned.

  • text-indent: Use this to set an indent for the first line of text. A value of 1em indents the first line by the width of a letter m. You can use other numbers too, such as 0.5em, 1.5em, or 2em.

You can format text lots of different ways using these. For example, if you wanted to make all the text on your page serif, you would use

body { font-family: serif; }

If you wanted to specify that your page should be displayed ideally with the font Liberation Serif, but with any other serif font if that one is not available, use

body { font-family: “Liberation Serif”, serif; }

Note that because the font name has more than one word in it, there are quotation (speech) marks around it. Between the different font names or types, there is a comma.

To make your paragraphs all justified (so that left and right edges are both straight), but with an indent in the first line, use

p { text-align: justify;
 text-indent: 0.5em; }

To turn off the underlining on links and make them bold instead, use

a { font-weight: bold;
 text-decoration: none; }