Scribd
Upload
16 views12 pages

Css Font

Uploaded by

Ashokkumar A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views12 pages

Css Font

Uploaded by

Ashokkumar A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 12

CSS Font

CSS font properties define the font family, boldness, size, and the style of a
text.
CSS Font Families
In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")

Generic Font family Description


family
Serif Times New Roman Serif fonts have small lines at the
Georgia ends on some characters

Sans-serif Arial "Sans" means without - these fonts


Verdana do not have the lines at the ends of
characters
Monospace Courier New All monospace characters have the
Lucida Console same width
font Property
The font shorthand property sets all the font
properties in one declaration. The properties
that can be set, are (in order): "font-style font-
variant font-weight font-size/line-height font-
family"
The font-size and font-family values are required.
If one of the other values are missing, the
default values will be inserted, if any.
font:italic bold 12px/30px Georgia, serif;
Property/Value Description
font-style Specifies the font style.

font-variant Specifies the font variant.

font-weight Specifies the font weight

font-size/line-height Specifies the font size and the line-height.

font-family Specifies the font family.

caption Uses the font that are used by captioned controls (like
buttons, drop-downs, etc.)
icon Uses the font that are used by icon labels

menu Uses the fonts that are used by dropdown menus

message-box Uses the fonts that are used by dialog boxes

small-caption A smaller version of the caption font

status-bar Uses the fonts that are used by the status bar
font-family Property
The font-family property specifies the font for an element.
The font-family property can hold several font names
as a "fallback" system. If the browser does not support
the first font, it tries the next font.
Start with the font you want, and end with a generic
family, to let the browser pick a similar font in the
generic family, if no other fonts are available.

font-family'Value: [[ <family-name> | <generic-family> ]


[, <family-name>| <generic-family>]

More than one font family is specified in a comma-


separated list:
p{font-family:"Times New Roman", Times, serif;}
font-style Property
The font-style property is mostly used to specify italic
text.

font-style: normal | italic | oblique

This property has three values:


• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar
to italic, but less supported)
font-size Property
The font-size property sets the size of the text. Being able to manage
the text size is important in web design. However, you should not
use font size adjustments to make paragraphs look like headings,
or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and
<p> for paragraphs. The font-size value can be an absolute, or
relative size.
• Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad
for accessibility reasons)
 Absolute size is useful when the physical size of the output is
known
• Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
Value Description
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
medium Sets the font-size to a medium size. This is default
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size in px, cm, etc.
(30px/16=1.875em)
% Sets the font-size to a percent of the parent element's font size
font-weight Property
The font-weight property sets how thick or thin
characters in text should be displayed
Value Description
normal Defines normal characters. This is default
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100 Defines from thin to thick characters. 400 is the same as
200 normal, and 700 is the same as bold
300
400
500
600
700
800
900
font-variant property

Another type of variation within a font family is


the small-caps. In a small-caps font the lower
case letters look similar to the uppercase ones,
but in a smaller size and with slightly different
proportions. The 'font-variant' property selects
that font.
font-variant: normal | small-caps
A value of 'normal' selects a font that is not a
small-caps font, 'small-caps' selects a small-
caps font.
CSS Links
Links can be styled in different ways.

Styling Links
Links can be styled with any CSS property
(e.g. color, font-family, background, etc.).
In addition, links can be styled differently
depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
• a:link {color:#FF0000;} /* unvisited link */
Text Decoration
The text-decoration property is mostly used to remove
underlines from links:
a:link {text-decoration:none;}
Background Color
The background-color property specifies the background color
for links:
a:visited {background-color:#FFFF85;}

You might also like