CSS Fonts, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Fonts, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Fonts.


     Back             Next     



Here you will learn about CSS fonts and how they are applied using Cascading Style Sheet. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:

CSS Font Properties.

CSS Font Family [font-family]

Cascading Style Sheet font-family property is used to set a prioritized list of fonts to be used to display on website or given element. If the first font on the list is not installed on the computer used to access the website, the next font on the list will be tried until a suitable font is found by the web browser.

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used for display
<generic-family>
  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Default Value: Determined by browser
Applies to: All elements
Inherited: Yes

Example of CSS Font Family

H1 { font-family: Courier New; }
P { font-family: Geneva, Arial, Helvetica, sans-serif; }

CSS Font Style [font-style]

CSS font-style property defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h1> will be shown in italics.  Details of CSS Font Style property is as under.

Syntax: font-style: <value>
Possible Values: normal | italic | oblique
Default Value: normal
Applies to: All elements
Inherited: Yes

Example of CSS Font Style

H1 { font-style: oblique }
P { font-style: normal }

CSS Font Variant [font-variant]

CSS font-variant property is used to choose between normal or small-caps variants of a font in a website. A small-caps font in Cascading Style Sheet is a font that uses smaller sized capitalized letters (Upper Case) instead of lower case letters. Confused? Take a look at these details of CSS Font Variant.

Syntax: font-variant: <value>
Possible Values: normal | small-caps
Default Value: normal
Applies to: All elements
Inherited: Yes

Example of CSS Font Variant

SPAN { font-variant: small-caps }

CSS Font Weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold in a website. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a text font.  Details of CSS Font Weight is as under.

Syntax: font-weight: <value>
Possible Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Default Value: normal
Applies to: All elements
Inherited: Yes

Example of CSS Font Weight

H1 { font-weight: 800 }
P { font-weight: normal }

CSS Font Size [font-size]

The size of a font is set by the property font-size in CSS.

There are many different units (e.g. percentages or pixels) to choose from to describe font sizes in CSS. In this CSS Tutorial we will focus on the most common and appropriate units. Details of CSS Font Size property is as under.:

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)
Default Value: medium
Applies to: All elements
Inherited: Yes

Example of CSS Font Size

H1 { font-size: x-small }
P { font-size: 20pt }
LI { font-size: 75% }
STRONG { font-size: x-larger }

CSS Font [font]

CSS Font short hand property it is possible to cover all the different font properties in one single property while using Cascading Style Sheet in a website.

For example, imagine these four lines of code used to describe font-properties for <p>:

Syntax: font: <value>
Possible Values: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Default Value: Not defined
Applies to: All elements
Inherited: Yes

Example of CSS Font

P { font: italic bold 12pt/14pt Times, serif }

     Back             Next     


 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 267 visitors are online now