element, is horizontally aligned. The allowed values for this property are left, right, center, and justify. The default value for the property is left. This property should act similar to most of the ALIGN attributes, which are available on certain block-level elements in HTML. Be aware that justification of a block element may be very noticeable when the font is very large, and may show the added spaces. A few examples are shown here: P DIV .goright
<TITLE>CSS Text Attributes Example <STYLE TYPE="text/css">
This is a paragraph of text. <SPAN CLASS="letterspaced">Spacing letters is possible but word spacing is not. Vertical alignment can be used to make <SPAN CLASS="sub">Subscript and <SPAN CLASS="super">Superscript text, but the real use of the property is for aligning text next to images and objects.
It is possible to set paragraphs to align left.
It is possible to align paragraphs to the right.
<SPAN CLASS="CENTER">Even lines can be set to center. Don't get carried away with your newfound powers. You may be tempted to show how cool you can be using text on top of other text. While this may be good for certain situations, it may also confuse the viewer.
element, can be thought of as occupying rectangular boxes on the screen. Three aspects of these boxes can be controlled with style properties. The box properties that can be controlled include the following: ■ Margin properties Determine the distance between edges of an element’s box and the edges of adjacent elements. ■ Border properties Determine the visual characteristics of a border surrounding an element’s edges. ■ Padding properties Determine the distance inside an element between its edges and its actual content. ■ Height, width, and positioning properties of the box that the element creates.
<SPAN ID="BIGCHAR">This is another paragraph which has negative indenting. Notice how you can pull a character outside the paragraph for interesting effects. This is just dummy text to show the effect of the indent. This is just dummy text to show the effect of the indent.
This is a paragraph of text that has margins set for all sides to 1 cm. This is just dummy text to show the effects of the margins. This is just dummy text to show the effects of the margins.
<SPAN ID="BIGCHAR">This is another paragraph that has negative margins on one side. Be careful not to clip things with negative margins. This is just dummy text to show the effect of the margins. This is just dummy text to show the effect of the margins.
This is a paragraph of text that has a red double border around it. Notice how the text creeps up on the edges. Padding values will help you avoid this problem.
370
HTML: The Complete Reference
Figure 10-7.
CSS border properties rendered under Internet Explorer 4
The shorthand notation property padding allows a single property assignment to specify all four padding regions. It can take from one to four values. A single value is applied to all four padding areas. Multiple values are applied to padding regions in a clockwise order: top, right, bottom, left. If only two or three values are used, the missing values are determined from the opposite sides. So, DIV
{border-style: solid; padding: 1cm}
sets a region with a solid border, but with contents padded 1 cm from the border on all sides. The following sets padding on the top and bottom to 2 mm and the right and left to 4 mm for all paragraphs: P
{padding: 2mm 4mm}
Chapter 10:
Style Sheets
371
An example showing padding and borders to help you better understand padding values is shown here:
#TWO
{background: yellow; border-style: double; border-width: medium; padding-top: 1cm; padding-bottom: 1cm; }
#THREE
{background: yellow; border-style: double; border-width: medium; padding: 1cm 1cm; margin: .5cm 4cm; }
-->
This paragraph of text has padding on the left and right,but not on the top and bottom.
This paragraph has padding, but this time only on the top and bottom.
PRESENTATION AND LAYOUT
<TITLE>CSS Padding Example <STYLE TYPE="text/css">
372
HTML: The Complete Reference
Be careful when using margins. They don't necessarily apply to the text within the box, but to the box itself.
The rendering of the padding example is shown in Figure 10-8.
width and height The width property sets the width of an element’s content region (the width of the area actually filled with content as opposed to its padding, border, or margin). The following example sets a paragraph with a width of 300 pixels: P
{width: 300px; padding: 10px; border: solid 5px; background: yellow; color: black}
You can also use percentage values for the width. With the width property, tables apparently aren’t necessary under CSS. This is true, but given the current level of support for these style sheets, relying on this feature for layout probably isn’t a good idea. Similar to width, the height property sets the height of an element’s content region. When thinking about elements in Web pages other than images, setting the height property might seem unusual. In most cases, it is probably best to leave the height property alone, so that the default value, auto, is used. The most legitimate use of this property is to set the height for objects, such as images. An absolute value or a percentage is supported for the height property, just as it is for width. The following examples show how these properties might be used: IMG P
{height: 10cm; width: 10%} {height: 100px; width: 300px}
float and clear The float property influences the horizontal alignment of elements. It causes them to “float” toward either the left or right margins of their containing element. This is especially useful for placing embedded media objects (such as images and similar support) into a Web page. Similar floating capabilities under vanilla HTML can be found with the ALIGN attribute settings. As with HTML, the values available for the float property include left, right, or none. The value of none is the default. To imitate
Chapter 10:
Style Sheets
373
PRESENTATION AND LAYOUT
Figure 10-8.
Rendering of padding example under Internet Explorer 4
the HTML code
, apply a style sheet rule such as this to the element: IMG.LOGO
{float: right}
The previous example might raise a few questions. How can the HSPACE and VSPACE of the item be set by using style sheets? You have a great deal of control over the border, margin, padding, height, and width of any object, so you shouldn’t have difficulty achieving the layout that you want. One thing that may not be obvious is how to clear the content that may flow around an object. The use of floating elements creates a need to position vertically those elements that immediately follow them in an HTML document. Should the content flow continue at the floating element’s side or after its bottom? If floating elements are defined on the right and left margins of the page, should content flow continue between them, after
374
HTML: The Complete Reference
the bottom of the left element, the right element, or whichever is larger? The clear property allows this to be specified. A value of left for the property clears floating objects to the left, a value of right clears floating objects to the right, and the both value clears whichever is larger. The default value is none. Notice that this is extremely similar to the use of the CLEAR attribute with the
element in HTML. The following code example demonstrates the use of the clear and float properties: <TITLE>Image and Layout Control under CSS <STYLE TYPE="text/css">
This is some dummy text.
The rendering of the image alignment and text flow example is shown in Figure 10-9.
Classification Properties Cascading style sheets contain several classification properties that determine the display classification of an element. Is it a block-level element or an inline element? Does it preserve or collapse white-space characters? Is it a list element? If so, what list style does it use? The following attributes are some of the miscellaneous items in cascading style sheets.
Chapter 10:
Style Sheets
375
PRESENTATION AND LAYOUT
Figure 10-9.
Rendering of image alignment and text flow under cascading style sheets
display The CSS model recognizes three types of displayed elements: block elements, inline elements, and lists. The display property allows an element’s display type to be changed to one of four values: block, inline, list-item, and none. The none value causes an element not to display or use canvas space. This differs from the property setting visibility (discussed later in this chapter), which also prevents an element from displaying, but may reserve canvas space. To turn off a paragraph, try a rule such as the following: P.remove
{display:none}
Besides turning off elements, the browser should be able to turn a block element (such as a paragraph) into an inline element, thus keeping it from adding a new line.
376
HTML: The Complete Reference
For example, the following would change the form of all paragraphs in the document; overriding the known action of the element is not suggested: P
{display:inline}
Browsers may be able to turn an inline element into a block: EM
{display:block}
You can also coerce an element to act somewhat like a list by casting it with the display property, as shown here: B
{display: list-item}
In very few cases, other than setting display to none, does type overriding make sense. While you might be able to dream up interesting uses for element form changing, it upsets the improved simplicity of HTML files provided by cascading style sheets.
white-space The white-space property controls how spaces, tabs, and newline characters are handled in an element. The default value, normal, collapses white-space characters into a single space and automatically wraps lines, just as normal HTML. When a value of pre is used for the property, white-space formatting is preserved, similar to how the
element works in HTML. The nowrap value prevents lines from wrapping if they exceed the element’s content width. This short example shows how the white-space property would be used to simulate the element: <STYLE TYPE="text/css"> This
, while the following is equivalent to : UL element, but be aware that setting individual list elements to a particular style might require the use of the ID attribute, or even inline styles., the functionality of proprietary elements (such as
) can be achieved with style sheets. element to be 120 pixels from the left and 50 pixels down from the top-left corner of the browser:
At last, absolute positioning!
Although using the inline style form isn’t the best way to do things, it serves its purpose here.
PRESENTATION AND LAYOUT
■ absolute Defines a coordinate system independent from the usual block and inline element placement common in HTML documents. An element whose position is absolute becomes a visual container for any elements enclosed in its content. If the element is repositioned, all of the elements defined inside it move with it. If any of those contained elements are assigned coordinates outside of their parent’s dimensions, they disappear.
380
HTML: The Complete Reference
Before you rush off and position elements all over the screen, be aware of the nuances of nested items. For example, look at the following markup. Notice how the position of the second area is relative to the first. If you read the coordinate values numerically, the inner area should be positioned to the left and above where it shows onscreen. Remember, the coordinates are relative to the containing box. <TITLE>Positioning Nested Items <STYLE TYPE="text/css">
{position:absolute; left: 75px; top: 50px; height: 30px; width: 40px; background: orange}
-->
This is the outer part of the nest. <SPAN ID="inner">This is the inner part of the nest.
The rendering of this example is shown in Figure 10-10.
Chapter 10:
Style Sheets
381
PRESENTATION AND LAYOUT
Figure 10-10.
Rendering of nested boxes under Internet Explorer
Clipping Regions For elements whose position type is absolute, a clipping rectangle defines the subset of the content rectangle that is actually shown. The property clip can be used to set the coordinates of the clipping rectangle that houses the content. The form of the property is clip: rect( top right bottom left)
where top, right, bottom, and left are the coordinate values that set the clipping region:
This
382
HTML: The Complete Reference
overflow Sometimes, an element’s content is greater than the space allocated for it. Most browsers allocate space for content, unless size is set explicitly or a clipping region is set. The overflow property determines how an element should handle the situation when content doesn’t fit. A value of clip for the property clips content to the size defined for the container. The scroll value allows content to scroll using a browserdependent mechanism, such as scroll bars. The default value is none, which does nothing and may clip the content. The following example, which mimics the functionality of a floating frame, creates a positioned region that allows scrolling if content goes beyond its defined size:
This
z-index Absolute and relative positioning allow element content to overlap. By default, overlapping elements stack in the order in which they are defined in an HTML document. The most recent elements go on top. This default order can be redefined by using an element’s z-index property. Absolute- or relative-positioned elements define a z-index context for the elements that they contain. The containing element has an index of 0; the index increases with higher numbers stacked on top of lower numbers. The following example forces all images inside a container to overlap, and it uses the top class to position one image on top. Notice how the elements stack in the specified order rather than as defined: <TITLE>Z-order Example <STYLE TYPE="text/css">
Chapter 10:
{position:absolute; top:30;left:30; height: 25; width: 100; background-color:orange; z-index: 1}
DIV.three
{position:absolute; top:40;left:40; height: 25; width: 25; background-color:yellow; z-index: 3}
-->
This is section one.
This is section two.
This is section three.
The rendering of this example is shown in Figure 10-11.
visibility The visibility property determines whether an element is visible. The values for the property are hidden, visible, or inherit. The inherit value means that a property inherits its visibility state from the element that contains it. If an element is hidden, it still occupies the full canvas space, but is rendered as transparent. This simple example shows how the item is made invisible, but is not removed:
This is a <EM STYLE="visibility: hidden">test of the visibility property.
Press me!
<SPAN ID="peek"> Gotcha!
PRESENTATION AND LAYOUT
<TITLE>Visibility and Scripting <STYLE TYPE="text/css">
386
HTML: The Complete Reference
Note that you can manipulate style values on-the-fly. By changing the look and feel of items depending on a user action, a variety of effects are possible. Look at the small code fragment here:
Microsoft Multimedia Filters This is the blur filter.
This is the dropshadow filter.
This is the flip horizontal filter.
This is the flip vertical filter.
This is the glow filter.
This is the shadow filter.
This is the wave filter.
tag to utilize a single set of filter effects on all of the visual objects in that region and even stack up effects on enclosed objects.
Reveal Transition Filter The reveal transition filter allows objects to be revealed by using a variety of transitions, such as box-ins or wipes. These transitions are similar to those found in presentation programs, such as Microsoft’s PowerPoint. The form of the filter property for revealtrans is shown here: filter: revealtrans(duration=duration, transition=transition#)
Chapter 10:
Style Sheets
401
The value of duration is the time it should take to reveal or hide the object in seconds.milliseconds. The transition number is a numeric value from 0 to 24, which corresponds to one of the predefined patterns to reveal objects. The following table shows the values and their corresponding meanings:
Meaning
0
Box in
1
Box out
2
Circle in
3
Circle out
4
Wipe up
5
Wipe down
6
Wipe right
7
Wipe left
8
Vertical blinds
9
Horizontal blinds
10
Checkerboard across
11
Checkerboard down
12
Random dissolve
13
Split vertical in
14
Split vertical out
15
Split horizontal in
16
Split horizontal out
17
Strips left down
18
Strips left up
19
Strips right down
20
Strips right up
21
Random bars horizontal
22
Random bars vertical
23
Random
PRESENTATION AND LAYOUT
Value
402
HTML: The Complete Reference
A rule such as the following would set all paragraph elements of the class intro to reveal themselves by using an expanding circle: P.intro
{filter: revealtrans(duration=4.0, transition=3)}
It may be required to trigger the transition with script code, so don’t just throw a bunch of transitions on the page and hope that the page starts animating. These transitions might be of little use on a set page, but what about between pages?
Interpage Transitions Interpage transitions enable you to provide multimedia effects while a Web page is loading or exiting. Interpage transitions are not handled with style sheets, but instead are handled by using the <META> element within the section of a Web page. However, the syntax of the transitions is the same as the reveal transition, so covering it here seems appropriate. The syntax for transitions consists of three parts: specifying when the event should be played, the duration of the transition, and what kind of transition effect to use. The following two examples show how to set transitions upon entry and exit of a page. To make a checkerboard entrance that lasts three seconds, use a <META> element, such as the following: <META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3.0,Transition=10)">
To make a big exit, you could set a wipe effect that lasts two seconds: <META http-equiv="Page-Exit" CONTENT="RevealTrans(Duration=2.0,Transition=7)">
Of course, leaving the page would require a link from the page to another destination. Experiment with all of the different transition effects by setting the transition number anywhere from 0 to 23. While transitions seem pretty interesting, don’t get carried away. They can be even more annoying than
. Address: 