Styling Text Using CSS
CSS supports many different text styles that you can use to make newly downloaded text stand out. Following is a list of the most popular style properties and what they let you set:
-
font-family: Specifies the actual font, like Arial or Helvetica. If you want to list alternative fonts in case the target computer is missing your first choice, specify them as a comma-separated list (like this: {font-family: Arial, Helvetica}).
-
font-style: Specifies how the text is to be rendered. Set to normal, italic, or oblique.
-
font-weight: Refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. Set to normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900.
-
line-height: Indicates the height given to each line.
-
font-size: Refers to the size of the font.
-
text-decoration: Underlines text. Set to none, underline, overline, line-through, or blink.
-
text-align: Centers text. Set to left, right, or center.
Following is an example, fontStyles.html, that puts these font properties to work. This example sets the styles for the <body> element in a <style> element:
<html> <head> <title> Setting fonts with CSS </title> <style type="text/css"> body { . . . } </style> </head> <body> <h1>Setting fonts with CSS</h1> <br> This page displays a CSS example styling text. </body> </html> Here’s how you can put the style properties to work:
<html> <head> <title> Setting fonts with CSS </title> <style type="text/css"> body {font-style: italic; font-weight: bold; font-size: 16pt; line-height: 12pt; font-family: arial, helvetica; text-align: center} </style> </head> <body> <h1>Setting fonts with CSS</h1> <br> This page displays a CSS example styling text. </body> </html> Here are the CSS style settings for this example:
font-style: italic font-weight: bold font-size: 16pt line-height: 12pt font-family: arial, helvetica text-align: center
Note in particular the font-family style property, which you can set to a comma-separated list of font names such as arial, helvetica, times, and so on. If the browser can’t find the first font, it searches for the next, and so on down the line. You can see this page in Figure 10.7, where the styles have been applied to the text.
Figure 10.7: Styling fonts using CSS
Another example, textStyles.html, also puts these styles to work:
-
font-style to make text italic
-
font-weight to make text bold
-
font-size to set the font size
-
font-family to set the font face
-
text-decoration to underline the text
-
text-align to center the text
The textStyles.html example styles the text in <p> elements in the page:
<html> <head> <title> Styling text using CSS </title> <style> p {font-size: 16pt; font-style: italic; text-align: center; font-family: Arial, Helvetica;} </style> </head> <body> <h1> Styling text using CSS </h1> . . . </body> </html> and it also uses the style attribute of <span> elements for some inline styling, making text bold and italic:
<html> <head> <title> Styling text using CSS </title> <style> p {font-size: 16pt; font-style: italic; text-align: center; font-family: Arial, Helvetica;} </style> </head> <body> <h1> Styling text using CSS </h1> <p> This text is styled in italics. Some of this text is <span style="font-weight: bold">bold</span>, and some of it is even <span style="text-decoration: underline"> underlined</span>. </p> </body> </html> The results are shown in Figure 10.8.
Figure 10.8: Styling text using CSS
