Quackit Logo
CSS Home

CSS Tutorial

Introduction
CSS Advantages
CSS Syntax
Implementing CSS
CSS Class
CSS ID
CSS Font
CSS Text
CSS Background Code
CSS Border
CSS Margin
CSS Padding
CSS Lists
CSS Height & Width
CSS Positioning
CSS Float
CSS Layers
CSS Summary

CSS Codes

CSS Align
CSS bgcolor
CSS Cellpadding
CSS Cellspacing
CSS Hyperlinks
CSS Leading
Inline Style Sheets
Embedded Style Sheets
External Style Sheets
CSS Scrollbars
CSS Table Width
CSS Print Version
CSS Table-layout

CSS Examples

CSS Examples
CSS Table-layout Example

CSS Reference

CSS Mini Tutorial
CSS Properties
CSS Color Codes
CSS Template
CSS Media Types

Got a MySpace Page?

Get "www.yourname.com" for your MySpace page. Learn how >>.

CSS Font

Print Version

CSS font properties enable you to change the look of your text. For example, you can assign a font family, apply bold or italic formatting, change the size and more.

CSS Font Family

<p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p>

This results in:

This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).

CSS Font Size

Enables you to set the size of the text. For info on the possible values, see the CSS font-size page.

<p style="font-size:20px;">This text is using a font size of 20 pixels.</p>

This results in:

This text is using a font size of 20 pixels.

CSS Font Size Adjust

This property enables you to adjust the x-height to make fonts more legible. For more info, see the font-size-adjust page.

<p style="font-size-adjust:0.58;">This text is using a font-size-adjust value.</p>

This results in:

This text is using a font-size-adjust value.

CSS Font Stretch

This property relies on the user's computer to have an expanded or condensed version of the font being used. For all possible values, see the font-stretch page.

<p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p>

This results in:

If your computer has an expanded version of the font being used, this text will be stretched.

CSS Font Style

<p style="font-style:italic;">This text is in italics.</p>

This results in:

This text is in italics.

CSS Font Variant

Enables you to set your text to use small caps.

<p style="font-variant:small-caps;">This Text Is Using Small Caps.</p>

This results in:

This Text Is Using Small Caps.

CSS Font Weight

Enables you to set your text to bold.

<p style="font-weight:bold;">This text is bold.</p>

This results in:

This text is bold.

CSS Font Property

The font property is a shorthand property that enables you to set all font properties in one go.

<p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p>

This results in:

The styles for this text has been specified with the 'font' shorthand property.

Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
                     
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!
 

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE (ad supported) hosting.

PLUS you get:

  • FREE Website Builder
  • FREE Blog
  • FREE Starter Web Page
  • FREE Email Account
  • & much more! (Total value $123 for FREE!)
Get your FREE hosting today! >>
Featured Template:
(Build your websites in minutes!)