Academic Tutorials

English | French | Portugese | German | Italian
Home Advertise Payments Recommended Websites Interview Questions FAQs
News Source Codes E-Books Downloads Jobs Web Hosting

CSS 2.0
CSS 2.0 Introduction
CSS 2.0 Attaching Style
CSS 2.0 Applying Style
CSS 2.0 Key Concepts
CSS 2.0 Color Contents
CSS 2.0 Fonts Contents
CSS 2.0 Text
CSS 2.0 Lists
CSS 2.0 the box model
CSS 2.0 Advanced concepts
CSS 2.0 Positioning
CSS 2.0 Boxes
CSS 2.0 Generated content
CSS 2.0 Dynamic effects
CSS 2.0 Tables
CSS 2.0 Paged media
CSS 2.0 Font Face
CSS 2.0 Aural Style Sheets
CSS 2.0 Language styles

HTML Tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
TCP/IP Tutorial
CSS 1.0
CSS 2.0
XML Tutorials
XML Tutorial
XSL Tutorial
XSLT Tutorial
DTD Tutorial
Schema Tutorial
XForms Tutorial
XSL-FO Tutorial
XML DOM Tutorial
XLink Tutorial
XQuery Tutorial
XPath Tutorial
XPointer Tutorial
RDF Tutorial
SOAP Tutorial
WSDL Tutorial
RSS Tutorial
WAP Tutorial
Web Services Tutorial
Browser Scripting
JavaScript Tutorial
VBScript Tutorial
DHTML Tutorial
HTML DOM Tutorial
WMLScript Tutorial
E4X Tutorial
Server Scripting
ASP Tutorial
PERL Tutorial
SQL Tutorial
ADO Tutorial
Apple Script
PL/SQL Tutorial
SQL Server
.NET (dotnet)
.Net Mobile
C# : C Sharp
SVG Tutorial
Flash Tutorial
Media Tutorial
SMIL Tutorial
Photoshop Tutorial
Gimp Tutorial
Gnuplot Programming
GIF Animation Tutorial
Scientific Visualization Tutorial
Web Building
Web Browsers
Web Hosting
W3C Tutorial
Web Building
Web Quality
Web Semantic
Web Careers
Weblogic Tutorial
Web Site Hosting
Domain Name
Java Tutorials
Java Tutorial
JSP Tutorial
Servlets Tutorial
Struts Tutorial
EJB Tutorial
JMS Tutorial
JMX Tutorial
Programming Langauges
C Tutorial
C++ Tutorial
Visual Basic Tutorial
Data Structures Using C
Assembly Language
Forth Programming
Lisp Programming
Data Warehousing
CGI Programming
Emacs Tutorial
Soft Skills
Communication Skills
Time Management
Project Management
Team Work
Leadership Skills
Corporate Communication
Negotiation Skills
Database Tutorials
Operating System
Software Testing
SAP Module
Business Warehousing
SAP Basis
Material Management
Sales & Distribution
Human Resource
Customer Relationship Management
Production and Planning
Networking Programming
Corba Tutorial
Networking Tutorial
Microsoft Office
Microsoft Word
Microsoft Outlook
Microsoft PowerPoint
Microsoft Publisher
Microsoft Excel
Microsoft Front Page
Microsoft InfoPath
Microsoft Access
Financial Accounting
Managerial Accounting
Network Sites

CSS 2.0 Properties-Fonts

Previoushome Next

CSS2 tutorial - CSS2 Properties-Fonts


Font properties

All font properties are inherited and apply to all elements.


This allows a specific font to be used. For example, font-family: Arial.

In order that if your preferred font is not available, your second choice is used, one may specify any number of comma separated fonts (where the first listed font will be used if available, the second if the first is not, etc.). For example, font-family: Times, Georgia.

Font names containing white space must be in quotes - font-family: Times, "Times New Roman"

As a last choice, a generic family should be specified, which can be one of: serif (a serif is an adornment on a font, such as T - e.g., Times), sans-serif (e.g. Arial; recommended for body text), cursive, fantasy, monospace (e.g., Courier). Generic fonts must not be quoted.

Font-family does have an initial value, but it is browser-specific.

P {font-family: "Times New Roman", Times, serif}

It is recommended that as many fonts as possible should be specified. In my opinion, Arial is the best BODY font, Arial Rounded MT Bold the best heading font, Times NR Cyr MT the best drop cap font, and Andale Mono the best monotype font.


This can be specified as a length, or one of the following keywords: xx-small, x-small, small, medium (initial value), large, x-large, xx-large.

In addition, a relative keyword can be specified as one of larger or smaller.

It should be noted that relative values, keywords and percentages relate to the parent element's font-size.

Example: P {font-size: 1em} or P {font-size: large}.

Internet Explorer 3 and Netscape 4.* treat all relative units and % as relative to the element default rather than as relative to the parent element.

Relative font sizes

In theory it is preferable to use relative font sizes. These are those that the use the relative units such as the em or %. For example, font-size: 120% means 120% of the inherited value of font-size. However, Netscape 4 and Internet Explorer do not support % or em in a reliable way.

The important thing, however, is to never use points - pixels are acceptable, but points are not because they are typically rendered at 1/3 smaller on a Macintosh than a Windows machine.

Therefore, the easiest thing to do is to specify declarations in the form BODY {font-size: 16px} or H1 {font-size: 32px}.


Have you ever noticed that some fonts (particularly script fonts) appear smaller than others at the same font-size? There is a good reason for this - different fonts have different aspect values (= font size / x-height). Bigger aspect values mean that the fonts look bigger at the same font-size.

Font-size-adjust allows the author to ensure that if the viewer does not have the font specified, the font that they do have will be scaled up (or down) to have the same apparent font size.

Typical values are: Verdana = 0.58, Comic Sans MS = 0.54, Trebuchet MS = .53, Georgia = .5, Myriad Web = .48, Minion Web = .47, Times New Roman = .46, Gill Sans = .46, Bernhard Modern = .4, Caflisch Script Web = .37, Flemish Script = .28.

Font-size-adjust is inherited, and is initally set to none. E.g., font-size-adjust: 0.58. If the used font had an aspect value of 0.5, then the all font sizes would be increased by a factor of .58/.5 - font-size: 16px would be rendered as 19px.


This can be specified as normal (initial value), italic or oblique (slanted). Example: P {font-style: italic}

Few browsers supports oblique, most either ignoring it or simply rendering it as italic.


This can be specified as normal or small-caps, where normal is the initial value. Example: P {font-variant: small-caps}.


This can be specified as normal (initial value), or bold. Example: P {font-weight: bold}

It can also be specified as an absolute number, being one of 100, 200, 300, 400 (the same as normal), 500, 600, 700 (the same as bold), 800, or 900, where 100 is the lightest and 900 the most bold.

It can also be specified as lighter or bolder, which will result in the next lighter or bolder font than the inherited value.


This can take the value ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Or it can take a relative value of wider or narrower. It is inherited and is intially normal. E.g., font-stretch: expanded.


This specifies the height of lines. The difference between line-height and font-size is called the leading (after the lead strips formerly used). Half of the leading is applied above the line, and half below it. Each line is formed by a rectangular line box. Line boxes are stacked one on top of each other to form a paragraph.

The height of each line box is from the top of the highest inline box (bearing in mind that there can be different line-heights on any given line) in the line to the bottom of the lowest one. The height of textual elements depends on line-height, whereas the height of replaced elements is dependent on the 'height' that they have.

Line-height can be specified as a length, % (relative to the element's font size), <number> or normal (the same as <number>, except the browser chooses the number). If <number> is specified, it multiplies the font-size by that number. This is similar to %, but with %, the calculated value for the line-height is inherited, but with a number, the number is inherited. E.g., BODY {font-size: 16px; line-height: 120%} would give an inherited line-height of 19.2px, but BODY {font-size: 16px; line-height: 1.2} would give an inherited line-height of 1.2*the font-size of the element's descendants.

Line-height applies to all elements. Line-height is inherited. The effect of line height is to apply (line-height - font-size)/2 above and below the text. E.g., line-height: 18px, with font-size: 16px would put 1px of space above, and 1px below the line.

Line-height cannot be negative.

BODY {line-height: 1.5em}
P {line-height: 115%}

Netscape incorrectly treats line-height: 2 (or whatever) as line-height: 200%. IE 3 treats line-height: 2 (or whatever) as 2pt.

IE 3 correctly applies line-height, but whenever setting line-height in IE 3, you automatically set margin-top: 0, which causes serious problems (see under the box model).


This shorthand property allows you to specify one or more of the above (except for font-stretch or font-size-adjust) at once in the order (style, variant, weight = these can be in any order), size(/line height - optional) fontName. E.g. P {font: italic 16px/18px Arial}. Thus if you state the line height, it must be preceded by a / to show that you don't mean the font size.

If using this shortcut, you must specify both a font size and a font family.

Example: font: 12px Arial. This (because all shorthand properties reset the unset values to their initial settings) is equivalent to:

font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-style: normal;
font-size-adjust: none
font-size: 12px;
font-family: Arial;

System fonts

Alternatively, you can specify INSTEAD a system font.

System fonts specify that the font used (including all characteristics of the font - size, weight, etc.).

Valid system fonts can be one of caption (the font used for captioned controls), icon (the font used for icon labels), menu (the font used for menus), message-box (the font used in dialog boxes), small-caption (the font used for labeling small controls) or status-bar (the font used in window status bars). If one of these is declared, all values are that of the system font - not the inherited value. For example, font: caption.

Illegal would be font: 16px caption, but you could use font: caption; font-size: 16px. Note that where the OS does not set values for some of the individual properties (typically only size, weight, style and family are set), they are set to the initial value. For example, if font: caption has a size of 10px, a font of MS Sans Serif, a weight of bold and a style of normal, but no value for stretch, line height or variant, then these would be set to their initial values.

Be the first one to comment on this page.

  CSS 2.0 eBooks
More Links » »
 CSS 2.0 FAQs
More Links » »
 CSS 2.0 Interview Questions
More Links » »
 CSS 2.0 Articles

No CSS 2.0 Articles could be found as of now.

 CSS 2.0 News

No News on CSS 2.0 could be found as of now.

 CSS 2.0 Jobs

No CSS 2.0 Articles could be found as of now.

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

Previoushome Next

Keywords: CSS2 Properties-Fonts, CSS2, css2, CSS2 tutorial, CSS2 tutorial pdf, history of CSS2, Custamizing Style Sheet, learn CSS2

HTML Quizzes
CSS Quiz
CSS 1.0 Quiz
CSS 2.0 Quiz
XML Quizzes
XML Quiz
XSL Quiz
DTD Quiz
Schema Quiz
XForms Quiz
XLink Quiz
XQuery Quiz
XPath Quiz
XPointer Quiz
RDF Quiz
RSS Quiz
WAP Quiz
Web Services Quiz
Browser Scripting Quizzes
JavaScript Quiz
VBScript Quiz
WMLScript Quiz
E4X Quiz
Server Scripting Quizzes
ASP Quiz
SQL Quiz
ADO Quiz
CVS Quiz
Python Quiz
Apple Script Quiz
SQL Server Quiz
PHP Quiz
.NET (dotnet) Quizzes
Microsoft.Net Quiz
ASP.Net Quiz
.Net Mobile Quiz
C# : C Sharp Quiz
VC++ Quiz
Multimedia Quizzes
SVG Quiz
Flash Quiz
Media Quiz
Photoshop Quiz
Gimp Quiz
Matlab Quiz
Gnuplot Programming Quiz
GIF Animation Quiz
Scientific Visualization Quiz
Graphics Quiz
Web Building Quizzes
Web Browsers Quiz
Web Hosting Quiz
W3C Quiz
Web Building Quiz
Web Quality Quiz
Web Semantic Quiz
Web Careers Quiz
Weblogic Quiz
SEO Quiz
Web Site Hosting Quiz
Domain Name Quiz
Java Quizzes
Java Quiz
JSP Quiz
Servlets Quiz
Struts Quiz
EJB Quiz
JMS Quiz
JMX Quiz
Eclipse Quiz
J2ME Quiz
Programming Langauges Quizzes
C Quiz
C++ Quiz
Visual Basic Quiz
Data Structures Using C Quiz
Cobol Quiz
Assembly Language Quiz
Mainframe Quiz
Forth Programming Quiz
Lisp Programming Quiz
Pascal Quiz
Delphi Quiz
Fortran Quiz
OOPs Quiz
Data Warehousing Quiz
CGI Programming Quiz
Emacs Quiz
Gnome Quiz
ILU Quiz
Soft Skills Quizzes
Communication Skills Quiz
Time Management Quiz
Project Management Quiz
Team Work Quiz
Leadership Skills Quiz
Corporate Communication Quiz
Negotiation Skills Quiz
Database Quizzes
Oracle Quiz
MySQL Quiz
Operating System Quizzes
BSD Quiz
Symbian Quiz
Unix Quiz
Internet Quiz
IP-Masquerading Quiz
IPC Quiz
Software Testing Quizzes
Testing Quiz
Firewalls Quiz
SAP Module Quizzes
ERP Quiz
Business Warehousing Quiz
SAP Basis Quiz
Material Management Quiz
Sales & Distribution Quiz
Human Resource Quiz
Netweaver Quiz
Customer Relationship Management Quiz
Production and Planning Quiz
Networking Programming Quizzes
Corba Quiz
Networking Quiz
Microsoft Office Quizzes
Microsoft Word Quiz
Microsoft Outlook Quiz
Microsoft PowerPoint Quiz
Microsoft Publisher Quiz
Microsoft Excel Quiz
Microsoft Front Page Quiz
Microsoft InfoPath Quiz
Microsoft Access Quiz
Accounting Quizzes
Financial Accounting Quiz
Managerial Accounting Quiz
Testimonials | Contact Us | Link to Us | Site Map
Copyright ? 2008. Academic All rights reserved Privacy Policies | About Us
Our Portals : Academic Tutorials | Best eBooksworld | Beyond Stats | City Details | Interview Questions | Discussions World | Excellent Mobiles | Free Bangalore | Give Me The Code | Gog Logo | Indian Free Ads | Jobs Assist | New Interview Questions | One Stop FAQs | One Stop GATE | One Stop GRE | One Stop IAS | One Stop MBA | One Stop SAP | One Stop Testing | Webhosting in India | Dedicated Server in India | Sirf Dosti | Source Codes World | Tasty Food | Tech Archive | Testing Interview Questions | Tests World | The Galz | Top Masala | Vyom | Vyom eBooks | Vyom International | Vyom Links | Vyoms | Vyom World | Important Websites
Copyright ? 2003-2024 Vyom Technosoft Pvt. Ltd., All Rights Reserved.