You can make Web page text bold using the font-weight property in a style rule. The rule allows you to control the amount of boldness. Setting text to bold can help draw attention to it on a page. Adding bold formatting to colored links can give the links on your page extra emphasis. To emphasize text with italic formatting or by changing its color, see the other sections of this chapter.

Add Bold to Text

• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

• 
• 

  You can use the normal value to remove boldness that may be inherited from previous style rules.

  You can also specify a number value using a multiple of 100 from 100 to 900 to control the boldness level. Not all browsers support this feature.

  The Web browser bolds all the text to which the tag is applied.

  

  Note

  To learn more about how to link a style sheet to all the pages on your Web site, see Chapter 9.

You can use the font-style property to italicize Web page text. Applying italics is an easy way to add emphasis to text. The font-style property accepts three values: italic, oblique , and normal . Both the italic and oblique values apply similar slanted formatting to text whereas normal makes text non-italic. Use care when applying italic formatting to small text because this can make the text hard to read. To draw attention to text using bold formatting or by changing its color, see the other sections of this chapter.

Italicize Text

• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

• 
• 

  You can use the normal value to remove italics that may be inherited from previous style rules.

  The Web browser italicizes all the text to which the tag is applied.

  

You can indent the first line in a paragraph using the text-indent property in a style rule. This can give the paragraphs on your page a more traditional look and feel. You can set the indentation as a specific measurement value or as a percentage of the overall text block width. You can create an outdent, also known as a hanging indent, by setting the text-indent property to a negative number.

Indent Text

• 

  You can also set a size measurement in millimeters (mm), centimeters (cm), inches (in), points (pt), picas (pc), x-height (ex), or em space (em).

  You can also set an indent size as a percentage of the text block width, such as 20 percent.

  The Web browser indents the first line of all the text to which the tag is applied.

  

  Note

  To indent text with margins, see Chapter 11.

You can use the font-size property to change the font size for a document's text. By changing font size, you can emphasize or de-emphasize different sections of text on your page. Instead of going through your document and changing each instance of a tag, you can use the style sheet rule to change the font size for all uses of the tag in your document. The font-size property accepts a variety of measurement units. To change the size of text using HTML, see Chapter 4.

Change the Font Size

• 
• 

  You can also type a descriptive (xx-small, x-small, small, medium, large, x-large, or xx-large) font size.

  The Web browser assigns the font size for any text to which the tag is applied.

  

  Note

  Learn how to create tables in Chapter 7.

To change the font for your HTML text, you can use the font-family property. You can specify a font by name. Because not all fonts are available on all computers, you can designate a second or third font choice. This way, if the computer does not have the first choice installed, the browser tries to display the next choice instead.

For best results, assign multiple font choices and be sure to include a common font, such as Arial, Verdana, Courier, or Times New Roman.

Change the Font

• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

• 
  
• 

  If the font name includes a space, surround the name in quotes.

  You can repeat step 3 to assign additional fonts.

  The Web browser uses the assigned font for any text to which the tag is applied.

  In this example, the style rule is applied to the <BODY> tag, so all the body text is affected.

Note

Can I apply multiple style settings to my fonts at the same time?

Yes. You can write a style rule that combines several font settings at the same time using the font property. For example, you can designate the font, font size, and font style for a particular tag instead of writing three different rules for the tag. Your combined rule might look like this:

P {font: italic 18pt ?Times
New Roman?, Arial}

Some browsers may require you to type the properties in a particular order, such as font style before font size.

What are serifs?

Serifs are the small decorations that appear at the ends of some letters. Fonts can be classified by whether or not they include serifs. Common serifed fonts include Times New Roman, Georgia, and Palatino. Popular non-serifed, or sans serif, fonts include Arial, Verdana, and Helvetica. Sans serif fonts can be easier to read at smaller sizes on Web pages.

You can use the text-transform property to change the text case for a tag. For example, you may want all <H2> text to appear in all capital letters. The property controls how the browser displays the text regardless of how it was typed.

You can choose from four case values: capitalize, uppercase, lowercase , and none . Use the capitalize value if you want the first character of each word to appear capitalized. Use the none value to leave text as is. The none value cancels any case values the text may have inherited.

Change the Text Case

• 
• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

  The Web browser assigns the text case to the content.

  

You can control the horizontal positioning of block-level text in your page using the text-align property. Block-level text includes paragraphs, tables, and other elements that display a blank line before and after the element on the page. You can align text to the left or right, center the text, or create justified text. By default, most browsers align text to the left. To change the alignment of text using HTML, see Chapter 3.

Change Text Alignment

• 
• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

  The Web browser assigns the alignment to the content.

  

You can use the line-height property to adjust the spacing, or leading, between lines of text. Adjusting line spacing can make your Web page text easier to read. The line spacing value can be specified as a multiple of the height of the element's font. It can also be specified as an absolute value or a percentage. Be careful when applying small values because this can result in overlapping lines. Line spacing cannot have a negative value.

Control Line Spacing

• 
• 

  This example uses a value of 2.0 to make the spacing two times the current font height.

  You can also set a percentage or an absolute value, such as 10px, for the spacing.

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

  The Web browser assigns the line spacing to the content.

  

You can control the spacing between characters, or kerning, using the letter-spacing property. Letter spacing changes the appearance of your text by increasing or condensing the space between letters.

You can specify letter spacing in points (pt), pixels (px), millimeters (mm), centimeters (cm), inches (in), picas (pc), x-height (ex), or em space (em). The specified value is added to the default spacing that is normally inserted between letters. Negative values condense the space between letters, with high negative values causing letters to overlap.

Control Letter Spacing

• 
• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

  The Web browser assigns the letter spacing to the content.

  

  Note

  See Chapter 9 to learn more about creating classes in your style sheets.

You can use the color property to change the color of text in your Web page. You can specify one of 16 predefined HTML colors, a hexadecimal color value, or an RGB value. You can change the text color to make it match the theme of your Web site. You can use color to emphasize important content, such as alert text or error messages. You can also use the color property to change other Web page elements, such as tables, borders, and horizontal rules.

Add Color to Text

• 
• 

  Note

  To view a table of color values, see ?Change the Text Color? in Chapter 4.

  The Web browser uses the assigned color for the text to which the tag is applied.

  

You can use the background property to change the color that appears behind text, tables, or other elements on the page. For example, you can change the background color for a block of text or a data cell in a table. You can specify one of 16 predefined HTML colors, a hexadecimal color value, or an RGB value.

Use caution when assigning a background color to an element, taking into account the color of the text in the foreground.

Add a Background Color to Text

• 
• 

  Note

  For more about color values, see Chapter 4.

  The Web browser assigns the background color to the content.

  

  Note

  See Chapter 7 to learn how to add tables.

You can add a background image to a section of text using a style sheet rule. To specify a background image, you must know the name and location of the image file. If the image is small, it repeats, or tiles, to fill the background area. You can control the repeat using the repeat values.

Be careful when assigning a background image, taking into account the color of the text in the foreground. See the section? Add Color to Text? to learn how to adjust the color of text and other content.

Add a Background Image to Text

• 
• 

  In this example, the background image is in the same directory as the style sheet so the image can be referenced with just a file name.

  
• 

  repeat repeats the image to fill the background (default).

  repeat-x tiles the image horizontally.

  repeat-y tiles the image vertically.

  no-repeat prevents a background image from repeating.

  The Web browser displays the background image as designated in the style rule.

  

  Note

  For more about applying styles with a DIV tag, see Chapter 9.

Note

Where can I find good background images to use with my Web pages?

If you do not have images to use as backgrounds, you can try finding free ones on the Web. Many sites offer texture images, such as marble backgrounds and water. For example, BackgroundCity.com (www.backgroundcity.com) and -Free-Backgrounds.com (www.free-backgrounds.com) are good places to start. Try conducting a Web search on the keywords ?free background images.?

If users have images turned off in their browsers, can they see the background image for an element?

No. However, you can insert both a background color and a background image. While the image downloads, the browser displays the background color. If the users have images turned off, they still see the background color. Be sure to type the color property before the URL. Your style rule will look something like this:

P {background: yellow
url(?images/wheatbg.jpg?)}

You can add a border to a Web page element using the border property. A border can help separate the element from other Web page objects. You can designate a specific thickness value, or you can specify one of three descriptive values: thin, medium , or thick . By specifying a style, you can create a border with a single, double, dotted, or other type of line. You can also assign a color value to a border. See Chapter 4 for more about color values.

Add a Border

• 
• 
• 

  Note

  If you do not set a border style with the border property, the browser does not display a border.

  
• 

  Note

  To view a table of color values, see ?Change the Text Color? in Chapter 4.

  

  Be sure to separate multiple property-value pairs in a rule with semicolons.

  Note

  See Chapter 11 to learn more about padding.

  The Web browser assigns a border to the content.

  

  Note

  See Chapter 9 to learn more about creating classes in your style sheets.

Note

Can I add a border to certain sides of an element instead of the entire element?

Yes. You can use the border-left, border-right, border-top, and border-bottom properties to designate on which sides you want to add a border. Your code may look like this:

H3 {border-left: double 5px;
border-right: double 5px}

In this example, a double border is added to the left and right sides of the heading.

Is there a way to remove the borders from elements on my page?

Yes. To remove borders, such as those that appear by default around linked images, you can use the border property and set the value to none. Your code may look like this:

IMG {border: none}

You can control the appearance of links throughout your Web pages using a style rule. You can change the color of unvisited, visited, and active links to make them match the theme of your Web site. You can specify one of 16 predefined HTML colors, a hexadecimal color value, or an RGB value. You can also remove the default underlining that normally appears beneath a link using the text-decoration property. To change the color of a link or turn underlining on when the cursor hovers over it, see ?Change Link Hover Effects.?

Change Link Colors

• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

• 
• 

  Note

  To view a table of color values, see ?Change the Text Color? in Chapter 4.

  
• 
• 

  The Web browser displays the link in the style you specified.

  

Note

What other style sheet properties can I apply to links?

You can use the background and font-family properties to control the appearance of your links. Here is an example of a style rule with other properties assigned:

A:link {background: yellow;
font-family: Arial}

Any time you type more than one property-value pair in a style rule, be sure to separate them with semicolons.

What is an RGB value?

An RGB value is a way of specifying a precise color in CSS. The color is defined by its mix of red, green, and blue components. You specify each color using a number between 0 and 255 or a percentage. For example, rgb(255, 255, 0) or rgb(100%, 100%, 0%) creates yellow. For more about creating colors for Web pages, see Chapter 4.

You can use a style rule to control how link text appears when the mouse pointer hovers over it. For example, you can change the font style of the text, add a border, or change the background color. If you have created another rule that removes the underlining from your links, you can use a hover style to make the underlining reappear. For more about changing the color of links, see ?Change Link Colors? earlier in this chapter.

Change Link Hover Effects

• 

  Note

  To learn more about writing style sheets and rules, see Chapter 9.

• 

  In this example, bold and border styles are defined.

  
• 
  

Note

Can I add other line decorations besides underline for my hover styles?

In addition to assigning the underline value to the text-decoration property, you can assign overline to place a line over the link text or line-through to place a line through the link text. You can also use these decorations to style regular, non-link text.

Why might I want to add a hover style using CSS?

With style sheets, you can customize your links so that they look more like regular text by changing their color and removing the underlining usually associated with text links. This may be stylistically appealing, but it can also hide the fact that elements on a page are hyperlinks. A hover style can give a user visual feedback that certain words on a page are clickable links.