Font-style: the property ‘font-style’

The property font-style describing the relevant element of the styles as normal (no style), italic (italic) or oblique (slanted). In the following example, all headings, which are marked with

will be italicized.

h1 (
font-family: arial, verdana, sans-serif;
)
h2 (
font-family: “Times New Roman”, serif;
font-style: italic;
)

Font variants: the property ‘font-variant’

The property font-variant allows you to switch between normal or small-caps. For small-caps font instead of small letters (lower-case) small-written capital letters (upper-case) are used. If font-variant to small-caps is set and a “small-caps” font-variant is notpresent, the browser will display text in uppercase letters.

h1 (
font-variant: small-caps;
)
h2 (
font-variant: normal;
)

Font weight: the property ‘font-weight’

The font-weight property is used to add bold or “hard” formatting to a displayed font. A font can be either normal or bold (bold). Some browsers also support the indication of the numbers 100-900 (only full hundreds) for a fine presentation and staged reach.

p (
font-family: arial, verdana, sans-serif;
)

td (
font-family: arial, verdana, sans-serif;
font-weight: bold;
)

In this lesson you will learn more about how fonts in CSS can be used. We will also show how one can deal with the problem when a certain (special) font, which you have chosen for your site, does not appear because the host does not have this font installed.

Font family: the property ‘font-family’

The property font-family is used to create a prioritization list of fonts in which a particular element or a Web page should be displayed. If the first font is not installed on the computer with which the site is displayed the next one from the list is tryed until an existing matching font is found. There are two ways to categorize fonts: font families and generic (generic terms) families. The two expressions are explained below.

Examples of a font family (often known simply as “font”) are “Arial”, “Times New Roman” or “Tahoma”.

Generic families can probably be described best as a group of font families with a similar appearance. For example, “sans-serif” which includes fonts that do not have “feet”.

If the character set on your website list in general, one begins with the preferred character set and then adds a few alternatives. We recommend that you list with a generic family. This ensures that at least one character set of the same family is available.

An example for such a prioritization list of fonts could be as follows:

h1 (
font-family: arial, verdana, sans-serif;
)
h2 (
font-family: “Times New Roman”, serif;
)

Headings, which were marked with

, are displayed with the font “Arial”. If this font is not on the user’s computer “Verdana” is used instead. If both scripts are not available, is a font from the sans-serif family for the headings used.

Please note that font names that contain spaces in quotation marks must be written. See “Times New Roman” in the above example.

Background image fix: the property ‘background-attachment’

The background-attachment property specifies whether a background image can scrolled or not. A fixed background image is for a reader who does not neet to scroll the text, while a not-fixed allows you to slide the contents of the page.

background-attachment: scroll the image scrolls with the page
background-attachment: fixed image display

The following code defines the fixed background image.

body (
background-color: # FFCC66;
background-image: url ( “butterfly.gif”);
background-repeat: no-repeat;
background-attachment: fixed;
)

h1 (
color: # 990000;
background-color: # FC9804;
)

Positioning the background image: the property ‘background-position’

By default, the background image is set in the upper left corner of the screen. The background-position property lets you change this and the picture according to your wishes.

There are several ways in which the background-position can be assigned values. They all have in common that use as a pair of coordinates. For example the value ‘100px 200px’ positions the background image in the browser window 100 pixels from the left side and 200 pixels from the top. These coordinates can be used as a percentage of screen width, fixed size (pixels, centimeters, etc.) or with the words top (top), bottom (bottom), center (centered), left (left) and right (right).