Common

As I have explained in the page What are basic structures of HTML and XML documents, defining font with CSS-properties are problematic concerning compatibility. The basis view is, that how more documents have easily and flexible exchangeable CSS-properties, the lesser documents are compatible towards HTML 3.2 concerning the presentation.

In order to get maximum compatibility, it is necessary to use the element FONT even if CSS-specification mention it in passing.If you define the class font-style1, you can afterward define properties to the element using CSS. Older browsers use instead alternative HTML 3.2 level attributes. Make following codes to the body part of the document ( - the model page includes all examples of this section):

<FONT class="font-style1" face="Arial" color="#3f3f3f">

This kind of method is however toil and HTML 3.2 level attributes are quite modest compared to CSS-properties. You can never get very big compatibility. In a way some level compatibility fulfils the media aims of CSS to offer different presentation to different devices.

Indeed by using attribute selectors existing HTML 3.2 level attributes could be used in CSS-rules. There would be not needed to use special CSS class or id selectors at all. Below is two examples of changing the color of the FONT element by using attribute selectors: ():

font[color="#660033"]{color:blue} /* element FONT, which attribute color="#660033", get the color blue - remember the space rule; If you put a space after the element type selector, the rule says: element FONT, which have a descendant element, which have attribute color="#660033" get the property color:blue */
*[color="#660033"]{color:blue} /* color-attribute can give also as universal; This rule says: any element, which have exactly the attribute color="#660033", get the color blue */

In headers is reasonable to use rich properties. I have collected to the following example a collection and I have mentioned properties, which belongs only into the CSS2 specification ():

h2
{color: #660033; /* the color of the text as keyword value */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* how thick font is used - in this case as keyword value */
font-size: 18pt; /* absolute font unit */
font-style:oblique; /* almost like italic - the computer slant the normal font (the default value is normal) */
font-variant:small-caps; /* all letters are big, but small letter are lower */
text-transform:capitalize; /* quite like the previous definition - the first letter of the word is in upper case (other values are lowercase and uppercase); Note, that lowercase cancels the previous definition! */
text-decoration: overline; /* other possible values: none, underline, line-through, blink; This value is not automatic inherited */

font-stretch:wider; /* it should make the font wider (CSS2) */
text-shadow: 5px 5px red; /* defines shadows for texts (CSS2) */ }

In the previous definitions it is remarkable font-weight value. In theory a font family can have nine font-weight values, which are marked 100-900 like font-weight:600 (I don't know any, which have so many). The value of normal is 400 and bold is 700. Browsers use certain algorithms to fill holes. In order to temporary exchange font-weight is possible to use keywords lighter and bolder, which I don't recommend as basic values.

Font properties can be defined also as shorthand properties, which includes also the line-height property ():

... {font: normal small-caps 120%/120% fantasy;} /* shorthand definition to fonts: the first %-value is for relative font-size and the latter concerns the line-height property (the value of the property can be expressed exceptionally also without the unit: 1.2 = 1.2em); In my mind it is however in this case easier to control separate properties */

In CSS2 it is possible to use @media to make different presentation to the screen and printing or into some other devices:

@media print {/* this works at least in MS IE 5.x, new Netscape/ Mozilla and Opera 4.x+ */
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {/* other possible media types: aural, braille, embossed, handheld, projection, tty, tv - note, that the device must identify itself and certain devices need special browsers and it is impossible to test these features before there are necessary browsers! */
body { line-height: 1.2 }
} /* note, that round brackets surrounds ordinary definitions */

W3C: CSS2: 7 Media types; 7.2.1 The @media rule.

If you put the media at-rule inside a single style sheet, the following conceptual scheme describes definition levels. I have used this kind of chart already, but I have added an extra level (the media rule block can have several rules like the declaration-block can have several declarations):

In the previous chart print is so-called media type. The media type information can connect also to the STYLE or LINK elements (<LINK rel="stylesheet" type="text/css" media="print">) or @import at-rule like @import url(print.css) print; (this CSS should be used only when the document is intended to print).

Media groups

The normal screen media like some other media types are continuous media. Media types print and projection are parts of paged media, which is one of the media groups of CSS2.

In paged media the purpose is to control page breaks.

Ordinary paper printing, normal screen media, projection media and some other media types are parts of the What is the visual formatting model of CSS2. CSS2 has also non-What is the visual formatting model of CSS2s and special medias for aural handicapped people. Those are aural rendering model (for speech synthesizer) and tactile media.

In addition is taken account, if the device can render graphics. Or can the user affect to the presentation of the media or not.

The following list presents CSS2 media groups, formatting models and associated media types, if some media group/formatting model has only one or two media types:

• How to put CSS into Web pages
• Aural rendering model - the media type aural
• Tactile media - media types braille and emboss
• Paged media - continuous media (this matter concerns if pages are broken using page brake rules or not)
• Interactive - static (can the user change the appearance of the page or not)
• Grid - bitmap (in the previous situation the screen use so-called fixed-pitch character grid and graphics is not supported; The latter media group can use also proportional true type fonts and render graphics)

The relationship them to media groups and illustrate this table, which I have taken from the CSS2 specification (N/A means that this possibility is not applicable in certain circumstances):

Special at-rule for font types

In order to tailor different visual medias, CSS2 gives the possibility to download fonts using @font-face rule. Below is an example from the pages of W3C:

@font-face {
src: local("Helvetica Medium"), /* the browser tries to find this font from installed fonts */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* if it can't find it, it tries to download it; If it is doesn't succeed to download it, it use alternative fonts */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face.

Internationalization

The user is also taking account by using special language dependent properties. This aim is called as internationalization (it is shortened commonly to the format i18n). It is possible to use at the same row from left and right written text (like Hebrew) by using the direction property, which is handled in the chapter 9.

Other i18n features are handled in the CSS2 specification chapter 12. It handles language depending quotations by using element Q (= quote- look at a model). It is also possible to use special list styles types (I handle lists in an own page).

W3C: CSS2: 9 How to put CSS into Web pages, 9.10 Text direction: the 'direction' and 'unicode-bidi' properties, 12 Generated content, automatic numbering, and lists.