CSS Properties

FONT PROPERTIES


4P:problems, 4M:Mac only, 4W:Windows only

ASSIGNING ALL FONT ATTRIBUTES AT ONCE

An example of a typical font definition would be:



But since all font attributes can actually be expressed with the font property we could actually write it this way:



The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for headers and content areas etc.



TEXT PROPERTIES

Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.


4P:problems, 4M:Mac only, 4W:Windows only





The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but these aren't supported by today's browsers.




COLORS

As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.

The color is not part of the font collection in CSS - rather it has its own definition.

If you want to add a color to the text in the above example you'd do it this way:



CSS has several options for defining colors of both text and background areas on your pages.

These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML.

For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With CSS, you can define an area to have a specific color without that area being part of a table.

Or even more useful, in plain HTML when working with tables, you had to specify font attributes and colors etc. for each and every table cell. With CSS you can simply refer to a certain class in your tags.




COLOR PROPERTIES


4P:problems, 4M:Mac only, 4W:Windows only



Setting colors

Basically you have three color options with CSS:

1: Setting the foreground color for contents
2: Setting the background color for an area
3: Setting a background image to fill out an area

In the next section we will list the different properties that let you
do that.

In plain HTML, colors can either be entered by name (red, blue etc.) or by a hexadecimal color code (for example: #FF9900).

With CSS you have these options:





Setting background colors

Background colors are defined similar to the colors mentioned above. For example you can set the background color of the entire page using the BODY selector:



Setting a background image
CSS lets you set a background image for both the page and single elements on the page.

In addition, CSS offers several positioning methods for background images.

You can define the background image for the page like this:



You can control the repetition of the image with the background-repeat property.





Positioning a background
Background positioning is done by entering a value for the left position and top position separated by a space.

In this example the image is positioned 75 pixels from the upper left corner of the page:



Note: Background positioning is not supported by Netscape 4 browsers.



Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling occurs.


Note: Background fixation is not supported by Netscape 4 browsers.


Setting multiple background values
Rather than defining each background property with its own property you can assign them all with the use of the background property.

Look at this example:




The CSS font properties allow you to change the font family, boldness, size, and the style of a text.
Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
Property
Description
Values
IE
F
N
W3C
font
A shorthand property for setting all of the properties for a font in one declaration
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4
1
4
1
font-family
A prioritized list of font family names and/or generic family names for an element
family-name
generic-family
3
1
4
1
font-size
Sets the size of a font
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3
1
4
1
font-size-adjust
Specifies an aspect value for an element that will preserve the x-height of the first-choice font
none
number
-
-
-
2
font-stretch
Condenses or expands the current font-family
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
-
-
-
2
font-style
Sets the style of the font
normal
italic
oblique
4
1
4
1
font-variant
Displays text in a small-caps font or a normal font
normal
small-caps
4
1
6
1
font-weight
Sets the weight of a font
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4
1
4
1