[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

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]
Table of topic groupsFront page of CSS-guideGuide pages > 3. nbsp;What are color, units and keywords in CSS

3. What are color, units and keywords in CSS

Topics

Units and keywords

In the size definitions of CSS-properties use either numeric units or certain keywords, which replace numeric units. Keywords are different to various properties and I handle in this page only common units and and keywords to font definitions.

Measurers

In HTML 3.2 documents is only one exact unit and that is pixel on the screen like width="300" - the unit is not mentioned because it is always the same. Texts have relative units, because it must be scalable. Following keywords xx-small, x-small, small, medium, large, x-large, xx-large (for example small {font-size:x-small;}) have the same task as HTML 3.2 level size values (for example <FONT size="3">) and they can be used only to font sizes.

Font-related elements like other elements can use numerical units. As the possible decimal delimiter in numerical values is used dot. Numerical values need almost always the unit (otherwise as HTML 3.2 attributes) if values are somehow related with width and height values (the numerical value can express also some other matters, when they don't have units). The only exceptions are the line-height property (it is enough to put for example line-height:1.2) and the value 0.

Some properties can get a web address as their values. Values can be inside quotation marks, but it is not necessary (url("gif.gif") or url(gif.gif)). Quotation marks (' or ") are necessary, if names have spaces (for example font-family: "Times New Roman") and properties, which can have strings as their values (content: "this is a string";).

Concerning numerical units, some of them are relative and some absolute. The unit em is relative to the default font size of the surrounding element (it is so-called parent element; I handle this matter in other connection, but also this matter base on the position of the element in the document tree[S][Pw]).

The same kind of unit is ex, which the specification says:

ex: the 'x-height' of the relevant font.

It is also possible to use percentage values like big {font-size:120%} to almost any element.

The problem of relative values is, that they are an-exact. The advance of relative units is that the user can increase or decrease the font size. That's why it is recommend to use relative units in basic font definitions. Look at a model[S][Pw], where I have used several relative units).

It is possible to get better control by using absolute units. Following units are according to the CSS2 specification absolute (possible decimals are separated with a dot):

  • in = inches
  • cm = centimeters
  • mm = millimeters
  • pt = points - 1 point = 1/72 inch = 0,353 mm (printed, but not necessary on the screen, where it might be for example 1/96 depending the platform and screen resolution).
  • pc = pica - 1 pica = 12 points = 4,24mm

The specification tells, that px (= pixel) is relative to the viewing device (in the previous model was one paragraph, which use this unit). It is in principle relative unit concerning printing but absolute unit on the screen. The CSS2 specification recommends that browsers would count pixels also in printing as absolute values and browsers do so.

Pixels are reasonable in certain situations, when the font size must be fixed. For example link lists, which are made in table cells or narrow frames need absolute font sizes.

Absolute units are best in pages, which have special style sheets for printing (needs supporting of the media rule[S]). The printed version can be drastically different as the screen version. The unit pt is intended just for printing. The equal rendering can be guaranteed by using in, cm an mm values to all browsers, which support printed media.

Browser-specific notes:

  1. All browsers don't require units for height or width properties. In some browsers this matter is DTD-dependent[S].

  2. The default font size might be different in browsers, which might cause different result rendering relative font sizes.

  3. Keywords xx-small-xx-large don't exactly correspond with the attribute size and the interpretation of browsers vary very much. Small is the smallest recommended usable font size. With new Netscape/ Mozilla and with certain document types also the behavior of MS IE 6.0 for Windows for previous mentioned font sizes is DTD-dependent[S]. I have made a comparison page[S][Pw], which show differences between browsers.

  4. Some browsers can scale absolute font sizes, but most browsers can't scale them (Opera can scale everything).

  5. Browsers round percentage values a little bit different ways and relative size differences might vary.

  6. From font size definitions should newer forget the unit, because in addition that Netscape 4.x ignores the invalid value it ignores also all properties, which are defined after the invalid font size! I put to the bottom of the Model page an invalid definition ([M][S][Pw]).


Zeffrey Zeldman and Brian Platz: A List Apart.

[Top]

Colors

It is possible to give colors with many ways. I recommend to use those two methods, which are also used in HTML-attributes (for example <BODY bgcolor="white" text="#3f3f3f" link="#3f3f3f"> - CSS supporting browsers use them if corresponding CSS-properties are not defined):

  1. Named colors as keywords (for example strong {color:red;}). Remember however that even common used 16 color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow) are platform dependent.
  2. So-called hexadecimal values (= numbers 0-9 + characters a-f), which have in front of the definition sign # like p.special {color:#070e0e;} ([M][S][Pw]). Six digits' hexadecimal values correspond 24 bits (about 16,7 million colors) RGB-values (red-green-blue). Hexadecimal values can be expressed also shorter with three digits like {color:#00e;} (same as {color:#0000ee;}) , but then it is possible to use less colors.

Some people would however like to use RGB-values. In the following example all declarations mean the same color ([M][S][Pw]):

em {color: rgb(255,0,0) } /* RGB colors 0-255, it is possible to use always three digits, in this case 255,000,000 */
em {color: rgb(100%,0%,0%) } /* RGB colors 0-255 with nearest percentage values - note, that this system is not as exact as previous method */
em { color: red; } /* corresponding keyword */
W3C: CSS2: 4 CSS2 Syntax and basic data types, 4.3.6 Colors[Pw].

Browser-specific notes:.

  1. The CSS2 specification allows to use proprietary keyword color values. Opera 5.x series supports the 140 Netscape named colors palette, but many Opera browsers don't. I have listed color keywords[S] with corresponding hexadecimal and RGB-value in a separate page. In order to avoid incompatibilities use hexadecimal or RGB-values so, that main color values belongs to the web safe colors palette.

  2. New Netscape/ Mozilla use in the UA CSS[S] files some special color values (for example invert), which are intended as the internal usage of the browser. They could be however used generally in intranet solutions, which use Netscape/ Mozilla browsers. I refer to them in the CSS Notes 2[S].

  3. Some browsers accept incorrectly hexadecimal color values without the # sign (for example color:334455). In MS IE 6.0 for Windows and new Netcape/ Mozilla browsers this matter is DTD-dependent[S].

[Top]

Special units

CSS specification has brought to the use of hearing defected people so-called aural style sheets and special units for aural devices (angles, times & frequencies). I'm not familiar with them, because in my mind they are today as future visions. They might be used with ordinary style sheets, when it is possible to exploit sound cards.

W3C: CSS2: 4 CSS2 syntax and basic data types, 4.3 Values[Pw], 17 Tables, 7.7 Audio rendering of How to set CSS for table elements[Pw], 19 Aural style sheets[Pw].

[Top]

Error handling

In some cases browsers or other applications, which handle style sheets meets errors or unknown CSS. For example give property values can be invalid. User agents (UA) should follow certain rules to pass errors. Browsers should be able to skip properties, which are against the CSS1 and CSS2 specifications.

W3C: CSS2: 4.2 Rules for handling parsing errors[Pw].

Browser-specific notes.

  1. Especially MS IE 4.01-5.5 for Windows browsers tolerate much errors, which browsers should ignore. When MS IE 6.0 for Windows works in the so-called standard-compliant mode[S] it doesn't tolerate them much.

  2. Errors concern for example in units and keywords, which I handle in the next.

The next page handles selectors.

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004