You can use cascading style sheets, or CSS, to organize text, images, and other elements on your Web page in precise ways. This enables you to create layouts that are more complicated than those you can create with HTML. Style sheets allow you to specify where in a page to put different types of content by defining coordinates within the browser window. You can also precisely control the space around different elements and even overlap content on your pages.

By combining layout techniques with other CSS features covered in Chapter 11, you can produce pages that look like they were created using a page layout program.

Box Model The key to understanding layout using style sheets is the box model of Web page layout, where each element on a page exists in its own rectangular box. Style sheets let you control the dimensions of the box using height and width properties, where the box is placed on the Web page, and how the box aligns or overlaps with other boxes on the page.	HTML Block Tags You define boxes for your content using block-level HTML tags. Block-level tags place new lines before and after the content they enclose. The <P>, <H1>, and <TABLE> tags are examples of block-level tags. The <DIV> is a generic block-level tag that is commonly placed around other tags to organize content when using style sheets to determine layout.
Positioning Content You can use different types of positioning to place the boxes of content on your pages. Relative positioning places content on the page relative to the normal flow of the other content on the page. Absolute positioning places content on absolute points on the page relative to the containing block. Fixed positioning places content relative to the browser window and keeps it fixed as a user scrolls.	Offsetting Content You can offset content on your Web page from its normal position using the top, left, right, and bottom style sheet properties. This allows you to place content in a precise position within the browser window. You can even place content completely outside of the browser window by using a large or negative offset value. You can also overlap content in the browser window by placing an element at the same window coordinates as another element.
Padding and Margins You can control the space that surrounds content inside each box on your page. Space outside the edge of the box is known as margin, while space inside the edge of the box is called padding. Style sheets let you control space on the top, left, right, and bottom of the boxes independently. You can also turn on borders, which appear where the margin and padding meet.	Floating Content The float CSS property takes a box out of the normal flow of your page and moves it to the right or left side of the enclosing box. Content that follows then wraps around the floated element. Floating allows you to align images, paragraphs, tables, and other content, similar to how you can align images using the ALIGN attribute in HTML.

You can use the width and height properties in your style sheet to set the dimensions of your Web page elements. For example, if you want a specific paragraph to take up a certain amount of space in your page flow, you can apply a style rule using the ID attribute. See Chapter 10 to learn more about the ID attribute.

You can also specify a size based on a percentage.

Set Width and Height for an Element

DEFINE AN ABSOLUTE SIZE

1 Click inside the tag declaration and type width: ?; height: ?, replacing ? with absolute sizes for the width and height.

You can specify values in points (pt), pixels (px), millimeters (mm), centimeters (cm), inches (in), picas (pc), x-height (ex), or em.

• In this example, the size is applied by assigning a style to an ID attribute inside a DIV tag.

2 Type ID=" ?" inside the HTML tag, replacing ? with the ID name.

• The Web browser displays the element with an absolute width and height.

In this example, borders are turned on to show the dimensions of the content boxes.

DEFINE A RELATIVE SIZE

1 Click inside the tag declaration and type width: ?, height: ?, replacing ? with percentage sizes for the width and height.

2 Type ID=" ?" inside the HTML tag, replacing ? with the ID name.

• The Web browser displays the element with a width and height that are relative to the size of the enclosing box.

In this case, the enclosing box is the <BODY> tag, so the content is resized based on the browser window dimensions.

Tip

What are the em and ex style-sheet measures?

The em and ex measures allow you to define sizes on your pages based on the size of the surrounding text. The concept comes from typography, where em represents the width of the capital letter M and ex represents the height of the lowercase x. If you set a style sheet measurement to 2em, text will be twice the size of the normal font. If viewers adjust the font size of their browser, the content sized on your page using em also adjusts. The ex measure works similarly but on a smaller scale.

How do I control what happens to text that extends outside a CSS box?

You can control how text outside a box is handled using the overflow property. Setting the property to visible causes the text to be rendered outside the box. A hidden value hides the text that is outside the box. Both scroll and auto values display scroll bars for viewing the content, if needed.

You can apply relative positioning to elements on your Web page to place content relative to other content on the page. If you offset a relatively positioned element using the top, left, right, or bottom property, the element is offset relative to the point where it would normally begin.

Relative is the default setting for the position style property.

Use Relative Positioning

Apply Relative positioning

1 Click inside the tag declaration and type position: relative.

• In this example, the positioning is applied to all the paragraphs on a page by defining a style for the <P> tag.

• The Web browser displays the elements with relative positioning, one after the other.

In this example, a background color is applied to the paragraphs to show the dimensions of the content boxes.

APPLY AN OFFSET

1 Click inside the tag declaration and type top: ?;, replacing ? with the amount you want to offset the elements from the top of the normal page flow.

2 Click inside the tag declaration and type left: ?, replacing ? with the amount you want to offset the element from the left of the normal page flow.

You can specify values in points (pt), pixels (px), millimeters (mm), centimeters (cm), inches (in), picas (pc), x-height (ex), or em.

• The Web browser displays elements with offsets applied.

In this example, the paragraphs are offset relative to their normal position in the page flow.

You can narrow elements on your page so that they appear within the browser window by setting their dimensions. See the section "Set Width and Height for an Element" for details.

Tip

Can I offset content from the bottom or the right?

Yes, but note that offsetting from the bottom may obscure the page content that is above the positioned element. Use the following steps:

1 Click inside the tag declaration and type bottom: ?;, replacing ? with the amount of offset from the bottom.

2 Click inside the tag declaration and type right: ?, replacing ? with the amount of offset from the right.

The Web browser offsets the page content 100 pixels from the bottom and 50 pixels from the right.

You can apply absolute positioning to place an element at exact coordinates on a page, independent of elements that came before it. The coordinates are determined relative to the box that encloses it. This allows you to precisely fit together boxes of text, images, and other content on a page, like a jigsaw puzzle.

Absolute positioning removes an object from the normal flow of page content. Its size and position have no effect on the position of content that follows it.

Use Absolute Positioning

1 Click inside the tag declaration and type position: absolute.

In this example, absolute positioning is applied to an image using an ID attribute. For more about using the ID attribute, see Chapter 10.

2 Click inside the tag declaration and type left: ?, replacing ? with the amount you want to offset the element from the left.

In this example, the image is offset to the left of several paragraphs of text.

3 Click inside the tag declaration and type top: ?, replacing ? with the amount you want to offset the element from the top.

4 Type ID="?" inside the HTML tag to apply the style, replacing ? with the ID name.

• The Web browser displays the element with offsets applied.

The element is offset relative to the enclosing box, which in this example is the browser window.

In this example, the paragraphs are narrowed using a width style to make space for the image on the right.

Tip

How can I apply absolute positioning to an image and a caption?

You can apply absolute positioning to both an image and caption text by surrounding the content with DIV tags. Use the following steps:

1 Define the custom style for the DIV tag.

For details, see Chapter 10.

2 Type the HTML for the image and the caption.

3 Before the image and caption, type <DIV ID=" ?">, replacing ? with the ID name.

4 Following the image and caption text, type </DIV>.

You can apply fixed positioning to place an element at exact coordinates on a page and have it remain fixed while a viewer scrolls. This is one way to keep navigation links visible as visitors view content on a long page.

You can also fix content on your Web pages by putting it in a frame. See Chapter 8 for more about frames.

Use Fixed Positioning

1 Click inside the tag declaration and type position: fixed.

In this example, fixed positioning is applied to a box of navigation links using a DIV tag and an ID attribute.

Click inside the tag declaration and type left: ?, replacing ? with the amount you want to offset the element from the left.

3 Click inside the tag declaration and type top: ?, replacing ? with the amount you want to offset the element from the top.

4 Type ID="?" inside the HTML tag to apply the style, replacing ? with the ID name.

In this example, navigation links are fixed to the left of several paragraphs of text. The paragraphs are shifted to the right using relative positioning.

The Web browser displays the element with offsets applied.

The element is offset relative to the enclosing box, which in this example is the browser window.

5 Click and drag the scroll bar to scroll down the page.

• The fixed content stays in the same place while the rest of the page content moves.

Tip

How can I ensure that as many browsers as possible display my fixed content correctly?

Some earlier versions of Web browsers, such as Internet Explorer 6, do not support fixed positioning. Later versions of Internet Explorer support it, but only if the page has a document type set to strict. Use the following steps to set the document type:

1 Insert a new line before the <HTML> tag.

2 Type the HTML strict document type:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/REC-html4/strict.dtd">

You can control the margins of your Web page elements using the margin properties. You can set margin values for the top, bottom, left, and right margins around a Web page element.

You can set margin sizing using points (pt), pixels (px), millimeters (mm), centimeters (cm), inches (in), picas (pc), x-height (ex), or em.

Set Margins

1 Click inside the tag declaration and type margin- ?: and a space, replacing ? with the margin you want to adjust (top, bottom, left, or right).

2 Type a value for the margin spacing.

Typing margin: and then a spacing value adds that spacing around all sides of an element.

The Web browser assigns margins to the Web page element.

• In this example, margins are assigned to the paragraphs on a page.

In this example, borders are turned on. Margin spacing exists outside an element's border.

You can use the padding property to add space around a Web page element. Adding padding can be useful for making text elements readable when they abut one another in a page layout.

You can specify padding in points (pt), pixels (px), millimeters (mm), centimeters (cm), inches (in), picas (pc), x-height (ex), or em.

Add Padding

1 Click inside the tag declaration and type padding: and a space.

2 Type a value for the spacing.

To add padding to just one side, you can type padding- ?:, replacing ? with top, bottom, left, or right.

The Web browser uses the assigned padding for the element to which the tag is applied.

In this example, padding is assigned to the paragraphs on a page.

In this example, borders are turned on. Padding spacing exists inside an element's border.

You can use the float property to control how text wraps around the elements on your Web page. The left value controls the left side of an element, and the right value controls the right side of an element. To ensure proper text wrapping, place the floating element right before the text you want to wrap.

The float property does not work with elements for which you have assigned an absolute or fixed position.

Wrap Text around Elements

1 Click inside the tag declaration you want to control and type float: and a space.

2 Type left to set the element to the left side of the text, or type right to set the element to the right side of the text.

The Web browser floats the element as directed.

• In this example, the <IMG> elements float to the right of the headings and paragraphs.

Margins have been added to the <IMG> elements to separate them from the text.

You can control the vertical positioning of elements on your page using the vertical-align property. You can choose from six vertical alignments: baseline, text-top, text-bottom, middle, top, and bottom.

Change Vertical Alignment

1 Click inside the tag declaration and type vertical-align: ?, replacing ? with the vertical alignment option you want to assign (baseline, text-top, text-bottom, middle, top, or bottom).

The Web browser displays the element using the assigned vertical alignment.

• In this example, an image is vertically aligned so that it sits at the baseline of the text.

You can use style-sheet rules to create a fixed-width layout that is centered in the browser window. The layout places equal spacing on the left and right sides of the content.

Create a Centered Layout

1 In the declaration for the BODY tag, type text-align: center.

2 Create an ID style for a DIV tag by typing DIV# ? {}, replacing ? with a unique name.

3 Inside the ID style declaration, type margin: 0 auto;. This centers the page content.

4 Type text-align: left;.

5 Type width: ?, replacing ? with a measurement value. This sets the width of your page content.

6 After the <BODY> tag in your HTML document and before the main page content, type <DIV>.

7 Inside the <DIV> tag, type the attribute ID=" ?", replacing ? with the ID style name from step 2.

8 After the main page content and before the </BODY> tag, type </DIV>.

The Web browser displays the content in a fixed-width style in the center of the window.

Tip

How can I make my page content flush with the edges of the browser window using CSS?

By default, Web browsers add some space between page content and the edge of the browser window. To remove this space using style sheets, follow these steps:

1 Create a style declaration for the BODY tag.

2 Add the style rule margin: 0px to the declaration.

The Web browser removes the space between the page content and the edges of the browser window.

You can use style sheets to overlap elements on your pages by positioning them at similar coordinates. You can then control the stack order of those elements by adjusting the z-index property for each element. An element with a higher z-index value appears above an element with a lower z-index value.

See the section "Use Absolute Positioning" for more about setting the coordinates of a page element.

Control the Overlap of Elements

1 Create ID styles for the overlapping elements.

2 Use absolute positioning to arrange the elements on the page.

3 Apply the ID styles to the elements by typing ID=" ?" inside the HTML tags, replacing ? with the ID names.

In this example, two images are overlapped.

4 Inside the ID style declaration for the element you want on the bottom, type z-index: ?, replacing ? with a number.

5 Inside the ID style declaration for the element you want on top, type z-index: ?, replacing ? with a number greater than the number in step 4.

The Web browser displays content in the stack order determined by the z-index values.

• In this example, the image with the z-index of 1 is on the bottom.

• The image with the z-index of 2 is on top.

Tip

How can I make an element transparent so that elements below it show through?

You can make content on your Web page transparent by changing its opacity. Note that different browsers recognize different style sheet commands for changing opacity. Use the following steps:

1 Create a style rule for the element you want to make transparent.

2 Type filter: alpha(opacity=?, replacing ? with a value from 0 to 100. The filter property works in Internet Explorer.

3 Type opacity: ?, replacing ? with a fractional number from 0.0 to 1.0. The opacity property works in other popular browsers.

The Web browser turns the element transparent, allowing elements below it to show through.

You can use the display property in your CSS to determine whether or not an element in your HTML is displayed on the page. When the display property is set to none, the Web browser hides the element and takes it out of the flow of the Web page.

Generally this feature is used in conjunction with JavaScript code, which can make an element appear in response to a user action such as a hyperlink click. JavaScript can turn on an element by dynamically changing the value of the display property. See Chapter 13 for details.

Hide an Element

1 Type the HTML for the element you want to hide.

In this example, one of three photos on a page will be hidden.

2 Type IMG# ? { }, replacing ? with a name for the style that will hide the element.

3 Inside the CSS brackets, type display: none.

4 Type the attribute ID="?" for the element you want to hide, replacing ? with the style name from step 2.

The Web browser hides the element.

Tip

What other values does the display property accept?

The display property can accept a number of values, but only two are commonly supported across all of the currently popular browsers. A block value creates a block-level element, which means the element is added to the page with line breaks above and below it. An inline value creates an element that can sit within the text of a sentence, similar to how a SPAN tag works. For more about the SPAN tag, see Chapter 10.

What is the visibility property?

The visibility property is similar to the display property in that it renders an element invisible. However, the visibility property does not remove the area that would normally be occupied by the element. For example, hiding an image using the visibility property leaves a blank rectangular area on the page.

You can place an image as a background on your Web page and control how the image repeats using style sheets. You can make it repeat horizontally to create a border across the top of your page, or you can make it repeat vertically to create a border down the left side.

A background image normally repeats both horizontally and vertically to fill the entire page.

Customize a Background Image

1 Place the image you want to use as your background in the same directory as your HTML file.

2 Type BODY { } to create a style rule for the BODY HTML tag.

3 To insert the image as a background, type background-image: url(' ?'),, replacing ? with the image file name.

4 To control how the image repeats, type background-repeat: ?, replacing ? with repeat, repeat-x, repeat-y, or no-repeat.

The repeat-x value tiles the image horizontally, while repeat-y tiles the image vertically.

The repeat value, which is the default, tiles the image in both directions.

The no-repeat value displays the image once.

• The Web browser displays the image as a background with the specified repeat style.

Tip

How do I create a background image that appears once in the center of my page?

You can assign a no-repeat value to the background-repeat property to place the image once in the background. Then you can specify the location of the image using the background-position property. A center center value places the image in the center of the Web page. You can use percentage values to place the image relative to the entire height and width of the window or numeric values to place it at pixel coordinates. The first value is always the horizontal position, while the second value is the vertical.

How do I keep a background image from scrolling with the page?

To control whether or not your background image scrolls with the page content, you can assign a background-attachment property. Assigning the scroll value, which is the default, allows the background image to scroll, while fixed keeps the background image fixed as the page content moves. This feature works with the different repeat and positioning settings described in this task.