Primary Font Properties in Css

Initially, it might seem that the manipulation of text on the Web is severely limited, but
designers are constantly pushing the envelope with new and exciting methods of treating it.
Later we’ll delve into some more complex CSS properties, but for now it’s important to understand
the basic font syntax.

Specifying Fonts

 
First, you’ll want to override some of the browser’s default CSS properties, specifically the typeface
and the font size. This is really straightforward, but there are a few interesting issues to be
aware of. The following properties would typically be declared in the body selector, allowing all
following elements to inherit the values unless you specify otherwise.

font-family

 
The font-family property is a list of font family names and/or generic family names for an
element, specified in priority order. The browser will use the first available font on the user’s
machine. There are two types of font-family values: • Family name: The name of a font family, like Times, Georgia, or Arial.
• Generic family: The name of a generic family, like serif, sans-serif, cursive, fantasy,
or monospace.
Each value must be separated with a comma, and you should always suggest a genericfamily
name as the final option in the list.
If a family name contains whitespace, such as the family name Lucida Grande, it should be
enclosed in quotes ("Lucida Grande"), although single quotes need to be used if embedding the
style in HTML.
In the following example, defining the family names and generic family for the body
element will ensure that all child elements will inherit the font-family declaration, unless
specifically overridden.
/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
}
Note also that Lucida Grande is specified first, and due to its whitespace character it is
contained within quotes. Any machines with Lucida Grande will display text with that font, and
if it isn’t available, the display will default to Arial. If neither Lucida Grande nor Arial are available,
the browser knows to use whatever appropriate sans serif font it can find next, as the generic
family sans-serif is specified.
To overrule this blanket declaration, just specify a different font family for the appropriate
element. For example, many designers like to display headings and block quotes with larger,
more classic serif fonts.