ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


  Home > Courses, Tutorials & eBooks > CSS Tutorial > Working with Fonts

CSS Tutorial - Working with Fonts

                                                                                                                                Page 1 of 2

In this chapter you will learn:

  • How to display text with different fonts
  • Manipulating size of the text
  • Defining style of the font and its boldness
  • Expanding the text with font-stretch property

This chapter acquaints you with how to work with fonts. CSS enables you to change the way your text is displayed. This is made possible by  the several options CSS gives you for defining the styles of text. You can change the font-family, boldness, size, and also the style of the text.

The several options for defining the styles of text are given below:


  • Visitors can view only the fonts which are already installed in their computer, so if the font you are using is not supported by the visitor's browser, it will cause weird effects. Hence, the solution is to use standard fonts or the generic font names.
  • The font-family property is a prioritized list of font family names and/or generic family names for an element.
  • While using font family property, more than one font in your family-font tag is to be used.
  • It can have the values:
    Font name- It displays the exact name of the font to be used. 
    Family name- It displays different names of the font-family; like "times", "courier", "arial", etc.
    Generic name- It displays names of a generic family like "serif", "sans-serif", "cursive", "fantasy", "monospace", etc.
  • Multiple choices of  fonts are separated by commas.
  • Any font name containing white space must be quoted with either single or double quotes.
  • A generic family name should always be offered as the last alternative.


p { font-family = verdana  arial  helvetia;}





  • With this property, the size of the text appearing on a web page can be manipulated. How large or small the text should appear, can be specified.
  • It can have two values: Absolute and Relative.
  • Absolute keywords can be:  xx-small, x-small, small, medium, large, x-large, xx-large.
    These set the size of the font to different sizes, from xx-small to xx- large.
  • Relative keywords can be:                                                                                                                                   
      smaller- This sets the font to a smaller size than the parent element.
      larger- This sets the font size to a larger size than the parent element.
      length- This sets the font size to a fixed size.
      % - This sets the font size to a percentage of the parent element.
  • By default, text appears with a font size of medium.


p { font-size : 50%; }

              CSS, Cascading Style Sheet

                    p { font-size : 10 px; }

                            CSS, Cascading Style Sheet

                    p { font-size : xx-large; }

      CSS, Cascading Style Sheet



  • CSS allows a list of fonts in order of preference, similarly as in the font family property. The generic font names are chosen if the exact font name and font families are not available. However when font substitution occurs; font-size, line-height, and font-weight do not adjust to preserve legibility of the first choice. The unadjusted results of font-substitution are often unacceptable. To solve this problem, CSS proposed a new property called font-size-adjust.

  • Font-adjust property applies simple algorithmic transformation of the originally specified font-size, line-height, and font-weight to the substituted font to help preserve the font's appearance.

  • The font-size-adjust property specifies an aspect-value for an element that will preserve the ex-height of the first choice font in substituted fonts.

  • The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value.

  • It can have the values: none or number.
      none- This does not preserve the font's previous height if the font is unavailable.
      number- This defines the aspect value ratio for the font.

The formula used is:

Font size applied to available font= font-size of first choice font * font-size (font-size-adjust/aspect value of available font)


  • The CSS font-style property defines the style of the font, i.e. whether the font displayed will be italic or not.
  • It can have the values- normal, italic or oblique.
      normal - The browser displays a normal font.
      italic - The browser displays an italic (also known as cursive) font.
      oblique - The browser displays an oblique font (also known as slanted or inclined font). It is similar to an italic font.
  • By default, normal font is applied.



   p { font-style : normal;}

                    Normal text

                    p { font-style : italic;}

                    Italic text

                     p { font-style : oblique;}

                    Oblique text




Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.