How to work with Font Property of Cascading Style Sheets

To work with Font Property of Cascading Style Sheets

The Font tab of the CSS Selector Inspector lets you define a font family and make the font style settings, including color, font size, and line height.

1. Font text box
   

2. Moves selected font in the list
   

3. Font Set pop-up menu
   

4. Font pop-up menu

To edit the font properties of a style:

Step 1.

• First of all, you have to select a style in the Style Sheet window, and click the Font tab () in the CSS Selector Inspector.

Step 2.

• And then choose the a font color from the Color pop-up menu, or drag in a selection from the Real Web Colors tab () of the Color Palette to set the foreground color property.

Step 3.

• Enter a font size in the Size text box and choose an absolute, relative, length unit, or a percentage from the Units pop-up menu, and then press Enter.

Step 4.

• Enter a number in the Line Height text box. Line height is the distance between the baselines of two adjacent lines of text. Select a unit (use percent to maintain scalability) from the Units pop-up menu, and then press Enter.

Step 5.

• Choose a font style from the Style pop-up menu.

• After that choose Unchanged to keep an element’s current font style unchanged when the new style sheet is applied.

Step 6.

• Choose a font weight from the Weight pop-up menu.

• Values 100-300 are lighter than normal, and values 500 to 900 are heavier than normal.

• Lighter and Bolder applies font weights that are relative to the weight inherited from the parent element.

• Unchanged keeps an element’s current font weight unchanged when the new style sheet is applied.

Step 7

• Choose the style’s preferred font family and alternate font families to use if the font is not available on the Web viewer’s computer.

• To add font families to the Font Family list, do one of the following:

  1. Choose a font set from the font set pop-up menu.
     

  2. Click New, and choose a font from the font pop-up menu; or type a font name, and then press Enter.
     

  3. To change the order of preference, select an entry from the list, and use the Up button and the Down button to shift the selection.

Step 8.

• Finally, select the font properties in the Decoration section to set a text-decoration property.