Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 30th of September 2014 09:51:00 PM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width and font-size of the element itself, not the parentelement.

Figure 8-61

Figure 8-61. Assigning the line-height property to inline elements

It's important to keep these sorts of things in mind whenyou're trying to do things like add borders to an inlineelement. Let's say you want to put 5-pixel borders around anyhyperlink:

A:link {border: 5px solid blue;}
border-color, not to mention border itself. CSS2 adds a even more border properties, most of which are aimed at giving the author even more specific control of the borders. Before, it was difficult to set a specific color or style for a given side of the border, except through properties like border-left, and that could require more than one value. The new CSS2 properties address this, and their names are pretty self-explanatory:


Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

XML is web enabled

XML is derived from SGML, and so was HTML. So in essence, the current infrastructure available today to deal with HTML content can be re-used to work with XML. This is a very big advantage towards delivering XML content using the software and networking infrastructure already in place today. This should be a big plus in considering XML for use in any of your projects, because XML naturally lends itself to being used over the web.

Even if clients don't support XML natively, it is not a big hindrance. In fact, Java with Servlets (on the server side) can convert XML with stylesheets to generate plain HTML that can be displayed in all web browsers.

Using XML to pass parameters and return values on servers makes it very easy to allow these servers to be web-enabled. A thin server side Java layer might be added that interacts with web browsers using HTML and translates the requests and responses from the client into XML, that is then fed into the server.

XML is totally extensible

Figure 7-56

Figure 7-56. Padding applied to an H1 element

On the other hand, we might want H1 elements to have uneven padding and H2 elements to have regular padding, as shown in Figure 7-57:

H1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */
H2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */
Figure 7-57

Figure 7-57. Uneven padding

It's a little tough to see the padding, though, so let's add a background color, as shown in Figure 7-58:figures in this chapter was generated with a web browser. This is something of a statement about the reliability and consistency of positioning implementations at the time of this writing: not one of them was solid enough to trust completely. It was actually easier to draw theoretical examples by hand than to take screenshots in web browsers and then retouch them in Photoshop.

This is also why this chapter is largely (but not entirely) free of browser warnings and caveats. Rather than drown the explanatory text in side notes, we have chosen to simply describe positioning as it is