1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang=en>
<head>
<title>CSS Units</title>
<link rev=Made href="mailto:liam@htmlhelp.com">
<link rel=Start href="index.html">
<link rel=Up href="properties.html">
<link rel=Glossary href="../../glossary/glossary.html">
<link rel=Copyright href="../../copyright.html">
<link rel=StyleSheet href="style.css" type="text/css">
<link rel=StyleSheet href="aural.css" type="text/css" media=aural>
<meta name="author" content="John Pozadzides/Liam Quinn">
<meta name="description" content="A description of the units available in Cascading Style Sheets, level 1.">
<meta name="keywords" content="html authoring, newsgroup, web design group, web page design, help, frequently asked questions, internet help, site creation, page creation, site design, page design, site layout, page layout, html, hypertext markup language, hyper text markup language, questions, graphics, validation, validators, www pages, html 3.2, wilbur, help files, tutorials, articles, reference material, guide, wdg, style, stylesheet, style sheet, css, cascading style sheets, units, color, colour, colors, colours, length, lengths, percentage, percentages, value, values, URL, uniform resource locator, rgb, answer">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">
<h2><img src="wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
<h1 align=center>CSS Units<img src="css.gif" alt="" align=right width=99 height=73 hspace=5></h1>
<hr>
<p align=center>[ <a href="#length">Length Units</a> | <a href="#percentage">Percentage Units</a> | <a href="#color">Color Units</a> | <a href="#urls">URLs</a> ]</p>
<hr width="67%" align=center>
<h2><a name="length">Length Units</a></h2>
<p>A length value is formed by an optional <strong class=css>+</strong> or <strong class=css>-</strong>, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; <i>e.g.</i>, <strong class=css>1.3 em</strong> is not a valid length value, but <strong class=css>1.3em</strong> is valid. A length of <strong class=css>0</strong> does not require the two-letter unit identifier.</p>
<p>Both <em>relative</em> and <em>absolute</em> length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:</p>
<ul>
<li><strong class=css>em</strong> (ems, the height of the element's font)</li>
<li><strong class=css>ex</strong> (x-height, the height of the letter "x")</li>
<li><strong class=css>px</strong> (pixels, relative to the canvas resolution)</li>
</ul>
<p>Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:</p>
<ul>
<li><strong class=css>in</strong> (inches; 1in=2.54cm)</li>
<li><strong class=css>cm</strong> (centimeters; 1cm=10mm)</li>
<li><strong class=css>mm</strong> (millimeters)</li>
<li><strong class=css>pt</strong> (points; 1pt=1/72in)</li>
<li><strong class=css>pc</strong> (picas; 1pc=12pt)</li>
</ul>
<hr width="67%" align=center>
<h2><a name="percentage">Percentage Units</a></h2>
<p>A percentage value is formed by an optional <strong class=css>+</strong> or <strong class=css>-</strong>, followed by a number, followed by <strong class=css>%</strong>. There are no spaces in a percentage value.</p>
<p>Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.</p>
<hr width="67%" align=center>
<h2><a name="color">Color Units</a></h2>
<p>A color value is a keyword or a numerical RGB specification.</p>
<p>The 16 keywords are taken from the Windows VGA palette: <strong class=css><span style="color: aqua; background: white none">aqua</span></strong>, <strong class=css><span style="color: black; background: white none">black</span></strong>, <strong class=css><span style="color: blue; background: white none">blue</span></strong>, <strong class=css><span style="color: fuchsia; background: white none">fuchsia</span></strong>, <strong class=css><span style="color: gray; background: white none">gray</span></strong>, <strong class=css><span style="color: green; background: white none">green</span></strong>, <strong class=css><span style="color: lime; background: white none">lime</span></strong>, <strong class=css><span style="color: maroon; background: white none">maroon</span></strong>, <strong class=css><span style="color: navy; background: white none">navy</span></strong>, <strong class=css><span style="color: olive; background: white none">olive</span></strong>, <strong class=css><span style="color: purple; background: white none">purple</span></strong>, <strong class=css><span style="color: red; background: white none">red</span></strong>, <strong class=css><span style="color: silver; background: white none">silver</span></strong>, <strong class=css><span style="color: teal; background: white none">teal</span></strong>, <strong class=css><span style="color: white; background: silver">white</span></strong>, and <strong class=css><span style="color: yellow; background: silver">yellow</span></strong>.</p>
<p>RGB colors are given in one of four ways:</p>
<ul>
<li><strong class=css>#rrggbb</strong> (<i>e.g.</i>, <strong class=css>#00cc00</strong>)</li>
<li><strong class=css>#rgb</strong> (<i>e.g.</i>, <strong class=css>#0c0</strong>)</li>
<li><strong class=css>rgb(x,x,x)</strong> where <strong class=css>x</strong> is an integer between 0 and 255 inclusive (<i>e.g.</i>, <strong class=css>rgb(0,204,0)</strong>)</li>
<li><strong class=css>rgb(y%,y%,y%)</strong> where <strong class=css>y</strong> is a number between 0.0 and 100.0 inclusive (<i>e.g.</i>, <strong class=css>rgb(0%,80%,0%)</strong>)</li>
</ul>
<p>The examples above all specify the same color.</p>
<p>Douglas R. Jacobson has also developed a handy quick reference <a href="../../icon/hexchart.gif">RGB Color Chart</a> (61 kB).</p>
<hr width="67%" align=center>
<h2><a name="urls">URLs</a></h2>
<p>A URL value is given by <strong class=css>url(foo)</strong>, where <strong class=css>foo</strong> is the URL. The URL may be optionally quoted with either single (<strong class=css>'</strong>) or double (<strong class=css>"</strong>) quotes and may contain whitespace before or after the (optionally quoted) URL.</p>
<p>Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.</p>
<p class=note>Note that <a href="http://home.netscape.com/comprod/products/communicator/navigator.html">Netscape Navigator 4.x</a> incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.</p>
<p>Examples:</p>
<pre><code class=css>BODY { background: url(stripe.gif) }
BODY { background: url(../../stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */</code></pre>
<hr width="67%" align=center>
<p align=center>[ <a href="#length">Length Units</a> | <a href="#percentage">Percentage Units</a> | <a href="#color">Color Units</a> | <a href="#urls">URLs</a> ]</p>
<hr width="60%" align=right>
<p align=right>Maintained by <a href="mailto:john@htmlhelp.com">John Pozadzides</a> and <a href="mailto:liam@htmlhelp.com">Liam Quinn</a></p>
<hr>
<p class=toolbar align=center><img src="wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~ "><a href="index.html">CSS Index</a> ~ <a href="structure.html">CSS Structure</a> ~ <a href="properties.html">CSS Properties</a></p>
<p align=center><small><a href="../../copyright.html">Copyright ©</a> 1997 John Pozadzides and Liam Quinn. All rights reserved.</small></p>
</body>
</html>
|
