ui.html

CSS lets learn this step by step...

write the following:

<PRE>
P { color: WindowText; background-color: Window }
</PRE>
</div>

<H2>18.3 <a name="system-fonts">User preferences for fonts</a></H2>

<P>As for colors, authors may specify fonts in a way that makes use of
a user's system resources. Please consult the <a href="fonts.html#propdef-font" class="noxref"><span
class="propinst-font">'font'</span></a> property for details.

<h2>18.4 <a name="dynamic-outlines">Dynamic outlines:</a> the <a name="x1"><span
class="index-def" title="outline">'outline'</span></a> property</h2>

<P>At times, style sheet authors may want to create outlines around
visual objects such as buttons, active form fields, image maps, etc.,
to make them stand out. CSS2 outlines differ from <a
href="box.html#border-properties">borders</a> in the following
ways:</p>

<ol>
<li>Outlines do not take up space. 
<li>Outlines may be non-rectangular. 
</ol>

<P>The outline properties control the style of these dynamic outlines.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'outline'"><a name="propdef-outline" class="propdef-title"><strong>'outline'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[ <a href="ui.html#propdef-outline-color" class="noxref"><span class="propinst-outline-color">&lt;'outline-color'&gt;</span></a> || <a href="ui.html#propdef-outline-style" class="noxref"><span class="propinst-outline-style">&lt;'outline-style'&gt;</span></a> ||
<a href="ui.html#propdef-outline-width" class="noxref"><span class="propinst-outline-width">&lt;'outline-width'&gt;</span></a> ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>see individual properties
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>, <a href="media.html#interactive-media-group" class="noxref">interactive</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'outline-width'"><a name="propdef-outline-width" class="propdef-title"><strong>'outline-width'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-width" class="noxref"><span class="value-inst-border-width">&lt;border-width&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>medium
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>, <a href="media.html#interactive-media-group" class="noxref">interactive</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'outline-style'"><a name="propdef-outline-style" class="propdef-title"><strong>'outline-style'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-style" class="noxref"><span class="value-inst-border-style">&lt;border-style&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>none
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>, <a href="media.html#interactive-media-group" class="noxref">interactive</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'outline-color'"><a name="propdef-outline-color" class="propdef-title"><strong>'outline-color'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a> | invert | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>invert
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>, <a href="media.html#interactive-media-group" class="noxref">interactive</a>
</table>
</dl>
</div>


<p>The outline created with the outline properties is drawn "over" a
box, i.e., the outline is always on top, and doesn't influence the
position or size of the box, or of any other boxes. Therefore,
displaying or suppressing outlines does not cause reflow.

<p>The outline is drawn starting just outside the <a
href="box.html#border-edge">border edge</a>.

<p>Outlines may be non-rectangular. For example, if the element is
broken across several lines, the outline is the minimum outline that
encloses all the element's boxes. In contrast to <a
href="box.html#border-properties">borders</a>, the outline is not
open at the line box's end or start, but is always fully connected.

<p>The <a href="ui.html#propdef-outline-width" class="noxref"><span class="propinst-outline-width">'outline-width'</span></a>
property accepts the same values as <a href="box.html#propdef-border-width" class="noxref"><span
class="propinst-border-width">'border-width'</span></a>.  

<P>The <a href="ui.html#propdef-outline-style" class="noxref"><span class="propinst-outline-style">'outline-style'</span></a>
property accepts the same values as <a href="box.html#propdef-border-style" class="noxref"><span
class="propinst-border-style">'border-style'</span></a>,
except that 'hidden' is not a legal outline style.

<p>The <a href="ui.html#propdef-outline-color" class="noxref"><span class="propinst-outline-color">'outline-color'</span></a>
accepts all colors, as well as the keyword <span class="index-def"
title="invert"><a class="value-def"
name="value-def-invert">'invert'</a></span>. 'Invert' is expected to
perform a color inversion on the pixels on the screen. This is a
common trick to ensure the focus border is visible, regardless of
color background.

<p>The <a href="ui.html#propdef-outline" class="noxref"><span class="propinst-outline">'outline'</span></a> property is a
shorthand property, and sets all three of <a href="ui.html#propdef-outline-style" class="noxref"><span
class="propinst-outline-style">'outline-style'</span></a>, <a href="ui.html#propdef-outline-width" class="noxref"><span
class="propinst-outline-width">'outline-width'</span></a>, and <a href="ui.html#propdef-outline-color" class="noxref"><span
class="propinst-outline-color">'outline-color'</span></a>.

<p class="note">Note that the outline is the same on all sides. In
contrast to borders, there is no 'outline-top' or 'outline-left'
property.

<p>This specification does not define how multiple overlapping
outlines are drawn, or how outlines are drawn for boxes that are
partially obscured behind other elements.

<div class="note"><P>
<em><strong>Note.</strong>
Since the focus outline does not affect formatting (i.e., no
space is left for it in the box model), it may well overlap
other elements on the page.
</em>
</div>

<div class="example"><P style="display:none">Example(s):</P><P>
Here's an example of drawing a
thick outline around a BUTTON element:

<PRE>
BUTTON { outline-width : thick }
</PRE>

<P>Scripts may be used to dynamically change the width
of the outline, without provoking reflow.
</div>

<H3><a name="q5">18.4.1 Outlines and the focus</a></h3>

<P>Graphical user interfaces may use outlines around elements to tell
the user which element on the page has the <a name="x7"><span class="index-def"
title="focus"><dfn>focus</dfn></span></a>. These outlines are in addition
to any borders, and switching outlines on and off should not cause
the document to reflow. The focus is the subject of user interaction
in a document (e.g., for entering text, selecting a button,
etc.). User agents supporting the <a
href="media.html#interactive-media-group">interactive media group</a>
must keep track of where the focus lies and must also represent the
focus. This may be done by using dynamic outlines in conjunction with
the :focus pseudo-class.

<div class="example"><P style="display:none">Example(s):</P>
<p>For example, to draw a thick black line around an element when it
has the focus, and a thick red line when it is active, the following
rules can be used:

<pre>
:focus  { outline: thick solid black }
:active { outline: thick solid red }
</pre>
</div>

<H2><a name="q6">18.5 Magnification</a></H2> 

<P>The CSS working group considers that the magnification of a
document or portions of a document should not be specified through
style sheets. User agents may support such magnification in different ways
(e.g., larger images, louder sounds, etc.)


<P>When magnifying a page, UAs should preserve the relationships
between positioned elements. For example, a comic strip may be
composed of images with overlaid text elements. When magnifying this
page, a user agent should keep the text within the comic strip balloon.
<hr class="navbar">

<div class="navbar" align="center">
<p><a href="tables.html">previous</a> &nbsp;
<a href="aural.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</html>