Font Families

CSS works with two types of font faces: specific and generic. Specific fonts include Arial, Garamond, or Times New Roman. These fonts must be installed on the user's computer. A generic font is a general description of a font. The operating system determines which installed font best fits the description. The five generic font typers are serif, sans-serif, monospace, cursive and fantasy as shown below.

Generic name	Sample
serif	abcde
sans-serif	abcde
monospace	abcde
cursive	abcde
fantasy	abcde

Syntax for using font-family:

font-family:font1, font2

Font Size

Use the font-size attribute to specify font size. Express sizes as:

• a unit of length (absolute or relative)
• with a keyword description
• as a percentage of the parent element
• with a keyword expressing the size relative to the font size of the parent element

Examine the following examples:

Absolute
font-size: [0.5in, 5mm, 0.5cm, 36pt, 3pc] 72pts = 1 inch 12 pts = 1 pica 6 pica = 1 inch Difficult to control in various resolutions and monitor sizes.	abcde abcde abcde abcde abcde
Relative
font-size: 2em em = the width of the capital M in the browser's default font size 1em = browser's default for body text independent of font face Scalable to resolution	abcde
font-size: 2ex ex = the height of a small x in the browser's default font size ex size is dependent on the font face Scalable to resolution	abcde
font-size: 20px Most closely related to monitor display, but may cause readability issues	abcde
font-size: [xx-large, x-large, large, medium, small, x-small, xx-small] Corresponds to the seven size attribute values used in the <font> tag.	abcde abcde abcde abcde abcde abcde abcde
Relative to Parent
font-size: 150%	abcde
font-size: [larger, smaller] Makes the font one size larger or smaller than the parent	abcde abcde

Word, Letter and Line Spacing

Use letter-spacing: size to control spacing between characters. Use word-spacing: size to control spacing between words, line-spacing: size to control spacing between lines and ling-height: size to control the line height.

Examples:

letter-spacing: 0.5em	Hello World!
word-spacing: 0.5in (ignored in DW)	Hello world!
line-height: 0.5	Today is a great day! Take advantage of it.

Font Styles and Weights

To specify appearance of fonts, use font-style: style_type. Style_top can be normal, italic or oblique. To control the weight of fonts, use style-weight: weight. Weight can be a value between 100 (lightest) and 900 (heaviest), either normal or bold, or lighter or bolder, relative to the parent.

Text Alignment, Indentation and Other Attributes

Use text-align: alignment to align left, center, right or justify. To vertically align text use vertical-align: alignment. Acceptable values are: baseline, bottom, middle, sub, super, text-bottom, text-top, top. Alternatively, you can use a distance value or percentage relative to the surrounding text. A positive value raises the text, while a negative value lowers it.

To indent text use text-indent: indentation, which can be an absolute or relative numerica value, a percentage of paragraph width. A negative value results in a hanging indent.

Three special attributes are: text-decoration, text-transform and font-variant. Values for text-decoration are none, underline, overline, line-through. Values for text-transform are capitalize, lowercase, uppercase, or none. Values for font-variant are small-caps or none.

Optionally, you can use the font attribute to consolidate your font choice as follows. Note that the order is essential:

font: font-style font-variant font-weight font-size line-height font-family.

Examine how this can save time when doing so in an external or embedded style sheet.

h2 {font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 3em; line-height: 0.8em; font-family: Times Roman, serif }

vs.

h2 {font: italic small-caps bold 3em/0.8em Times Roman, serif}

Work with Fonts

Download the HTML and image files for use in this exercise.

Start a new CSS in notepad. Code the following styles.

body {font-size: 12pt}

h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; color: green}

blockquote {color: red}

Save the file as style.css

Open the files named astrotxt.htm and chemtxt.htm from the downloaded files. Add the link to the style sheet in the <head> section:

<link rel="stylesheet" href="style.css" type="text/css">

Save the files and view them in the browser.

Color

You can specify color in the following ways: color: colorname, #XXXXXX, rgb(rvalue, gvalue, bvalue), or rgb(r%, g%, b%).

Keep in mind that hexadecimal values range from #000000 (black) to #FFFFFF (white), while rgb values are stated in decimal with each channel ranging in value from 0 to 255.

You can specify a background color using background-color: color attribute or a background image using background-image: url(imagename). By default, background images tile to fill the screen. Optional values for background image are:

You may consolidate the background and background-image with the following optional values:

background: background-color background-image background-repeat background-attachment background-position

background: yellow url(imagename) no-repeat fixed center center

Use the Background Style

Continue with style.css and add the following styles:

body {font-size: 12pt; color: green; background: white url(draft.jpg) no-repeat fixed center center}

h1, h2...same as before

blockquote {color: red; background-color: silver}

Save the file and refresh the HTML pages in the browser.

List Style Type

The list-style-type values include the following:

disc	List item 1 List item 2 List item 3
circle	List item 1 List item 2 List item 3
square	List item 1 List item 2 List item 3
decimal	List item 1 List item 2 List item 3
decimal-leading-zero	List item 1 List item 2 List item 3
lower-roman	List item 1 List item 2 List item 3
upper-roman	List item 1 List item 2 List item 3
lower-alpha	List item 1 List item 2 List item 3
upper-alpha	List item 1 List item 2 List item 3

List Style Image, Position and the List-Style Attribute

To use an image in your list use the list-style-image: url(imagename) attribute. You can also specify the position of the list using the list-style-position: location attribute where location is either inside (default) or outside.

To consolidate the list styles use the list-style attribute with values listed in the order shown:

list-style: list-style type list-style image list-style position

Note the browser will use the image as the bullet if it supports it, otherwise it will use the type you specify.

Use List Styles

Continue with style.css and add the following code:


ul {list-style: circle url(apple.jpg) outside}
ul b {color: rgb(155,0,0)}

Save the file and refresh the HTML pages in the browser.