Cascading style sheets the definitive guide 2nd edition pdf

It explores in detail each individual CSS property and how it interacts with other properties, and shows how to avoid common mistakes in interpretation. Learn algorithms for solving classic computer science problems with this concise guide covering everything from fundamental …. Distributed systems have become more fine-grained as organizations shift from code-heavy monolithic applications to smaller, self-contained ….

Data is at the center of many challenges in system design today. Difficult issues need to …. Skip to main content. Start your free trial. Buy on Amazon. The result is that, on many Macintosh-based web browsers, any point value will be equivalent to the same length in pixels: 24pt text will be 24 pixels tall, and 8pt text will be 8 pixels tall. This is, unfortunately, just slightly too small to be legible.

Figure illustrates the problem. The Mac display problem is an excellent example of why points should be strenuously avoided when designing for the Web. Ems, percentages, and even pixels are all preferable to points where browser display is concerned.

This last option works similarly to the Windows setting described above, where you use a sliding scale to compare to a ruler and thus get an exact match between your monitor and physical-world distances. No matter what the circumstances, a paragraph will have a half-inch top margin, regardless of font size or anything else. Absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common.

Relative units are so called because they are measured in relation to other things. In addition, for some relative units, their size is almost always relative to the element that uses them and will thus change from element to element.

There are three relative length units: em , ex , and px. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels. Obviously, this value can change from element to element. For example, given an h1 whose font is 24 pixels in size, an h2 element whose font is 18 pixels in size, and a paragraph whose font is 12 pixels in size, if you set the left margin of all three at 1em , they will have left margins of 24 pixels, 18 pixels, and 12 pixels, respectively:.

When setting the size of the font, on the other hand, the value of em is relative to the font size of the parent element, as illustrated by Figure Therefore, if you have two paragraphs of text in which the text for each is 24 points in size, but each paragraph uses a different font, then the value of ex could be different for each paragraph.

This is because different fonts have different heights for x, as you can see in Figure A few browsers, including Internet Explorer 5 for Mac, actually attempt to determine the x-height of a given font by internally rendering a lowercase x and counting pixels to determine its height compared to the font-size value used to create the character.

We CSS practitioners hope that, as time goes on, more user agents will start using real values for ex and the half-em shortcut will fade into the past. On the face of things, pixels are straightforward. Each box is a pixel.

If you define an element to be a certain number of pixels tall and wide, as in the following markup:. Unfortunately, as with all things, there is a potential drawback to using pixels. If you set font sizes in pixels, then users of Internet Explorer for Windows through IE6 the current release as of this writing cannot resize the text using the Text Size menu in their browser.

This can be a problem if your text is too small for a user to comfortably read. If you use more flexible measurements, such as em , the user can resize text. Those who are exceedingly protective of their design might call that a drawback, of course. On the other hand, pixel measurements are perfect for expressing the size of images, which are already a certain number of pixels tall and wide.

In fact, the only time you would not want pixels to express the size of images is if you want them scaled along with the size of the text. This is an admirable and occasionally useful approach, and one that would really make sense if you were using vector-based images instead of pixel-based images. With the adoption of Scalable Vector Graphics, look for more on this in the future.

So why are pixels defined as relative lengths? However, how many of those boxes equals one inch? This may seem like a non sequitur, but bear with me for a moment.

In other words, the printing code has to figure out how many dots there are in a pixel, and to do so, it may use the 96ppi reference pixel. One example of problems with pixel measurements can be found in an early CSS1 implementation. In Internet Explorer 3.

Because of this potential for rescaling, pixels are defined to be a relative unit of measurement, even though, in web design, they behave much like absolute units. Given all the issues involved, the best measurements to use are probably the relative measurements, most especially em , and also px when appropriate.

If more user agents support real x-height measurements, ex might come into its own. In general, ems are more flexible because they scale with font sizes, so elements and element separation will stay more consistent. Other element aspects may be more amenable to the use of pixels, such as borders or the positioning of elements.

It all depends on the situation. For example, in designs that would have traditionally used spacer GIFs to separate pieces of a design, pixel-length margins will produce an identical effect.