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 2 of 2


  • The CSS font-weight property allows you to control the boldness of the font.
  • Font-weight property lets you set how thick or thin the characters in the text should be displayed.
  • It can have the values- normal, bold, bolder, lighter or you can set it to 100,200,300,400,- - - - - 900.
      normal- This defines normal characters.
      bold-This defines thick characters.
      bolder / lighter- This selects the next higher or lower value that are relative to the weight inherited from the parent.
      100 to 900 defines characters from thin to thick .400 is synonymous with 400 and 700 is synonymous with bold.



p { font-weight : 700;}

                    Font-weight is 700

                    p { font-weight : lighter;}

                    Font-weight is lighter



  • The CSS font-variant property allows you to display text in a small-caps font.
  • It implies that all the lowercase letters are converted to uppercase letters but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
  • It can have the values- normal or small-caps.
      Normal enables the browser to display a normal font.
      Small-caps enables the browser to display a small-caps font.
  • The default value is normal.



             p { font - variant : small-caps;}

Incorporating  sound  and  motion into a  web  page  can  make  them  look  more  life - like.

                p { font - variant : normal;}

Incorporating sound and motion into a web page can make them look more life like.      


Every font does not support CSS font-variant property


  • The CSS font-stretch property condenses or expands the current font family.

  • It can have the values- Normal, Absolute or Relative keyword values.

  • Normal sets the scale of condensation or expansion to normal.
  • Absolute keyword values consist of - wider and narrower.
    Wider or narrower values set the scale of expansion to the next expanded value above the inherited value, or condensation to the next condensed value below the inherited value. It does not increase above 'ultra expanded' and does not decrease below 'ultra condensed'.
  • Relative keyword values consist of- ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded.
    The relative keyword values indicate a scale of condensation or expansion of the current font-family.
  • Ultra-condensed is the narrowest value and ultra-expanded is the widest value.

  • The default value of font-stretch property is normal.    



p { font-stretch : ultra-expanded;}

                    T  h  i  s  t e x t  i s  u l t r a - e x p a n d e d.



In this chapter you have learnt:

  • Prioritizing font-family names
  • Changing size of the text by specifying font-size
  • Specifying the boldness through font-weight property
  • Expansion of the font with font-stretch property
Review Questions

Fill in the Blanks

  1. _____ property allows you to manipulate the size of the text.
  2. Font-size property has values _____ and _____.
  3. _____ property defines the style of the font.
  1. Font-size
  2. Relative, absolute
  3. Font-style

State whether True or False

  1. Font-size property allows manipulation of the text boldness
  2. By default, text appears with a font size of medium
  3. Small-caps value of the font variant property displays text in upper case
  1. False
  2. True
  3. True
Apply different font styles on text.

What's Next

The next chapter will familiarize you with the basic concepts of styling borders. It will further let you know about other styles, colors and widths for borders and also corresponding to different edges.

               Hop over to the next chapter to get a close-up of border style.




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