Hotel Booking
Hotel Booking

Friday, September 26, 2008

Cascading Style Sheets - CSS Education ( Part-7 ) CSS final

pause-after
pause-after defines the duration of a silent pause to be inserted after the content of an element.
Values
Posted by at No comments:

Cascading Style Sheets - CSS Education ( Part-6 )

Related Properties
None.
width
width sets the width of an element’s content area.
Summary
Value Syntax
<-length-> | <-percentage-> | auto | inherit
Initial Value
auto
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements, table rows, and row groups
Media Groups
visual
Values

<-length->
Any length unit. Negative length values are not permitted for this property.
<-percentage->
The width is calculated with respect to the width of the element’s containing block, assuming that the
containing block’s width has been explicitly set. If not, then a percentage value is treated as auto.
auto
The result of this value depends on a number of factors. In the normal document flow, auto will be
treated as 100%, assuming that there are no margins, borders, or padding set on the element. For
floated elements, the value auto will tend toward a width 0. In positioned elements, it may have the
same effect, or it may be overridden due to constraints introduced using properties such as left and
right. See the section on positioning rules in Chapter 1 for more details.
Note If the width of a replaced element (e.g., an image) is set to a length unit, and no
height is set, then the image will be scaled so that its width matches the declared
value, and the height is altered by the same proportion. For example, an image
100 pixels tall and 50 pixels wide is set to width: 200px; thus its height will be
increased to 100 pixels. Setting the width of a replaced element to a percentage
will operate as described above, and make the width of the element some
Cascading Style Sheets 2.0
122
percentage of the width of its containing block. It is not possible to reduce an
element to half its intrinsic size through a percentage value, for example.
Examples
div.aside {width: 25%;}
img.photo {width: 250px;}
Related Properties
height, max-width, min-width
word-spacing
word-spacing modifies the amount of space placed between words.
Summary
Value Syntax
normal | <-length-> | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
normal
The default spacing between words is not changed. In practice, this is equivalent to setting the value to
0.
<-length->
This will add to the spacing between words—the greater the length, the more space will be seen
between words. Negative values are permitted, and will cause words to bunch together, to the point of
potentially overwriting one another or even appearing to write the words “backwards.” The length given
will modify the amount of space already between words, which means that there is usually a minimum
of a single space from which the modification occurs.
Note In fully justified text (see text-align), the space between words may be
programmatically altered in order to create the effect of full justification.
In order to preserve the relative spacing between words for descendant elements, authors are
encouraged to use em length units.
Examples
em {letter-spacing: 1px;}
h1.wider {letter-spacing: 0.5em;}
p.scrunched {letter-spacing: -0.5ex;}
table {letter-spacing: normal;}
Related Properties
letter-spacing, text-align
Cascading Style Sheets 2.0
123
z-index
z-index sets the stacking level of an element.
Summary
Value Syntax
auto | <-integer-> | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
positioned elements
Media Groups
visual
Values
auto
The stack level of the element is the same as that of its parent element. Furthermore, the element does
not generate a new stacking context.

<-integer->
The stack level of the element is set to the given value, and it establishes a new stacking context for any
descendant elements. The stack level of the element in its newly created stacking context is 0. The
higher an element’s z-index value, the "closer" it is to the reader. Negative values are permitted for
this property. In theory, any arbitrarily large number may be declared, but there may be implementationspecific
limits.
Note The stack level of an element is simply a numeric designation of its position on
the z-axis. This axis is imagined as a line extending out of the canvas as well as
behind it, although no element may ever be placed “behind” the canvas. An
element is placed on the z-axis, and also given its stack level, using the property
z-index. For example, elements A and B are given z-index values of 2 and 1044,
respectively. In any situation where A and B overlap due to their positioning, then
all of B will be visible, whereas part of A will appear to be "behind" B.
If an element generates a stacking context, then all of its descendant elements are placed on the z-axis
as a group. Thus, no matter what values are assigned to descendants of element B, they will be placed
“in front” of element A and its descendants. For those familiar with vector graphics programs such as
Adobe Illustrator, a stacking context is basically equivalent to a layer on which many shapes may be
placed. The shapes in each level will have a stacking order comparable to each other, but all of them
will be “in front” of the layer below their layer.
The usual way to envision this is to add another stacking number for each context in which an element
exists. For example, assume that element B, still with a z-index value of 1044, has a descendant
element B2 with a z-index value of –40. Element A (z-index of 2) has a descendant element A2
with a z-index of 5000. If A2 and B2 overlap, B2 will still be "in front" of A2. Their z-index values
can be thought of like this: A2, 2,5000; B2, 1044,-40. In summary, the four elements in question
would be sorted this way:
A 2
A2 2,5000
B2 1044,-40
B 1044
Note that elements with a z-index of auto are effectively assigned places along the z-axis by the user
agent, but there is no defined behavior for such a case. A user agent could decide to stack such
elements in the order they are rendered, with the earliest elements in the document being the furthest
away from the user. Of course, a user agent could do just the opposite, deciding that the last elements
Cascading Style Sheets 2.0
124
in a document will be furthest away from the user on the theory that the first elements contain the most
important information. There is no way to guarantee any particular behavior.
Examples
div.sidebar {position: fixed; height: 100%; width: 20%; left: 0;
z-index: 10;}
em#drop {position: relative; top: 14px; z-index: -66;}
Related Properties
position
Chapter 5: Paged Media Styles
Overview
One of the areas in which CSS2 improves greatly over CSS1 is in its addition of rules for handling
paged media. This is usually assumed to refer to material such as printouts of a document, but it can
also refer to specialized devices which display information a page at a time, as well as to “print
previews” on a computer screen, and more. A good example is the default display of PDF files, which
are usually presented a page at a time.
In creating a model for paged media, CSS takes the general idea of the box model and extends it to
create the page box. This is the term used to refer to the area in which content is drawn on a given
piece of the display medium (e.g., a piece of paper in a printout). The area in which a page box is drawn
is referred to as a sheet. This term is used mostly to avoid the confusion which using the term “page”
would invoke. In CSS2, all page boxes are rectangular, although they may not necessarily be the same
size as the sheets on which they are drawn.
Because the page box is drawn from the general box model in CSS2, authors are able to set margins
and dimensions for a page box, just as they would with an ordinary element box (however, padding and
borders cannot be set on page boxes in CSS2). All this is done using the @page directive, which is
explained later in the chapter.
As of CSS2, the specification does not contain properties to automatically generate running heads or
footers, place page numbers, and other advanced page-layout features. These features are expected to
appear in a future version of CSS. CSS2 does allow authors to simulate these features with the property
display (see Chapter 4), although the methods are a bit clumsy.
General Paged-Media Rules
There are some concepts which should be understood before attempting to write paged-media styles.
These include page-breaking and content-clipping rules.
Page-Breaking Rules
A good portion of the paged media rules are devoted to affecting the placement of page breaks. In order
to keep these as clear as possible, CSS defines a number of rules related to “allowed” page breaks.
This section will review these rules in order to make the properties which follow easier to understand.
In general, CSS recommends the use of some general heuristics to determine how page breaks should
be placed.
�� Break pages as few times as possible.
�� Attempt to make all page boxes appear to be about the same height.
�� Avoid page breaks inside block boxes which have borders.
�� Avoid page breaks inside tables.
�� Avoid page breaks inside floated elements.
The specification comes right out and admits that these rules may contradict each other in some
circumstances. It also avoids making them actual requirements; thus, user agents are free to place
page breaks as many or as few times as possible, and to use or ignore any or all of the preceding rules.
Cascading Style Sheets 2.0
125
However, there are some rules which user agents may not ignore. First are the two basic rules which
define where page breaks may actually occur.
�� Page breaks may occur in the vertical margins between block boxes. If a page break
occurs between two block boxes, then the adjacent margins (the bottom margin of the
preceding element and the top margin of the following elements) are set to 0.
�� Page breaks may occur between the line boxes of a block box.
There is more to the story than that, as it happens. There are five rules which govern the placement of
page breaks.
1. A page break may only be placed between block boxes if the values of page-breakafter
and page-break-before for the two affected elements will allow it. This is the
case if the value of at least one of the elements is always, left, or right; or if the values
for both elements is auto.
2. If the values of page-break-after and page-break-before for two adjacent
elements is auto, and the nearest common ancestor to the two elements has a
page-break-inside value of avoid, then do not place a page break between the
elements.
3. A page break may be placed between two line boxes in a block box only if the
number of line boxes between the line box and the start of the block box is greater
than or equal to the value of orphans for the element. Similarly, a page break may
be placed between two line boxes only if the number of line boxes between the line
box and the end of the block box is greater than or equal to the value of widows for
the element.
4. A page break may be placed between two line boxes of an element only when the
value of page-break-inside for the element is auto.
5. A page break must be placed between two block boxes if the value of page-breakbefore
(for the preceding element) or page-break-after (for the following
element) is always, left, or right.
In situations where the rules do not allow for a line break, then rules 1 and 3 are ignored in order to
allow more flexibility. If there is still no valid place for a line break to appear, then rules 2 and 4 are also
ignored. In other words, all bets are off. At this point, the user agent will likely perform some form of
straightforward clipping operation to split the page, but other behaviors may be used. Rule 5 always
takes effect, no matter the circumstance.
Now that we’ve explored the circumstances in which a page break may be placed, let’s look at the two
rules which describe when a page break must be placed.
1. A page break must be placed between two block boxes if the value of page is
different for the two blocks.
2. A page break must be placed between two block boxes if the value of page for the
last line box in the preceding element is different than the value of page for the first
line box of the following element.
Finally, page breaks cannot be placed inside absolutely positioned elements.
Content-Clipping Rules
If content somehow ends up beyond the confines of the page box—for example, if it is an especially
wide image, or an element which has been positioned too far to one side or another—then the browser
must choose some mechanism to cope with the situation. As with the basic page-breaking rules, there
are a few suggestions.
�� Content should be permitted to “bleed” beyond the edges of the page box. In other
words, user agents should render content which is outside the page box so long as
there is room to do so.
�� Although it may be necessary to generate blank pages to honor the values left and
right for the page-break rules, generation of an excessive number of empty page
boxes should be avoided.
�� If an element is positioned outside the page box to the extent that no part of it will be
rendered, then the user agent may choose its own method of handling it. It may discard
the element, for example, or place it at the end of the document.
Since none of these behaviors are requirements, authors cannot rely on any particular behavior to
happen in all user agents. For this reason, the CSS specification also recommends that authors not
create rules to place elements in odd positions simply to avoid rendering them. If an element should not
Cascading Style Sheets 2.0
126
be rendered in paged media, then it can be suppressed using display: none or made invisible with
visibility: hidden.
Reference
@page
@page is used to define the page context for a given page box.
Summary
Syntax
@page <-page- selector="">?<-page- class="">? {<-page- context="">}
Media Groups
paged
Components
<-page- selector="">
Any legal string value may be used to define the page selector. For example, a page selector meant to
describe one page of a greeting card could be called card, greeting-card, or anything else which
has meaning for the author. Similarly, a page selector for handheld devices could be palm-screen or
hand-screen. The page selector can then be utilized by way of the property page.
<-page- class="">
This can be any of the page pseudo-classes :first, :left, and :right (see the upcoming
descriptions). These pseudo-classes must follow the page selector with no intervening space.
<-page- context="">
The block of CSS rules which describe the page box.
Description
The page context is especially notable for the restrictions which are imposed upon it and the way in
which it changes the behavior of a few visual properties.
First of all, a page box cannot be given padding or borders—only margins—so these properties will
have no effect in a page context. (The CSS2 specification expressly states that this may change in the
future.) Second (and more important), a page context has no concept of fonts, which means that em and
ex units cannot be used to describe the size of a page box or its margins. All such dimensions must be
declared with an absolute-length unit such as in or cm, or the relative-size length unit px (pixels). Note,
however, that the mapping of pixels to a paged medium is not defined and cannot be guaranteed. It is
possible that a laser printer, for example, would interpret a length of 600px as 600 dots. At a resolution
of 1200 dots per inch or more, this would be a very small length. For this reason, the use of pixels in
paged media is strongly discouraged.
One property whose behavior changes in a paged-medium context is position. When an element is
set to position: fixed, it will appear in the same position on every page. This can be useful for
creating effects such as running heads and footers. If this is done, care must be taken to make sure that
the fixed-position element does not overlap other content on the page. This could be accomplished by
increasing the margins on the page box on the appropriate side.
A page context may be established for any element, including the BODY element in HTML. If an element
has a different page context from the element which precedes it, then a page break should be inserted
between them. See the section on page later in this chapter for more details.
Examples
@page sideways {size: landscape; margin: 0.75in;}
@page {size: 8.5in 11in; marks: cross; margin: 1in;}
@page legal:first {size: 8.5in 14in; margin: 0.66in; margin-top: 3in;}
Related Properties
page
Cascading Style Sheets 2.0
127
:first
The pseudo-class :first is used to style the first page of a document.
Summary
Syntax
@page <-page- selector="">?:first {<-page- context="">}
Media Groups
paged
Description
By using :first, the author can set special styles for the first page of a document which will not carry
over to other pages. This could be an increased top margin, for example, or a portrait orientation when
the rest of the document is in landscape.
Examples
@page :first {size: portrait; margin-top: 2.5in;}
@page rotate:first {size: landscape; margin-bottom: 10mm;}
:left
The pseudo-class :left is used to style the left pages of a document.
Summary
Syntax
@page <-page- selector="">?:left {<-page- context="">}
Media Groups
paged
Description
This pseudo-class allows authors to define styles for pages which are on the left in double-sided
printing. For example, in one common paged-media layout format, the right margin (which will be toward
the “inside” of a two-page layout) of left-side pages should be larger to account for binding, while the left
(or “outer”) margin should be equivalent to the top and bottom margins. This can be accomplished with
simple margin rules for all :left pages.
Examples
@page :left {margin-right: 1.25in; margin-left: 1in;
margin-top: 1in; margin-bottom: 1in;}
:right
The pseudo-class :right is used to style the right pages of a document.
Summary
Syntax
@page <-page- selector="">?:right {<-page- context="">}
Media Groups
paged
Description
This pseudo-class allows authors to define styles for pages which are on the right in double-sided
printing, such as increasing the margin width for the left (“inside”) margin to account for binding (see the
previous description of :left for details). This can be accomplished with simple margin rules for all
:right pages.
Cascading Style Sheets 2.0
128
Examples
@page :right {margin-left: 1.25in; margin-right: 1in;
margin-top: 1in; margin-bottom: 1in;}
marks
marks specifies the appearance and type of cropping marks which are placed on each page.
Summary
Value Syntax
[ crop || cross ] | none | inherit
Initial Value
none
Percentages
n/a
Inherited
n/a
Applies to
page context
Media Groups
visual, paged
Values
crop
Directs that crop marks be placed on the page. These marks are used by printers to determine where a
page should be trimmed.
cross
Causes the user agent to add cross marks to the page. These marks are used to align sheets during the
printing process.
none
No marks should be placed on the page.
Note The marks which are invoked with this property are placed just outside the page
box, the size of which is determined by the property size.
The placement, size, and appearance of the marks is entirely under the control of the user agent, and
cannot be affected through CSS.
Examples
@page proof {marks: cross crop; margin: 1.5em; size: auto;}
@page {marks: none;}
Related Properties
size
orphans
orphans sets the minimum number of lines in an element that must appear at the bottom of a page.
Summary
Value Syntax
<-integer-> | inherit
Initial Value
Cascading Style Sheets 2.0
129
2
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Values
<-integer->
The number given sets the minimum number of lines permitted at the bottom of a page. The value of
orphans can affect the page-breaking for a given page, effectively moving the "break point" up or down
depending on the circumstances. For example, assume an element which starts one line before the
bottom of the page box. If the value of orphans is 2, then the page break will be placed before the
element, and it will start on the next page. This will have the side effect of increasing the "blank space"
at the bottom of the page.
Note The value of orphans will be invoked for a given element only if that element
should have a page break within it. In other words, an element which started just
before the end of a page and which carries over to the next page will use its
orphans value. Any element which fits onto a single page in its entirety can have
a value for orphans, but will not use it.
Setting the value of orphans sufficiently high can lead to strange effects. If you set orphans to 20 for
all elements in a document, then any element which is longer than 20 lines and starts less than 20 lines
before the bottom of the page will be shifted to the next page.
Examples
p {orphans: 3;}
ol {orphans: 5;}
Related Properties
page-break-after, page-break-before, page-break-inside, widows
page
page is used to invoke a page selector which has been previously defined using @page.
Summary
Value Syntax
<-page- selector=""> | auto
Initial Value
auto
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Cascading Style Sheets 2.0
130
Values
<-page- selector="">
Any previously defined page selector. See the section on @page earlier in the chapter for more details.
auto
The user agent should format the page according to its defaults.
Note As a property, page can have no apparent effect on page layout without a
previously defined page selector to use. It is useful, however, in that a page
selector can be defined for a particular page layout, and then that layout can be
assigned to individual elements. For example, suppose that you have a type of
table which needs to be printed in landscape mode. By assigning a consistent
class to these tables (e.g., table class="chart">), you can then use page to
assign a landscape-oriented page context to these elements. Since their page
context will differ from surrounding elements, these tables will appear on their
own pages, with page breaks being inserted before and after the landscape
tables.
If you wish to apply a consistent page context to the entire document, you can create a page selector
and then select the BODY element with a page rule set to that page selector.
Examples
@page proof {marks: cross crop; margin: 1.5em; size: auto;}
body.rough-draft {page: proof;}
@page rotate {size: landscape;}
table.chart {page: rotate;}
Related Properties
@page
page-break-after
page-break-after indicates whether (and how many) page breaks should be allowed after an
element’s box.
Summary
Value Syntax
auto | always | avoid | left | right | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
block-level elements
Media Groups
visual, paged
Values
auto
Page breaks should be neither forced nor prevented after the element’s box.
always
A page break should be forced after this element’s box.
avoid
Cascading Style Sheets 2.0
131
No page break should be placed after the element’s box if at all possible. This does not guarantee the
lack of a page break after the element.
left
Force one or two page breaks after the element’s box, such that the next page on which an element is
printed will be a left-hand page.
right
Force one or two page breaks after the element’s box, such that the next page on which an element is
printed will be a right-hand page.
Note The value of this property is not the sole factor in determining whether a page
break should follow the element. This decision will also be affected by the value
of page-break-before for a following element, and the value of page-break-inside
for any ancestor elements.
Examples
h1 {page-break-after: avoid;}
div.summary {page-break-after: always;}
Related Properties
orphans, page-break-before, page-break-inside, widows
page-break-before
page-break-before indicates whether (and how many) page breaks should be allowed before an
element’s box.
Summary
Value Syntax
auto | always | avoid | left | right | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
block-level elements
Media Groups
visual, paged
Values
auto
Page breaks should be neither forced nor prevented before the element’s box.
always
A page break should be forced before the element’s box.
avoid
No page break should be placed before the element’s box, if at all possible. This does not guarantee the
lack of a page break before the element.
left
Force one or two page breaks before the element’s box, such that the page on which the element is
printed will be a left-hand page.
right
Cascading Style Sheets 2.0
132
Force one or two page breaks before the element’s box, such that the page on which the element is
printed will be a right-hand page.
Note The value of this property is not the sole factor in determining whether a page
break should follow the element. This decision will also be affected by the value
of page-break-after for a preceding element, and the value of page-break-inside
for any ancestor elements.
Examples
h1 {page-break-before: right;}
table {page-break-before: always;}
Related Properties
orphans, page-break-after, page-break-inside, widows
page-break-inside
page-break-inside indicates whether page breaks should be allowed within an element’s box.
Summary
Value Syntax
avoid | auto | inherit
Initial Value
auto
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Values
avoid
No page break should be placed inside the element’s box if at all possible. This is not a guarantee, as
the element may be too large to fit on a single page.
auto
Page breaks should be neither forced nor prevented inside the element’s box.
Note The value of this property is not the sole factor in determining whether a page
break should follow the element. This decision will also be affected by the values
of page-break-before and page-break-after for any descendant elements. For
example, if a DIV is set to page-break-inside: avoid, but one of its descendant
elements has been set to page-break-before: always, then there will be a page
break inside the DIV.
Examples
ul, ol {page-break-inside: avoid;}
table {page-break-inside: avoid;}
p {page-break-inside: auto;}
Related Properties
orphans, page-break-after, page-break-before, widows
Cascading Style Sheets 2.0
133
size
size specifies the size and orientation of a page box.
Summary
Value Syntax
<-length->{1,2} | auto | portrait | landscape | inherit
Initial Value
auto
Percentages
n/a
Inherited
n/a
Applies to
page context
Media Groups
visual, paged
Values
<-length->
Sets the physical size of the page box. If only one length value is given, it sets both the height and width
of the page box. If two length values are given, the first is the width and the second the height of the
page box.
auto
The page box is sized to fit the display medium. For example, if the print page is 8.5 inches by 11
inches, then page: auto will result in a page box of that size.
portrait
Sets the page box to the same size as the display sheet, but the longer measure is forced to be the
vertical axis. As an example, if the sheet is 5 inches tall by 10 inches wide, a setting of size:
portrait will force the user agent to make the page box 10 inches tall by 5 inches wide. On the other
hand, an 8.5 inch by 11 inch sheet will result in a page box which is 8.5 inches wide by 11 inches tall.
landscape
Sets the page box to the same size as the display sheet, but the longer measure is forced to be the
horizontal axis. As an example, if the sheet is 5 inches tall by 10 inches wide, a setting of size:
landscape will force the user agent to make the page box 5 inches tall by 10 inches wide. On the
other hand, an 8.5 inch by 11 inch sheet will result in a page box which is 11 inches wide by 8.5 inches
tall.
Note If the page box which results from the values of size will not fit on the actual
sheet, then the CSS specification offers two possible fallbacks. First is to rotate
the page box 90 degrees, assuming this will allow the page box to fit onto a
sheet. If this is not the case, then the user agent may scale the page box to fit on
the sheet.
It is also left to user agents to decide where the page box will actually be placed on the sheet, although
the CSS specification recommends that it be centered within the sheet.
Examples
@page legal {size: 8.5in 14in;}
@page {size: landscape;}
Related Properties
@page
widows
widows sets the minimum number of lines in an element that must appear at the top of a page.
Cascading Style Sheets 2.0
134
Summary
Value Syntax
<-integer-> | inherit
Initial Value
2
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual, paged
Values
<-integer->
The number given sets the minimum number of lines permitted at the top of a page. The value of
widows can affect the page-breaking for a given page, effectively moving the "break point" up or down
depending on the circumstances. For example, assume an element which should end one line after the
top of the page box. If the value of widows is 2, then the page break will be placed before the element,
and it will start on the current page. This will have the side effect of increasing the "blank space" at the
bottom of the previous page.
Note The value of widows will be invoked for a given element only if that element
should have a page break within it. In other words, an element which started just
before the end of a page and which carries over to the next page will use its
widows value. Any element which fits onto a single page in its entirety can have a
value for widows, but will not use it.
Setting the value of widows sufficiently high can lead to strange effects. If you set widows to 20 for all
elements in a document, then any element which ends less than 20 lines after the top of the page will
be shifted in its entirety onto the page, thereby removing it from the previous page.
Examples
div.aside {widows: 2;}
ul {widows: 6;}
Related Properties
orphans, page-break-after, page-break-before, page-break-inside
Chapter 6: Aural Media Styles
In addition to the visual and paged media, CSS also provides properties to support aural (audio) media.
Using these properties, it is theoretically possible to create audio styles nearly as rich as the visual
styles permitted by the rest of the specification. Besides enriching the Web for users who are blind or
otherwise visually impaired, aural styles could also be useful for automobile drivers who want to have
Web pages read to them by a dashboard browser, just to pick one example.
As of this writing, there is very little deployed support for aural styles, and what support does exist can
be found in niche products which exist to serve the visually impaired community. None of the popular
visual browsers, such as Netscape Navigator or Microsoft Internet Explorer, includes any support for
aural styles.
Cascading Style Sheets 2.0
135
Reference
azimuth
azimuth describes the position of a sound source along the horizontal axis of the listener’s
environment.
Summary
Value Syntax
<-angle-> | [[ left-side | far-left | left |
center-left | center | center-right | right | far-right | right-side ] ||
behind ] | leftwards | rightwards | inherit
Initial Value
center
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
<-angle->
Any angle value which corresponds to the range 0deg – 360deg. An angle value of 0deg corresponds
to a point directly in front of the listener, whereas 90deg corresponds to a point directly to the right,
180deg a point directly behind, and 270deg directly to the left of the listener. Negative angle values are
also permitted, so –90deg is equivalent to 270deg.
left-side
Equivalent to 270deg (-90deg). When combined with behind, the sound’s position is the same.
far-left
Equivalent to 300deg (-60deg). When combined with behind, the sound’s position is equivalent to
240deg.
left
Equivalent to 320deg (-40deg). When combined with behind, the sound’s position is equivalent to
220deg.
center-left
Equivalent to 340deg (-20deg). When combined with behind, the sound’s position is equivalent to
200deg.
center
Equivalent to 0deg. When combined with behind, the sound’s position is equivalent to 180deg.
center-right
Equivalent to 20deg. When combined with behind, the sound’s position is equivalent to 160deg.
right
Equivalent to 40deg. When combined with behind, the sound’s position is equivalent to 140deg.
far-right
Equivalent to 60deg. When combined with behind, the sound’s position is equivalent to 120deg.
right-side
Equivalent to 90deg. When combined with behind, the sound’s position is the same.
leftwards
Causes the audio source to be shifted by 20 degrees (in 360-degree space) to the left. In fact,
leftwards causes a shift in a counter-clockwise direction. Thus, if the sound source is initially at the
180deg position (directly behind the listener), then leftwards would actually cause the source to be
shifted to 160deg, or 20 degrees counterclockwise, which will sound to the listener like a rightward
movement.
Cascading Style Sheets 2.0
136
rightwards
Causes the audio source to be shifted by 20 degrees (in 360-degree space) to the right. In fact,
rightwards causes a shift in a clockwise direction. Thus, if the sound source is initially at the 180deg
position (directly behind the listener), then rightwards would actually cause the source to be shifted
to 200deg, or 20 degrees clockwise, which will sound to the listener like a leftward movement.
Note If an aural device can produce spatial audio, but cannot place sounds behind the
listener, then the device should convert the values between 90deg and 270deg
into values in the –90deg to 90deg range. The specification does not require a
particular method of accomplishing this, but suggests an algorithm equivalent to
the following:
if 90deg <> || <-cue-after-> ] | inherit
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
aural
Values
<-cue-before->
See the entry for cue-before.
<-cue-after->
See the entry for cue-after.
Note If two values are specified, the first corresponds to cue-before, and the second to
cue-after. If only one value is given, it applies to both cue-before and cue-after.
Examples
h1 {cue: url(flourish.wav);}
a:link {cue: url(open.wav) url(close.wav);}
Cascading Style Sheets 2.0
137
Related Properties
cue-before, cue-after, pause, pause-after, pause-before
cue-after
cue-after defines an auditory cue to be played immediately after the rendering of an element.
Summary
Value Syntax
<-uri-> | none | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
aural
Values
<-uri->
The user agent should use the sound resource defined by that URI as the audio cue. If the URI points to
something other than an audio file, then it is to be ignored and the user agent should act as though
cue-after had been set to none.
none
Setting cue-after to none means that no cue should be played.
Note cue-after can be used to play a "page turning" sound after each paragraph, sound
a gong to mark the end of a hyperlink, or other audible cues. Note that this cue is
rendered after any pauses declared using pause-after.
Examples
a:link {cue-after: url(close.wav);}
body {cue-after: url(the-end.wav);}
Related Properties
cue, cue-before, pause-after
cue-before
cue-before defines an auditory cue to be played immediately before the rendering of an element.
Summary
Value Syntax
<-uri-> | none | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
138
all elements
Media Groups
aural
Values
<-uri->
The user agent should use the sound resource defined by that URI as the audio cue. If the URI points to
something other than an audio file, then it is to be ignored and the user agent should act as though
cue-before had been set to none.
none
Setting cue-before to none means that no cue should be played.
Note cue-before can be used to play a "new section" sound before each heading,
produce a "mouse-click" sound to mark the beginning of a hyperlink, or other
audible cues. Note that this cue is rendered before any pauses declared using
pause-before.
Examples
a:visited {cue-before: url(drag.wav);}
h3 {cue-before: url(ding.wav);}
Related Properties
cue, cue-after, pause-before
elevation
elevation describes the position of a sound source along the vertical axis of the listener’s
environment.
Summary
Value Syntax
<-angle-> | above | level | below | higher | lower | inherit
Initial Value
level
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
<-angle->
Angle values are in the range –90deg to 90deg. An angle value of 0deg corresponds to a point which
is level with the listener, whereas 90deg corresponds to a point directly above, and –90deg directly
below.
above
Equivalent to the value 90deg.
level
Equivalent to the value 0deg.
below
Equivalent to the value -90deg.
higher
Cascading Style Sheets 2.0
139
Causes the sound source to be shifted upwards by 10deg. Values beyond the range –90deg to 90deg
are "clipped" to the edges of the range; thus, applying higher to a sound source with an elevation
of 90deg will result in the value 90deg.
lower
Causes the sound source to be shifted downwards by 10deg. Values beyond the range –90deg to
90deg are "clipped" to the edges of the range; thus, applying lower to a sound source with an
elevation of -90deg will result in the value -90deg.
Note By combining this property with azimuth, a sound’s position in the "aural sphere"
can be described.
Examples
h1 {elevation: above;}
h2 {elevation: 60deg;}
Related Properties
azimuth
pause
pause is a shorthand element for pause-before and pause-after.
Summary
Value Syntax
[ [<-time-> | <-percentage->]{1,2} ] | inherit
Initial Value
UA dependent
Percentages
see descriptions of pause-before and pause-after
Inherited
no
Applies to
all elements
Media Groups
aural
Values
<-time->
Any time value (e.g., 150ms); the pause will be the length of time specified.
<-percentage->
The length of the pause is dictated by the value of speech-rate. For a speech-rate of 60 words per
minute, which corresponds to one word per second, then a percentage is calculated with respect to one
second. For a speech-rate of 120 words per minute, which yields a time per word of 500
milliseconds, then percentage would be calculated with respect to 500 milliseconds.
Note If two values are specified, the first corresponds to pause-before, and the second
to pause-after. If only one value is given, it applies to both pause-before and
pause-after.
Examples
a:link, a:visited {pause: 25%;}
h1 {pause: 2s 250ms;}
Related Properties
cue-before, cue-after, pause-before, pause-after, speech-rate
Cascading Style Sheets 2.0
140
Posted by at No comments:

Cascading Style Sheets - CSS Education ( Part-5 )

Examples
h4 {margin-top: 1.5em;}
table {margin-top: 4%;}
img.drop {margin-top: 12px;}
Related Properties
margin, margin-bottom, margin-left, margin-right
marker-offset
marker-offset defines the distance between the nearest border edges of a marker and its
associated principal box.
Summary
Value Syntax
| auto | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
elements with a display of marker
Media Groups
visual
Values


Any length value. This sets the distance between the marker’s edge and the nearest edge of the
principal box. Negative values are permitted.
auto
The distance between the marker’s edge and the nearest edge of the principal box is determined by the
user agent.
Cascading Style Sheets 2.0
96
Note For more details on markers, refer to the entry for marker in the property display.
Examples
li:before {display: marker; marker-offset: 1.25em;
width: 30px; content: url(spiral.jpg);}
p.aside:after {display: marker; marker-offset: 10px;
content: " (End of aside.)";}
Related Properties
display
max-height
max-height sets an upper bound on the height of an element.
Summary
Value Syntax
| | none | inherit
Initial Value
none
Percentages
refer to height of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values

Any length unit. The element can never have a value for height which exceeds this distance.

Limits the element’s height to be at most this percentage of the height of the containing block. If the
containing block’s height changes— due to document reflow triggered by a change in the default font
size, for example—then the maximum height of the element will change with it.
none
There is no limit to the height of the element.
Note See the section on calculating element heights in Chapter 1 for more details on
how max-height affects layout.
Examples
img {max-height: 40px;}
p.aside {max-height: 10em;}
div.sidebar {max-height: 50%;}
Related Properties
height, min-height
Cascading Style Sheets 2.0
97
max-width
max-width sets an upper bound on the width of an element.
Summary
Value Syntax
| | none | inherit
Initial Value
none
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values

Any length unit. The element can never have a value forwidth which exceeds this distance.

Limits the element’s width to be at most this percentage of the width of the containing block. If the
containing block’s width changes—due to document reflow triggered by a change in the size of the
browser window, for example—then the maximum width of the element will change with it.
none
There is no limit to the width of the element.
Note See the section on calculating element widths in Chapter 1 for more details on
how max-width affects layout.
Examples
p {max-width: 90%;}
img.sidefig {max-width: 200px;}
div.sidebar {max-width: 20em;}
Related Properties
min-width, width
min-height
min-height sets a lower bound on the height of an element.
Summary
Value Syntax
| | inherit
Initial Value
0
Percentages
refer to height of containing block
Inherited
no
Cascading Style Sheets 2.0
98
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values

Any length unit. The element can never have a value for height which is lower than this distance.

Limits the element’s height to be at least this percentage of the height of the containing block. If the
containing block’s height changes—due to document reflow triggered by a change in the default font
size, for example—then the minimum height of the element will change with it.
Note See the section on calculating element heights in Chapter 1 for more details on
how min-height affects layout.
Examples
div.top {min-height: 85px;}
img {min-height: 10px;}
h1 {min-height: 1em;}
Related Properties
height, max-height
min-width
min-width sets a lower bound on the width of an element.
Summary
Value Syntax
| | inherit
Initial Value
UA dependent
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements except non-replaced inline elements and table elements
Media Groups
visual
Values

Any length unit. The element can never have a value for width which is less than this distance.

Limits the element’s width to be at least this percentage of the width of the containing block. If the
containing block’s width changes—due to document reflow triggered by a change in the size of the
browser window, for example—then the maximum width of the element will change with it.
Note See the section on calculating element widths in Chapter 1 for more details on
how max-width affects layout.
Cascading Style Sheets 2.0
99
Examples
p {min-width: 10em;}
img {min-width: 25px;}
h2 {min-width: 50%;}
Related Properties
max-width, width
outline
outline is a shorthand property which is used to set the width, color, and style of an outline around an
element.
Summary
Value Syntax
[ || || ] | inherit
Initial Value
not defined for shorthand properties
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual, interactive
Values

Any permitted value of the property outline-color.

Any permitted value of the property outline-style.

Any permitted value of the property outline-width.
Note An outline is usually applied to an element when it has focus (i.e., is the current
subject of user interaction). However, there is no restriction on the type or state of
elements to which outlines may be applied. An outline could be drawn around
every paragraph just as easily as around the link which has focus. Outlines are
drawn along the outside edge of the element’s borders, and do not trigger reflow
of the document when they are drawn or removed. Thus, they may be drawn over
the background, or (if wide enough) even the borders, background, or content of
other elements.
Examples
a:hover {outline: 1px dotted invert;}
input:focus {outline: blue 0.5ex outset;}
h1 {outline: purple solid 1em;}
Related Properties
:focus, outline-color, outline-style, outline-width
outline-color
outline-color sets the color for an outline around an element.
Cascading Style Sheets 2.0
100
Summary
Value Syntax
| invert | inherit
Initial Value
invert
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual, interactive
Values

Any color value.
invert
The outline performs a color inversion of the area where it is drawn. This is analogous to a “reverse
video” effect, and ensures that the outline will be visible regardless of the background color(s) behind it.
Note Unlike the element’s border, an outline can only have one color.
Because outlines can overwrite other elements, as well as any backgrounds behind the element to
which the outline is applied, authors are encouraged to use the color keyword invert whenever
possible.
Examples
input:focus {outline-color: invert;}
h1.high {outline-color: invert;}
Related Properties
:focus, outline, outline-style, outline-width
outline-style
outline-style determines the style of an outline around an element.
Summary
Value Syntax
none | dotted | dashed | solid | double | groove | ridge | inset |
outset | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
Cascading Style Sheets 2.0
101
visual, interactive
Values
none
No outline is drawn. The primary side effect of this value is that the computed outline-width for the
outline in question will be set to 0.
dotted
The outline is drawn as a series of dots. The specific placement of these dots is left to the user agent.
dashed
The outline is drawn as a series of short line segments. The specific placement of these lines is left to
the user agent.
solid
The outline is drawn as a single unbroken line.
double
The outline is drawn as a pair of unbroken lines. The specific placement of these lines, including the
separation between them, is left to the user agent.
groove
The outline is drawn as though it were a furrow carved into the surface of the document. This implies a
“shading” of the outline, but the CSS specification does not describe this in detail. Most user agents
handle this shading by splitting each outline into two adjacent lines, and darkening the upper (or
leftward) half while lightening the lower (or rightward) half of each outline.
ridge
The outline is drawn as though it were a ridge pushing up the surface of the document. This implies a
“shading” of the outline, but the CSS specification does not describe this in detail. Most user agents
handle this shading by splitting each outline into two adjacent lines, and lightening the upper (or
leftward) half while darkening the lower (or rightward) half of each outline.
inset
The outline is drawn as though the entire element is pushing the surface of the document away from the
user. This implies a “shading” of the outline, but the CSS specification does not describe this in detail.
Most user agents handle this shading by lightening the bottom and right outlines while darkening the top
and left outlines.
outset
The outline is drawn as though the entire element is pushing the surface of the document toward the
user. This implies a “shading” of the outline, but the CSS specification does not describe this in detail.
Most user agents handle this shading by darkening the bottom and right outlines while lightening the top
and left outlines.
Note
The value hidden, which is permitted for border styles, is not allowed for outline styles.
Examples
a:visited:focus {outline-style: dotted;}
pre.example {outline-style: outset;}
Related Properties
:focus, outline, outline-color, outline-width
outline-width
outline-width defines the width of the outline around an element.
Summary
Value Syntax
Cascading Style Sheets 2.0
102
| thin | medium | thick | inherit
Initial Value
medium
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual, interactive
Values

Any length unit. Length units for this property may not be negative.
thin
An outline which is thinner than an outline set to medium. The exact width is not defined by the CSS
specification.
medium
An outline which is thicker than an outline set to thin, and thinner than an outline set to thick. The
exact width is not defined by the CSS specification.
thick
An outline which is thicker than an outline set to medium. The exact width is not defined by the CSS
specification.
Note Because outlines can overwrite other elements, as well as any backgrounds
behind the element to which the outline is applied, authors are encouraged to
make their outlines as thin as possible. This will minimize the chances of the
outline overwriting and obscuring useful content.
Examples
a:link:hover{outline-width: 2px;}
select {outline-width: 0;}
input:focus {outline-width: thick;}
Related Properties
:focus, outline, outline-color, outline-style
overflow
overflow determines how content which overflows its element’s content area should be handled.
Summary
Value Syntax
visible | hidden | scroll | auto | inherit
Initial Value
visible
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
103
block-level and replaced elements
Media Groups
visual
Values
visible
Overflowing content should be displayed. The width of the content will be rendered as if the element
were tall enough to contain all of the content, but the element’s visible box will not be altered. This will
give the effect of the content “spilling out” of its element’s content area. The overflowing content will
almost certainly overlap portions of the padding, borders, and margins of its containing element, and
may in fact overlap parts of other elements.
hidden
Overflowing content should not be displayed. The region beyond which it is hidden is defined by the
value of the property clip.
scroll
Overflowing content should not be displayed, but the user agent should provide some means of
accessing the hidden content (e.g., a set of scrollbars). The region beyond which the content is not
shown is defined by the value of the property clip. Furthermore, the CSS2 specification recommends
that this value should always cause the scrolling mechanism to be rendered, regardless of whether it is
actually needed.
auto
The behavior caused by this value is dependent on the user agent. The CSS2 specification
recommends that if any content overflows, it should be accessible with a scrolling mechanism.
Note As of this writing, support for overflow is not very good. Of the known browsers,
only Navigator 6 comes close to properly supporting this property.
Examples
div.inset {overflow: scroll;}
td {overflow: hidden;}
p.aside {overflow: scroll;}
Related Properties
clip
padding
padding is a shorthand property which is used to set the padding on all four sides of an element.
Summary
Value Syntax
[ | ]{1,4} | inherit
Initial Value
not defined for shorthand properties
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Cascading Style Sheets 2.0
104
Values

Any length value. Negative length values are not permitted for the property.

The padding width is calculated with respect to the width of the element’s containing block (usually, but
not always, the content area of the parent element).
Note Length and percentage values may be mixed together. If there are four values
declared, they apply in the order: top, right, bottom, left. In the case of three
values, the first will apply to the top padding, the second to the left and right
padding, and the third to the bottom padding. If two values are declared, the first
applies to the top and bottom padding, while the second applies to the left and
right padding. If one value is declared, it applies to all four padding.
For the effects of padding on inline elements, refer to the individual padding properties.
Examples
td {padding: 0.75ex;}
div.aside {padding: 1em 10px;}
h2 {padding: 0.5em 5% 0.25em 15px;}
Related Properties
padding-bottom, padding-left, padding-right, padding-top
padding-bottom
padding-bottom sets the width of the padding on the bottom of an element.
Summary
Value Syntax
[ | ] | inherit
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values

Any length value. Negative length values are not permitted for this property.

The bottom padding’s width is calculated with respect to the width of the element’s containing block
(usually, but not always, the content area of the parent element).
Note padding-bottom may or may not have an effect on non-replaced (e.g., text) inline
elements. User agents should assign the value of padding-bottom to these
elements, and it may increase the amount of background which is drawn. Any
borders set on the element will also be pushed away from the content of the
element. User agents are not, however, required to increase the visible
Cascading Style Sheets 2.0
105
background area of inline elements. Even if the user agent does increase the
visible background, it may or may not overwrite content in following lines. Authors
are thus encouraged to avoid setting bottom padding on inline elements.
Examples
h3 {padding-bottom: 5px;}
ul {padding-bottom: 1.5em;}
Related Properties
padding, padding-left, padding-right, padding-top
padding-left
padding-left sets the width of the padding on the left side of an element.
Summary
Value Syntax
[ | ] | inherit
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values

Any length value.

The left padding’s width is calculated with respect to the width of the element’s containing block
(usually, but not always, the content area of the parent element).
Note padding-left will have an effect on the layout of inline elements. In the case of
non-replaced elements like hyperlinks, the left padding is applied to the left side
of the element, and will extend the visible background of the element. It will also
push the border away from the element’s content. If the inline element is broken
across two or more lines, the left padding is applied to the left side of the element
on the first line in which it appears, and is not applied to the left sides of the
element in subsequent lines.
Examples
h2 {padding-left: 20px;}
pre {padding-left: 2em;}
div.column {padding-left: 10%;}
Related Properties
padding, padding-bottom, padding-right, padding-top
Cascading Style Sheets 2.0
106
padding-right
padding-right sets the width of the padding on the right side of an element.
Summary
Value Syntax
[ | ] | inherit
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Applies to
all elements
Media Groups
visual
Values

Any length value.

The right padding’s width is calculated with respect to the width of the element’s containing block
(usually, but not always, the content-area of the parent element).
Note padding-right will have an effect on the layout of inline elements. In the case of
non-replaced elements like hyperlinks, the right padding is applied to the right
side of the element, and will extend the visible background of the element. It will
also push the border away from the element’s content. If the inline element is
broken across two or more lines, the right padding is applied to the right side of
the element on the last line in which it appears, and is not applied to the right
sides of the element in following lines.
Examples
h1 {padding-right: 5%;}
p.example {padding-right: 40px;}
Related Properties
padding, padding-bottom, padding-left, padding-top
padding-top
padding-top sets the width of the padding on the top of an element.
Summary
Value Syntax
[ | ] | inherit
Initial Value
0
Percentages
refer to width of containing block
Inherited
no
Cascading Style Sheets 2.0
107
Applies to
all elements
Media Groups
visual
Values

Any length value.

The padding’s width is calculated with respect to the width of the element’s containing block (usually,
but not always, the content area of the parent element).
Note padding-top may or may not have an effect on non-replaced (e.g., text) inline
elements. User agents should assign the value of padding-top to these elements,
and it may increase the amount of background which is drawn. Any borders set
on the element will also be pushed away from the content of the element. User
agents are not, however, required to increase the visible background area of
inline elements. Even if the user agent does increase the visible background, it
may or may not overwrite content in preceding lines. Authors are thus
encouraged to avoid setting top padding on inline elements.
Examples
h3 {padding-top: 8px;}
pre.code {padding-top: 0.5em;}
Related Properties
padding, padding-bottom, padding-left, padding-right
position
position determines the method by which an element’s box is laid out.
Summary
Value Syntax
static | relative | absolute | fixed | inherit
Initial Value
static
Percentages
n/a
Inherited
no
Applies to
all elements, but not to generated content
Media Groups
visual
Values
static
The element box is laid out as a part of the normal document flow, following the preceding element and
preceding following elements. Its content will flow around any floated elements. If an element is set to
this type of positioning, any values for left and top will be ignored.
relative
Cascading Style Sheets 2.0
108
The element’s box is laid out as a part of the normal flow, and then offset by some distance. The offset
distance is declared through some combination of the properties left, right, top and bottom; if
these all have a value of 0, then the box is not offset. The space which the element would normally
have occupied is preserved, and other elements in the document are laid out as though the relatively
positioned element were still a part of the normal flow. It is possible that the relatively positioned
element will overlap other elements. A relatively positioned element, even one which is not offset,
establishes a containing block for its descendant elements.
absolute
The element’s box is laid out in relation to its containing block, and is entirely removed from the normal
flow of the document. The containing block of an absolutely positioned element is the nearest ancestor
element with a position other than static. If no such ancestor exists, then the containing block is
the root element of the document. The edges of the absolutely positioned element’s box are positioned
via the properties left, right, top and bottom, which specify offsets from the edges of the
containing block. The space which the element would have occupied had it remained in the normal flow
is closed up as though the element did not exist, and other elements are laid out as though the
absolutely positioned element did not exist. Care must be taken to ensure that the positioned element
does not overlap other elements. Since the containing block will always be some element within the
document, or the root element, an absolutely positioned element will scroll with the rest of the
document.
fixed
The element’s box is absolutely positioned, with all of the behaviors which are described for
position: absolute. The major difference is that the containing block of a fixed-position element is
always the viewport. In Web browsers, this would be the browser window, and so a fixed-position
element will not scroll with the rest of the document. In paged media, each page is a viewport. Thus, a
fixed-position element in paged media will appear on every page, which can be used to simulate effects
such as running footers. See Chapter 6 for more details.
Note A common method of establishing a containing block for absolutely positioned
elements is to set an ancestor element to position: relative with no offsets. This
will cause no visible change to the relatively positioned ancestor, but will define
the desired containing block for any descendant elements.
Examples
img#lead {position: absolute;}
div.top {position: fixed; top: 0; height: 10% width: 100%;}
sup {position: relative; bottom: 0.66em;}
Related Properties
bottom, left, right, top, z-index
quotes
quotes is used to define the quotation pairs which are used at each level of nested quotation.
Summary
Value Syntax
[ ]+ | none | inherit
Initial Value
UA dependent
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Cascading Style Sheets 2.0
109
Values

A pair of string values which are used to represent the open- and close-quotes. These are always in the
order of open-quote first, and close-quote second. The first pair of marks is used for the first (or
outermost) level of quotation, the second pair for the next level of nested quotation, and so on. An
arbitrary number of quotation pairs may be supplied. Single-quote marks may be enclosed by doublequote
marks, and vice versa.
none
This prevents the values open-quote and close-quote on the property content from generating
any quotation marks.
Note Although this property can be used to create customized quotation schemes, it is
most useful for supplying quotation schemes for languages which the user agent
may not recognize.
Examples
blockquote {quotes: ‘"’ ‘"’ "’" "’";}
q:lang(fr) {quotes: "<<" ">>" "<" ">";}
Related Properties
content
right
right defines an offset of the right edge of an absolutely positioned element from the right edge of its
positioning context, or the horizontal distance which a relatively positioned element will be displaced.
Summary
Value Syntax
| | auto | inherit
Initial Value
auto
Percentages
refer to width of containing block
Inherited
no
Applies to
positioned elements
Media Groups
visual
Values

A fixed distance from the bottom of the positioning context.

Some percentage of the width of the positioning context, assuming that the width of the context has
been set explicitly. If not, then a percentage value for right is treated as though it were auto. In
practice, this means that percentage values for right set on relatively positioned elements will be
ignored.
auto
The actual distance which results will depend on a number of factors. These factors are the dimensions
of horizontal measure for an absolutely positioned element (see the notes section). If the element has
been relatively positioned, then auto has no apparent effect.
Note In the case of an absolutely positioned element, the horizontal dimensions of the
element must add up to the width of the positioning context. If every measure of
Cascading Style Sheets 2.0
110
horizontal distance besides right is explicitly set, then a value of auto is changed
to make sure that they all add up to the width of the positioning context. Similarly,
in left-to-right writing modes such as English, if all of the horizontal dimensions
including right are explicitly set, but do not add up to the width of the positioning
context, then the value for right is discarded, and the necessary value is
substituted. In both cases, a negative distance may be assigned to right. If right is
set to auto in right-to-left writing modes such as Hebrew, then the right edge of
the positioned element should be aligned with the place where it would have
appeared had the element not been positioned.
In addition, setting right to auto may force other horizontal dimensions which are also set to auto to
be reset to 0. See the section on positioning calculations in Chapter 1 for more information.
In the case of relatively positioned elements, right defines a horizontal offset from the place where the
relatively positioned element would ordinarily have appeared. Positive values for right will offset the
element to the right, and negative values will move it to the right. In right-to-left writing modes such as
Hebrew, if both right and left are set to explicit values, then the value for left will be discarded in
favor of right.
Examples
div.sidebar {position: absolute; width: auto;
left: 10%; right: 50%;}
em.slide-right { position: relative; right: -1em;}
Related Properties
bottom, left, position, top, width
table-layout
table-layout determines the layout method used in rendering a table.
Summary
Value Syntax
auto | fixed | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
elements with a display of table or inline-table
Media Groups
visual
Values
auto
The table should be laid out according to some automatic layout algorithm. There is a suggested
algorithm given in the CSS specification, but the specification does not require that a particular
algorithm be used, so it is up to each user agent to implement its own method.
fixed
The table should be laid out according to the provided fixed-table layout method. This method states
that the table’s width is given with the property width. If the value given for width is auto, then the
value for table-layout is changed to auto. If not, then column widths are determined by the
following rules:
􀂃 If the column element has a width other than auto, then the declared value sets the width
of the column.
Cascading Style Sheets 2.0
111
ô€‚ƒ If the column’s width is set to auto, then the first cell in the column which does not have
width: auto will set the width of the column. If that cell spans multiple columns, then its width
is divided evenly between the spanned columns.
􀂃 Any remaining columns will evenly divide the amount of horizontal space available,
subtracting any borders or cell spacing.
Once these steps are performed, then the width of the table is either the value of the property width
set on the table, or the sum of the width of all the columns, borders, and cell spacing, whichever is
greater. If the table’s width exceeds that of its columns, then all columns should be widened equally until
the aggregate column, border, and cell spacing widths equal the width of the table. Once the table has
been laid out, any content which cannot fit into its cell will overflow according to the value of the property
overflow. Since the specification does not say anything about the height of rows, it will be up to user
agents to invent their own solutions, which may vary.
Note The CSS specification provides an algorithm for calculating cell and row heights
which does not depend on the width algorithms described above. In summary, a
row’s height is largely dependent upon the cells within that row. A table row must
be at least as tall as the tallest cell in that row, regardless of any value assigned
to the row element’s height. Similarly, any cell must be tall enough to display all of
its content, regardless of any value assigned to the cell element’s height.
However, the specification does not say what should happen in the following circumstance:
ô€‚ƒ The table’s declared height does not equal the aggregate height of the rows, borders, and
cell spacing.
Nor does it explain the following:
􀂃 The meaning of percentage values assigned to the property height when set on table cells,
table rows, or table row groups.
􀂃 The effect that cells which span multiple rows will have on row-height calculations, except to
say that the row heights must add up to a height tall enough to contain the spanning cell.
Given these ambiguities, authors should expect that user agents will differ in their handling of height
calculations for tables.
Examples
table.granite {table-layout: fixed;}
table {table-layout: auto;}
Related Properties
border-collapse, cell-spacing, empty-cells
text-align
text-align determines the way in which line boxes are aligned within a block-level element.
Summary
Value Syntax
left | right | center | justify | | inherit
Initial Value
depends on UA and writing direction
Percentages
n/a
Inherited
yes
Applies to
block-level elements (except the value , which applies only to table cells)
Media Groups
visual
Cascading Style Sheets 2.0
112
Values
left
The left edge of each line box is aligned with the left edge of the block-level element’s content area.
right
The right edge of each line box is aligned with the right edge of the block-level element’s content area.
center
The center of each line box is aligned with the center of the block-level element’s content area.
justify
The edges of each line box should align with the edges of the block-level element’s content area. This
may be accomplished by programmatically increasing the letter- and word-spacing of text within a given
line, but the CSS specification does not require a particular method. User agents are permitted to
interpret this value as either left or right, depending on the writing direction for the element.

The content of cells in a column will align on the given string. This value may be applied only to table
cells; if set on other types of elements, the value is treated as either left or right, depending on the
writing direction for the element. As of this writing, no known user agent supports this value.
Note The value justify provides the effect of "full justification" or "double justification,"
which is a time-honored way of laying out text in print media. However, fully
justified text can actually be more difficult to read on a computer screen, so
authors are urged to use justify with caution.
Examples
p.column {text-align: justify;}
td.total {text-align: ".";}
div.rightside {text-align: right;}
Related Properties
direction, letter-spacing, word-spacing
text-decoration
text-decoration is used to add "decorations" to inline content.
Summary
Value Syntax
none | [ underline || overline || line-through || blink ] | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
none
No decoration should be added to the inline text.
underline
Cascading Style Sheets 2.0
113
An underline is drawn beneath the inline text.
overline
An overline is drawn above the inline text.
line-through
A line should be drawn through the middle of the inline text. Note that “middle” does not imply “vertical
center,” as the line will most likely be drawn closer to the center of lowercase characters than the actual
center of the character boxes.
blink
The inline text should blink on and off, analogous to the BLINK element introduced by Netscape. User
agents are not required to support this value.
Note If this property is set on a block-level element, it will actually affect the inline
content of the element.
The color of any text decoration is set by the foreground color of the text. However, it is not always the
case that the color of an element will match the color of the text decoration near it. This can occur due
to the “spanning” of an element by the decoration set on an ancestor element.
A text decoration is not inherited by descendant elements. However, the decoration set on an element
will affect the entire element, including any descendants. Consider a hyperlink which has been set to
text-decoration: underline. Within the hyperlink is an EM element. Since the EM does not inherit
the decoration, its value for text-decoration is none. The underline still continues underneath the EM,
however, since it is a descendant of the hyperlink. This is referred to as the "spanning" of descendant
elements by a text decoration.
This has some interesting consequences. Take the hyperlink-EM example, and assume that the
hyperlink and its underline are colored blue, while the EM is colored red. The hyperlink’s underline will
be blue, even when it appears beneath the red EM element. Thus, it is possible for a text decoration’s
color to be different than the color of the text near it. It is also possible for a decoration to cut through
text. Take an underlined element which contains a SUB (subscript) element. The subscripted text will be
lowered with respect to its parent element’s text, but the parent’s underline will not change position.
Thus the subscripted text will likely overlap the underline.
If an element contains no text, then this property is ignored. Thus, it is not possible to underline an
image by using text-decoration. However, images may have underlines appear beneath them due
to the "spanning" described earlier.
In many Web browsers, setting an element’s text-decoration value to none will prevent the display
of any decorations within that element, even if it should have been spanned by the decoration of a
parent element. The exceptions are Internet Explorer 5 for Macintosh, Navigator 6, and Opera 4+
(although Opera still does not span decorations across images).
Examples
a[href] {text-decoration: underline;}
p.old {text-decoration: line-through;}
blink {text-decoration: blink;}
Related Properties
None.
text-indent
text-indent defines an indentation distance for the first line of text in a block-level element.
Summary
Value Syntax
| | inherit
Initial Value
0
Percentages
refer to width of containing block
Cascading Style Sheets 2.0
114
Inherited
yes
Applies to
block-level elements
Media Groups
visual
Values

Any length value. Negative lengths are permitted for the property, and will produce a “hanging indent”
effect. Authors should be sure to increase the element’s margin so that the hanging indent can still be
seen, especially if the edge of the element is close to the edge of the viewport.

The first line of text is indented by a distance relative to the width of the element’s containing block. The
computed indentation will be the same regardless of the width of the element, so it is possible to specify
an indentation which is greater than the width of the element. The CSS specification does not say what
should happen in such cases.
Note text-indent is a simple way to produce the "tabbed first line" effect common in
print media.
Examples
p {text-indent: 3em;}
div.hang {text-indent: -40px; margin-left: 40px;}
p.odd {text-indent: 50%;}
Related Properties
None
text-shadow
text-shadow specifies one or more shadows which are derived from the text of an element.
Summary
Value Syntax
none | [ || ? ,]* [ ||
?] | inherit
Initial Value
none
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
visual
Values
none
Cascading Style Sheets 2.0
115
No shadows should be associated with the element.

Any color value. This gives the color of the shadow. If no color is provided, the shadow’s color is taken
from the value of the property color for the element.

The offset distances and blur radius for the shadow, in the order x-offset, y-offset, and blur radius. The
two offset values are required for any shadow, but the blur radius is optional. Negative values are
permitted for the offset lengths, but not the blur radius. A negative x-offset will place the shadow to the
left of its text, and a negative y-offset will place the shadow above the text.
Note This is the mechanism by which authors may add “drop shadows” to their text
without having to resort to graphics. The CSS specification does not say how, or
even whether, shadows should be blended with their backgrounds, nor exactly
how the blur should be calculated.
A shadow does not affect the size of the element’s box, and may in fact extend beyond the element.
The shadows are considered a part of their element’s stacking context (see z-index for more details),
and so may overlap other elements. The specification does not say how multiple shadows on the same
element should be stacked or blended.
By specifying no offset and a blur radius for an element, it is possible to provide a “glow” effect to the
element’s text. Caution should be used, however, since many such effects involve setting the text color
close to the background color, which will make the element very difficult to read in a user agent which
does not support text-shadow. As of this writing, that was all of them, so authors are urged to use this
property with caution.
Examples
h1 {text-shadow: 0.5em 0.4em 2px gray;}
p.raise {text-shadow: 1px 1px;}
div.crazy {text-shadow: 10px 1.2em 3px purple, -1in 23px 0 magenta,
0 2em 1em maroon, 3ex –2cm 5mm yellow;}
Related Properties
None
text-transform
text-transform changes the capitalization of text within an element, or else directs the user agent to
leave the capitalization "as is."
Summary
Value Syntax
capitalize | uppercase | lowercase | none | inherit
Initial Value
none
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
visual
Values
capitalize
Cascading Style Sheets 2.0
116
The first letter of each word in the element’s text should be capitalized. The CSS specification does not
say what a “word” is, and in fact the definition of what constitutes a word is likely to be different from
language to language. The usual working definition of a word is any sequence of characters which is
surrounded by whitespace, but this cannot be guaranteed.
uppercase
All of the characters in the element’s text should be uppercase (capital letters).
lowercase
All of the characters in the element’s text should be lowercase.
none
The capitalization of the element’s text should not be altered.
Note Although text-transform is inherited, it does not necessarily force the capitalization
of the first letter in a descendent element. If a portion of a word is enclosed within
an element, but there is no whitespace which separates this element from the text
that surrounds it, then the string of letters is considered to be a single "word" and
only the first letter in that word should be capitalized. Consider the following
markup:

supercalifragilisticexpialidocious
Only the first “S” would be capitalized, and the “f” at the beginning of the STRONG element would not.
Examples
*.shout {text-transform: uppercase;}
p.cummings {text-transform: lowercase;}
h1.title {text-transform: capitalize;}
Related Properties
None
top
top defines an offset of the top edge of an absolutely positioned element from the top edge of its
positioning context, or the vertical distance which a relatively positioned element will be displaced.
Summary
Value Syntax
| | auto | inherit
Initial Value
auto
Percentages
refer to height of containing block
Inherited
no
Applies to
positioned elements
Media Groups
visual
Values

A fixed distance from the top of the positioning context.

Cascading Style Sheets 2.0
117
Some percentage of the height of the positioning context, assuming that the height of the context has
been set explicitly. If not, then a percentage value for top is treated as though it were auto. In practice,
this means that percentage values for top set on relatively positioned elements will be ignored.
auto
The actual distance which results will depend on a number of factors. These factors are the dimensions
of vertical measure for an absolutely positioned element (see the notes section). If the element has
been relatively positioned, then auto has no apparent effect.
Note In the case of an absolutely positioned element, the vertical dimensions of the
element must add up to the height of the positioning context. Setting top to auto
may force other vertical dimensions which are also set to auto to be reset to 0.
See the section on positioning calculations in Chapter 1 for more information.
In the case of relatively positioned elements, top defines a vertical offset from the place where the
relatively positioned element would ordinarily have appeared. Positive values for top will offset the
element upward, and negative values will move it downward. If both bottom and top are set to explicit
values, then the value for top will be discarded in favor of bottom.
Examples
div.sidebar {position: absolute; width: 15em; margin: 0; padding: 0;
height: auto; top: 25%;}
sub {vertical-align: baseline; position: relative; top: 0.5em;}
Related Properties
bottom, height, left, position, right
unicode-bidi
unicode-bidi influences the layout of text in bidirectional-text situations.
Summary
Value Syntax
normal | embed | bidi-override | inherit
Initial Value
normal
Percentages
n/a
Inherited
no
Applies to
all elements, but see notes
Media Groups
visual
Values
normal
Prevents the element from opening a new level of Unicode bidirectional embedding.
embed
Causes the element to open a new level of Unicode bidirectional embedding, assuming the element is
inline-level. The direction of the new embedding level is taken from the value of the property
direction for the element, and reordering within the element is implicit. For direction: ltr, this
will have the effect of beginning the element with a Unicode LRE (U+202A); for direction: rtl, the
element begins with a Unicode RLE (U+202B). In either case, the ele- ment will be closed with a
Unicode PDF (U+202C).
bidi-override
Cascading Style Sheets 2.0
118
Causes an override of reordering mechanisms within the element, assuming the element is inline-level
or is a block-level element that contains only inline elements. In other words, glyphs within the element
are strictly ordered in the direction specified by the property direction, and implicit ordering is
ignored. For direction: ltr, this will have the effect of opening the element with a Unicode LRO
(U+202D); for direction: rtl, the element begins with a Unicode ROL (U+202E). In either case, the
element will be closed with a Unicode PDF (U+202C).
Note To quote the CSS2 specification: “The final order of the characters in each blocklevel
element is the same as if the bidi control codes had been added as
described..., markup had been stripped, and the resulting character sequence
had been passed to an implementation of the Unicode bidirectional algorithm for
plain text that produced the same line-breaks as the styled text. In this process,
no-textual entities such as images are treated as neutral characters, unless their
unicode-bidi property has a value other than normal, in which case they are
treated as strong characters in the direction specified for the element." Authors
who wish to understand this process in more detail should consult the Unicode
specification, as an explanation of its workings is (far) beyond the scope of this
book.
Examples
*:lang(en) {direction: ltr; unicode-bidi: embed;}
Related Properties
direction
vertical-align
vertical-align determines the alignment of text within a line, or within a table cell.
Summary
Value Syntax
baseline | sub | super | top | text-top | middle | bottom |
text-bottom | | | inherit
Initial Value
baseline
Percentages
refer to the value of line-height for the element itself
Inherited
no
Applies to
inline-level elements and elements with a display of table-cell
Media Groups
visual
Values
baseline
The baseline of the element is aligned with the baseline of the parent element. If either element doesn’t
have a baseline, then align the bottom of the element box with the bottom of the parent element’s box.
sub
The baseline of the element is lowered to the point appropriate for subscripted text. The CSS
specification does not say what that point should be. Note that the value of font-size for the element
is not altered by this value.
super
The baseline of the element is raised to the point appropriate for superscripted text. The CSS
specification does not say what that point should be. Note that the value of font-size for the element
is not altered by this value.
top
Cascading Style Sheets 2.0
119
The top of the element’s box is aligned with the top of the line box, in the context of inline content, or
with the top of the table cell in the context of tables.
text-top
The top of the element’s box is aligned with the top of the highest inline box in the line.
middle
The baseline of the element is aligned with the point defined by the baseline of the parent element plus
half the x-height of the parent element’s font, in the context of inline content. The middle of the element
should be aligned with the middle of the table cell in the context of tables.
bottom
The bottom of the element’s box is aligned with the bottom of the line box, in the context of inline
content, or with the bottom of the table cell in the context of tables.
text-bottom
The bottom of the element’s box is aligned with the bottom of the lowest inline box in the line.

The baseline of the element is raised or lowered by the given percentage of the value for the property
line-height. Thus, a vertical-align value of 50% on a line which has a line-height of 18px
will raise the baseline by 9 pixels. A percentage value of 0% for this property has the same effect as the
value baseline.

The baseline of the element is raised or lowered by the given length value. Negative length values are
permitted for this property. A length value of 0 for this property has the same effect as the value
baseline.
Note See the section on inline formatting in Chapter 1 for more details on the
differences between line boxes, inline boxes, and the baseline.
Support for vertical-align is less than exemplary in current Web browsers. Only with the advent of
browsers such as Internet Explorer 5 for Macintosh and Opera 4 have Web browsers truly supported
the behavior described in the CSS specification. Older browsers may evidence unexpected behaviors,
generally in the form of misaligning elements. In most cases, there is minimal impact on the layout
(something which the author will tolerate), but attempts at extreme typographic effects may be thwarted
by browser limitations.
Examples
sup {vertical-align: superscript; font-size: 80%;}
td div {vertical-align: middle;}
img.textdec {vertical-align: bottom;}
span.drop {vertical-align: text-bottom;}
Related Properties
line-height
visibility
visibility determines whether an element is invisible or not.
Summary
Value Syntax
visible | hidden | collapse | inherit
Initial Value
inherit
Percentages
n/a
Inherited
no
Applies to
Cascading Style Sheets 2.0
120
all elements
Media Groups
visual
Values
visible
The element is visible.
hidden
The element is invisible (i.e., completely transparent). The element still exists, so it still affects the
document’s layout. The visual effect will be that of a blank spot exactly the same size that the visible
element would occupy, including any borders or margins.
collapse
This value causes columns, rows, columns groups, and row groups to be removed from the document,
but still affects the layout of the table. Thus, any cells within those rows will affect the widths of columns
in the visible portion of the table.
Note The descendant elements of an invisible element may be made visible by setting
them to visibility: visible.
This property is often used in “dynamic pages” to accomplish such effects as pop-up menus.
Examples
p.glass {visibility: hidden;}
tr.stow {visibility: collapse;}
Related Properties
display
white-space
white-space is used to alter the user agent’s handling of whitespace in an element.
Summary
Value Syntax
normal | pre | nowrap | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
block-level elements
Media Groups
visual
Values
normal
Any sequence of whitespaces within the element is converted to a single space. This is familiar
behavior from traditional Web browsers.
pre
Cascading Style Sheets 2.0
121
All whitespace in the element is honored, including multiple spaces and carriage returns. Word
wrapping is disabled, and lines are only broken at newline characters in the source, or \A sequence in
generated content.
nowrap
Any sequence of whitespaces within the element is converted to a single space, but word wrapping is
disabled. Line breaks in the source are ignored, and only the \A sequence in generated content will
start a new line of text.
Note Although the value nowrap is fairly well supported in modern browsers, pre is not.
Examples
div.poem {white-space: pre;}
p {white-space: normal;}
td.single {white-space: nowrap;}
Posted by at No comments:
Subscribe to: Posts (Atom)