[Top]
More advice for the full screen mode.
   
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
To the normal page

6. How to set CSS for texts and different media types

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.

The element FONT or CSS?

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 ([M][S][Pw] - 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: ([M][S][Pw]):

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 */

Browser-specific notes:

  1. Don't define font-size with HTML 3.2 style like this:

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

    MS IE bypass the font-size attribute if other value is given with CSS, but in Opera 3.x and Mozilla Gecko don't. Because the bypassing doesn't work in all CSS-capable browsers, it would be better to avoid it. If you want to exchange afterward the size of the font, enclose the element with the element BIG (you can define also BIG with CSS) according to the following example ([M][S][Pw] - here is a link to a model of the previous and next examples):

    <BIG><FONT class="font-style1" face="Arial" color="#3f3f3f"></FONT></BIG>
  2. Attribute selectors work with the FONT element properly only in Mozilla Gecko and Opera 7.x+ browsers. It is not possible to change the value of the color attribute with this method in Opera 5.x-6.x browsers even if they overall support attribute selectors.

The basic problem of HTML 3.2 way encoding is the fact that the presentation is in all situations the same. The presentation can't be focused. The element FONT (if it has not redefined with CSS) is excluding the size the same in all circumstances. One of the basic ideas of CSS2 is to focus CSS according to the modes of uses and destinations.

Especially this concerns the how documents look out on screen and printing. But more and more also in different kinds of special devices and tailored CSS for them. Also the language and affections of the user can be taken account.

The size and selected font type should be optimized according to the destinations. If that could be done, I handle first text-related properties and the ways to focus CSS for different users.

[Top]

Basic definitions for texts

To the element BODY is reasonable give basic font-size and font-family properties([M][S][Pw]):

body
{font-family: Algerian, "Times New Roman",serif;
/* note quotes if the name of font have spaces - without quotes the browser doesn't necessary find the right font-face */
font-size:small;}
/* it is recommended to use in the base font size relative units */

The browser goes font-families in order. First two are installed font-faces. The third (serif) is so called as a generic font family, which are serif, sans-serif, cursive, fantasy and monospace. Browsers can decide with certain criterion, which font they use and they can offer different font faces.

W3C: CSS2: 15 Fonts, 15.2.6 Generic font families[Pw].

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 ([M][S][Pw]):

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) */ }

Browser-specific notes:

  1. font-variant:small-caps works properly in MS IE for Windows browsers starting from the version 6.0.

  2. text-decoration: blink works only in Netscape, Mozilla Gecko and Opera 5.x+ browsers.

  3. font-stretch and text-shadow properties don't work in any tested browsers.

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 ([M][S][Pw]):

... {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 */
 

Browser-specific notes:

  1. Propertiesline-height:1.2em and line-height:120% are different in new Netscape/ Mozilla browsers in situation, when the user of the browser scales fonts. The percentage value is scalable but em-value doesn't.

  2. Some properties, which are used with text don't work just any browser. In my mind it is not sensible to use these even if in future Netscape 6.0 understand them: word-spacing, letter-spacing, white-space, word-wrap. Letter-spacing is most useful of them, because many browsers support it ([M][S][Pw]).

[Top]

Media types and groups

Topics

The media rule and media types

CSS2 gives much possibility to tailor web sites for different representation devices. Most supported are normal screen presentation and printing. It is possible to give them own CSS by using the @media at-rule.

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[Pw].

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):

media rule block
rule
declaration-block
declaration
selector property value
@media print { body { font-family : Verdana, Arial, sans-serif; } }

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).

Browser-specific notes:

  1. The most common supported value is screen, which works at least in some versions of MS IE 4.x, Netscape 4.x and Opera 3.51+. Opera 3.51-3.6x supports also all and Opera 4.x+ in addition projection. MS IE 4.x+ supports also all and print. The latter works also in Netscape 4.x browsers. Corresponding values work also in many browsers with the @media at-rule. Media types have however following problems:

  2. The attribute media works correctly with the STYLE element among those browsers, which I have tested only in Mozilla 0.7+. Most other browsers read to the normal screen presentation part of the following CSS even if they should not to do so:

    <style type="text/css" media="projection">
    <!--
    @import url(../Css/CssSiteProjection.css); /* this should not be read */
    body.CssSite div.docSlide p {color:red !important} /* Opera 5.x and MS IE can ignore this, which means that the attribute media works partially */
    -->

    </style>
  3. Opera has the corresponding problem also with the LINK element, if the at-rule is not specified (for example @import url(...) screen;) or used media blocks in the imported style sheets.

  1. @import url(...) screen; etc. works among those browsers, which I have tested only in Mozilla 0.7+ and Opera 5.1x+.

  2. MS IE 4.0 for Windows and Opera 3.x read properties inside @media print {...} also to the screen version (indeed MS IE skips the first rule). @media screen {...} must write last and the author must be careful and define all necessary CSS another time. The same problem might be also with media attributes.

  3. Netscape 4.x doesn't read LINK and STYLE elements, if the attribute media has several values, for example media="screen,print". Netscape has also another issue, which I refer later in this page.

  4. Mac MS IE 5.0 for Mac and Netscape 4.x don't read rules, which are inside media blocks. Because Opera have difficulties with the import rules, @media and @import at-rules should not normally be used, if the purpose is to use media types so, that they work as many browsers as possible (they allow however skipping[S] some browsers).

  1. The full screen mode is in Opera 4.x+ so-called presentation mode, where the @media screen (concerns also the @media print) or corresponding media attributes don't work, but it is possible to use @media projection for it. I have noticed also this media type in this page (I have optimized it for 800x600 screen display - some hints[S]). Test, I you have quite new Opera - press the F11 button on the keyboard!

    Opera Software: XML in Opera.
  2. Opera has problems with defining CSS for several media types (I handle them closer in an extra page[S]).

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):

Media Types Media Groups
continuous/ paged visual/aural/ tactile grid/bitmap interactive/ static
aural continuous aural N/A both
braille continuous tactile grid both
emboss paged tactile grid both
handheld both visual both both
print paged visual bitmap static
projection paged visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both

Media types

Generic notes:

  1. Some groupings are rather recommendations. The media type projection can be also interactive. By adding pause properties to the media type aural it can be create one kind of paged media.

  2. The problem of this table is in the media type handheld. New WAP mobile phones can handle quite limited way graphics. So-called palm pilot and Windows CE using devices have more capabilities. Which should be the dominant device? How the WAP severs should handle information to different handheld devices? The media type tty is text-only devices and it can't be used to them. Should there be a special group mobile_phones? (Look at also an extra page about this matter[S][Pw]).

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[Pw].

Because fonts, which have the same point or pixel size might look as they have different size, CSS2 has been brought font matching algorithms, which gave better result using alternative fonts (font-size-adjust).

Browser-specific notes:

  1. font-size-adjust and other special font-related features don't work in those browsers, which I have tested.

  2. According to the information Mircosoft the @font-face at rule works in MS IE browsers starting from MS IE 4.0 for Windows (I have verified this matter with the version 6.0), but the font file format must be either .eot or .ote, not an ordinary font file (for example TT028M_.TTF). Because @font-face works in MS IE browsers only with some special font file format, the implementation is a little bit proprietary.

  3. Netscape 4.x support the proprietary @fontdef at-rule, which supports .pfr-files at (for example @fontdef url("http://www.example.com/sample.pfr");). Downloadable fonts works also by using a proprietary linking relation (>LINK rel="fontdef"...). According to a very reliable e-mail (21.07.2002) from Mozilla org @font-face is not yet supported.


W3C: CSS2: 15 Fonts[Pw], 15.2.4 Font size[Pw], 15.5 Font matching algorithm[Pw].
Other sites: Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.

[Top]

Special at-rule for printing and printing-specific features

In addition at least for the printed paged media is possible to define the page size and orientation by using the @page at-rule. Below is some examples of using them:

@page {size: 210mm 297mm}

@page :first {size: 210mm 210mm; margin-left: 4cm; margin-right: 4cm;}

@page :right {margin-left: 3cm; margin-right: 4cm;}/* margin properties to the BODY or the root elements are added to the page margins. In addition the printer leaves some empty space, where it doesn't allow to print. Page margins start after that value. */

@page :left {margin-left: 4cm; margin-right: 3cm;}

@media print {
blockquote, table {page-break-inside:avoid} /* avoid dividing block quote elements into two pages; It is also possible to prevent small tables to be broken into two pages by using this property */
...
}

Below is a table, which describes in my mind most essential printing-related features of browsers (I handle the property content in the page Lists[S]):

All platf./ Windows (MS IE): media="print" @media print @import url() print; @page page-break-after/before page-break-inside content
Opera 5.1x+ [OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!]
Opera 4.x-5.0x [OK!] [OK!]   [OK!] [OK!] [OK!] [OK!]
Mozilla 1.0+, Netscape 7.x [OK!] [OK!] [OK!]   [OK!]   [OK!]
MS IE 5.5+ [OK!] [OK!]     [OK!]    
Mozilla 0.7-0.9x, Netscape 6.1-6.2x [OK!] [OK!] [OK!]       [OK!]
Mozilla 0.6, Netscape 6.0x [OK!] [OK!]         [OK!]
MS IE 5.0 [OK!] [OK!]          
Netscape 4.x, MS IE 4.0 [OK!]            
Mac:
MS IE 5.0 [OK!]            

Browser-specific notes:

  1. Printing-related features work best in Opera 6.x series browsers. Opera 7.0x series browsers might print serious way incorrectly (7.10 not so bad but not as good as 6.x series browsers).

  2. Even if @page if not actual supported in MS IE, Microsoft informs that this at-rule can be used by print templates developed for applications that host MSHTML in MS IE 5.5+ for Windows browsers (MS Office 2000+ understands MSHTML[S]; it has also some What kind of non-standard (proprietary) CSS browsers support for printing). I don't count this as a real implementation, because the browser itself doesn't support the at-rule.


W3C: CSS2: 13 Paged media[Pw].
Microsoft: @page Rule.

[Top]

List of at-rules

In general speaking at-rules are such processing instructions, which are more generic than ordinary rules. That's why certain matters can't be expressed with ordinary rules. Most at-rules are related with focusing CSS for special situations. One at-rule, which I have not yet mentioned is the @charset at-rule. This exchange the used character set. The rule can be used only in external style sheets and it might look like this:

@charset "ISO-8859-1";

Browser-specific notes:

  1. According to DevGuru CSS2 this at-rule is supported in Mozilla Gecko and MS IE 5.x+ browsers. According to a very reliable e-mail from Mozilla org. it's been supported since April 2000. Because I don't know how to test it I can't verify it concerning MS IE.

    DevGuru CSS2: @rules: charset; Microsoft @charset Rule.
  2. Opera Software doesn't inform @charset not to be supported in Opera 7.x, when Opera might support it.

Into CSS3 has been proposed new at-rules, like @namespace. I explain in the pages CSS notes 1[S] and What are selectors, classes and id-attributes[S]. It should be at the beginning of the style sheet like the @charset at-rule.

W3C: CSS2-CSS3: 4 CSS2 syntax and basic data types, 4.4 CSS document representation[Pw], CSS Namespace Enhancements (a proposal for CSS3).
Other sites: John Allsop: Basic concepts.

There are two kinds of at-rules. First simple line statements, which end to the mark ;. Second there are statement-blocks (or in other words block statements), which use curly brackets ({}) as their delimiters. In this page handled at-rules are following:

  • Simple line statements (they must set into the beginning of style sheets):
    • @charset (CSS2)
    • @namespace (CSS3)
    • @import (CSS1)
    • @import () [theNameOfTheMediaType]; (CSS2) (media-type focused CSS)
    • @fontdef (non-standard)
  • Statement-blocks:
    • @page (CSS2)
    • @font-face (CSS2)
    • @media (CSS2)

Below is a table of supporting of those at-rules, which I have mentioned in this page:

All platf./ Windows (MS IE): @import @import url() ...; @media @page @charset @namespace @font-face @fontdef
Opera 7.x+ [OK!] [OK!] [OK!] [OK!] [OK!] (?) [OK!]    
Opera 5.1x-6.x [OK!] [OK!] [OK!] [OK!]        
Opera 4.x-5.0x [OK!]   [OK!] [OK!]        
Mozilla 0.7+, Netscape 6.1+ [OK!] [OK!] [OK!]   [OK!] [OK!]    
Mozilla 0.6, Netscape 6.0x [OK!]   [OK!]   [OK!] [OK!]    
MS IE 5.5+ [OK!]   [OK!]   [OK!](?)   [OK!]  
MS IE 5.0 [OK!]   [OK!]   [OK!](?)   [OK!]  
MS IE 4.0 [OK!]           [OK!]  
Opera 3.51-3.6x [OK!]              
Netscape 4.x               [OK!]
Mac:
MS IE 5.0 [OK!]       ?   [OK!]  

[Top]

Special focusing features

Topics

User interface

At the same main principle it is possible to take account user settings in font and background properties. This paragraph should be rendered with the foreground and background colors of the desktop. In this connection in the CSS2 specification (not in CSS1) is also mentioned the possibility to use system fonts (caption, icon, menu, message-box, small-caption, status-bar) as a part of shorthand definitions like p {font: status-bar ...}. I don't recommend to use but in exceptional case like making in future pages for handheld devices. As a model, this sentence use system fonts.

User interface properties are also outline and cursor (I have defined for this paragraph cursor:wait).

Browser-specific notes:

  1. System colors work at least in Mozilla Gecko, MS IE 4.x+ and Opera 5.1x+ browsers.

  2. I have tested a property (outline), which has worked in some preview-versions of Netscape 6.0 (in the last tested Mozilla Gecko browsers has a proprietary variation -moz-outline in the style sheets of the user agent[S], which I handle in my CSS-notes[S]) and it works in modern browsers only in Opera 7.x+ indeed at least in Beta1 a little bit buggy.

  3. In Mozilla Gecko, MS IE and Opera 7.x+ work also partially the cursor property (all values don't work except in Opera 7.x).

  4. New Netscape/ Mozilla browsers support also proprietary system fonts and colors.


W3C: CSS2: 18 User interface[Pw].
Other sites: Opera Software: What's new in Opera 5.10.

[Top]

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[S][Pw]). It is also possible to use special list styles types (I handle lists in an own page[S]).

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

[Top]

CSS3

CSS3 goes further concerning the internationalization. It will have for example the layout-grid property.

I referred to a new at-rule. CSS3 adds also some new user interface properties. Especially paged media is developed further. The multi-column layout proposal of Håkon Wium Lie could be quite useful. I handle some CSS3 matters in the last page[S]. Next however something about anchors and links.

Browser-specific notes:

  1. Special quotations work in Mozilla Gecko and Opera 4.x+ browsers - look at a model[S][Pw]).

  2. Into CSS3 added new list style types work in Mozilla Gecko browsers.

  3. MS IE 5.5+ for Windows supports some into CSS3 proposed i18n features, which I handle in the CSS Notes 2[S].


W3C: Working drafts of CSS3: CSS Namespace Enhancements (W3C Working Draft 25 June 1999), International Layout (W3C Working Draft 10-September-1999), Multi-column layout in CSS (W3C Working Draft 22 June 1999), Paged Media Properties for CSS3 (W3C Working Draft 28 September 1999), User Interface for CSS3 (W3C Working Draft 16 Feb 2000).

[Top]