CSS master course

As you can see from the output in our page, the handheld style sheet that you wrote for this example does much to emulate the look and feel you observed in our page, where the Opera small screen technology adjusted the styles of the page automatically. In this example, a handheld style sheet, which overrides automatic formatting, is explicitly provided. Handheld devices have tiny screens, so formatting features such as fixed-width, positioning, and the various textual effects aren’t as effective when viewed on a small screen. These types of effects more often than not cause the user to have to scroll horizontally to view the content. Additionally, the number of colors available on a handheld device is limited, which makes a barebones design that presents only the necessary information the most effective. If you recall from previous posts, a web-safe color pallet exists for devices with limited color display capabilities (think shorthand hexadecimal colors = web-safe pallet), but for some devices, even the web-safe pallet may be too much. Keep in mind that most handheld devices are capable of displaying around 256 colors, some even less than that. This is one area where the device emulator is very useful. Be sure to check colors using the emulator for your target device to ensure that the colors you have chosen will display properly.

If a handheld style sheet is not present, the Opera browser uses a special proprietary formatting to control presentation for handheld devices. The best way to observe how Opera changes formatting using the Small Screen feature is to visit a website that does not have a handheld style sheet defined. Whereas Opera reformats the page to completely remove any horizontal scrolling, this built-in rendering for handheld devices is overridden by the presence of a handheld style sheet. Opera also limits the CSS properties available in handheld mode. A complete table of the CSS features supported in the handheld version of Opera is available at www.opera.com/docs/specs/css/.

This blog will present some important CSS properties used to control positioning. Positioning, like the box model presented in Chapter 10, is a cornerstone of CSS development. In this chapter you learned the following:

The position property is used to specify different types of positioning for an element.
By default, elements are positioned statically.
Absolutely positioned elements can be positioned in a specific place in a document, or positioned relative to the borders of the browser window or relative to the borders of a specific element.
The four offset properties, top, right, bottom, and left are used to precision position any positioned element, with the exception of statically positioned elements.
Relative positioned elements do not leave the flow of text. The position of a relatively positioned element can be fine-tuned by providing offset properties. Relative positioning can be used to cause a descendant absolutely-positioned element to position relative to its relatively positioned parent.
Fixed positioning is similar to absolute positioning, except that elements with fixed positioning are always positioned relative to the view port and remain fixed in that position when the user scrolls the page.