• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Css » Tutorial » CSS font property
Next →
← Prev

CSS font property

By Dinesh Thakur

The font properties are used to control the appearance of the font that you apply to the text in a webpage. With these properties you can specify the size, weight, style etc. of the font.

The FONT property is a shorthand property in which multiple properties of the font category can be written at the same place. The order of values specified in font properties is font-style, font-variant, font-weight, font-size and font-family.

We’ll be covering the following topics in this tutorial:

  • Css Font-Family
  • CSS Font–Style
  • CSS Font –Size
  • CSS Font-Weight
  • CSS Font-Variant

Css Font-Family

The FONT-FAMILY property allows you to specify the font that you want to apply to the text in a webpage. The value(s) that you can specify to this property can be a generic family (family of fonts) and/or specific font from a family. If there are multiple values, then each value must be separated by comma.

The various generic families are Serif (Times New Roman etc.), Sans-Serif (Arial, MS Tahoma etc.), Cursive (Adobe Poetic a, Corsiva etc.), Fantasy (Critter, Studz etc.) and Monospace (Courier, Courier New etc.).Let us consider an example,

P {Font-Family: "Arial, Verdana, Serif;")

On specifying this property with above values will make the text that is part of <p> element to be of Arial Font. If it is not installed on visitor’s computer then it will be displayed in Verdana font. If both are not installed then any font from Serif family will be used. However, if none of them is installed on visitor’s computer then the default font used by the browser will be substituted.

If the font name contains spaces then it is necessary to specify it in inverted commas. For example:

P {Font-Family: "Times New Roman", Arial;} 
Some more examples include 
H1 {Font-Family: "monospace;"} 
body {Font-Family: "Courier, Verdana, Serif;"} 
h2 {Font-Family: "Cursive fantasy;"}

CSS Font–Style

The FONT -STYLE property allows you to specify the font style of the text in your webpage. The possible values that can be assigned to it are normal (default), italic and oblique. For example:

P{Font–Style :"italic;"}

When applied will make the default font to italic.

CSS Font –Size

The FONT -SIZE property is used to specify the size of the font. The values that can be assigned to font-size property may be specified in terms of their absolute size, relative size, length

Value Type             Possible Value

Absolute Size          xx-small, x-small, small, medium (default), large x-large, xx-large.

Relative Size           smaller, larger

Length                     in (inches), mm (millimeters), cm (centimeters), pt (points), pc (picas), px (pixels), em, ex

Percentage              #%

For example:

p {font-size : i6pt;}  
H1 {font-size: x-small;}  
BODY {font-size : larger;}  
H2 {font-style italic; font-size 150%;}

CSS Font-Weight

The FONT-WEIGHT property allows you to specify the weight of the font i.e. how bold the font is. The possible values are normal (default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900. For example:

P {Font-Weight: 200 ;} 
 P {Font-Size: 16pt ; Font-Weight : 400 ;}

CSS Font-Variant

The FONT- VARIANT property enables you to display a font in normal or small-caps. A small-caps font is a smaller version of uppercase font. For example:

P {Font-Variant: small-caps;}

Example:

<html> 
<head> <title>working of font attribute</title> 
<style type = "text/css"> 
h1 {font-family: batavia} 
p {font-size: 30; font-style : italic} 
</style> 
</head> 
<body> 
<h1>working with dhtml</h1> 
<p>the cascading style sheets (csss) and the dhtml. </p>

The Cascading Style Sheets (CSSs) made the DHTML a powerful tool that is used to develop attractive web pages, which grab the immediate attention from the user. Vie can make changes globally in a web page with the help of DHTML.

</Body>

</Html>

You’ll also like:

  1. CSS margin property
  2. CSS position property
  3. CSS padding property
  4. CSS background property
  5. CSS border-style property
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

CSS Tutorials

CSS Tutorials

  • CSS - Font Property
  • CSS - Background Property
  • CSS - CSS - Border-Style Property
  • CSS - Text-Decoration Property
  • CSS - Tables
  • CSS - Position
  • CSS - Syntax and Selectors
  • CSS - List
  • CSS - Margin
  • CSS - Padding

Other Links

  • CSS Tutorials - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2025. All Rights Reserved.

APPLY FOR ONLINE JOB IN BIGGEST CRYPTO COMPANIES
APPLY NOW