Learning Web Design Third Edition- P29 pot

Part III: CSS for Presentation 266 Padding scroll When scroll is specified, scrollbars are added to the element box to let users scroll through the content. Be aware that when you set the value to scroll, the scrollbars will always be there, even if the content fits in the specified height just fine. auto The auto value allows the browser to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn’t fit and they are needed. Padding Padding is the space between the content area and the border (or the place the border would be if one isn’t specified). I find it helpful to add a little padding to elements when using a background color or a border. It gives the content a little breathing room, and prevents the border or edge of the back- ground from bumping right up against the text. You can add padding to the individual sides of any element (block-level or inline). There is also a shorthand padding property that lets you add padding on all sides at once. padding-top, padding-right, padding-bottom, padding-left Values: length measurement | percentage | auto | inherit Default: auto Applies to: all elements Inherits: no padding Values: length measurement | percentage | auto | inherit Default: auto Applies to: all elements Inherits: no With the padding-top, padding-right, padding-bottom, and padding-left properties, you can specify an amount of padding for each side of an element as shown in this example and Figure 14-5 (note that I’ve also added a back- ground color to make the edges of the padding area apparent). 3em 3em 1em 1em Figure 14-5. Adding padding around an element. blockquote { padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; background-color: #D098D4; } Padding Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins) 267 You can specify padding in any of the CSS length units (see the At a Glance sidebar for a refresher) or as a percentage of the width of the parent element. Yes, the width is used as the basis even for top and bottom padding, and if the width of the parent element should change, so will the padding values on all sides of the child element. The shorthand padding property As an alternative to setting padding one side at a time, you can use the short- hand padding property to add padding all around the element. The syntax is kind of interesting; you can specify four, three, two, or one value for a single padding property. Let’s see how that works, starting with four values. When you supply four padding values, they are applied to each side in clockwise order, starting at the top. Some people use the mnemonic device “TRouBLe” for the order Top, Right, Bottom, Left. { padding: top right bottom left; } Using the padding property, we could reproduce the padding specified with the four individual properties in the previous example like this: blockquote { padding: 1em 3em 1em 3em; background-color: #D098D4; } If the left and right padding are the same, you can shorten it by supplying only three values. The value for “right” (the second value in the string) will be mirrored and used for “left” as well. It is as though the browser assumes “left” value is missing, so it just uses the “right” value on both sides. The syntax for three values is as follows: { padding: top right/left bottom; } This rule would be equivalent to the previous example because the padding on the left and right edges of the element should be set to 3em. blockquote { padding: 1em 3em 1em; background-color: #D098D4; } Continuing with this pattern, if you provide only two values, the first one is used for the top and the bottom edges, and the second one is used for the left and right edges: { padding: top/bottom right/left; } Again, the same effect achieved by the previous two examples could be accomplished with this rule. blockquote { padding: 1em 3em; background-color: #D098D4; } The CSS units of measurement are: Relative units: em Em = font size ex Ex = height of “x” px Pixel Absolute units: pt Point pc Pica in Inches mm Millimeters cm Centimeters A t A G l A n c e The CSS units of measurement are: Relative units: em Em = font size ex Ex = height of “x” px Pixel Absolute units: pt Point pc Pica in Inches mm Millimeters cm Centimeters A t A G l A n c e Shorthand Values 1 value padding: 10px; Applied to all sides. 2 values padding: 10px 6px; First is top and bottom; Second is left and right. 3 values padding: 10px 6px 4px; First is top; Second is left and right; Third is bottom. 4 values padding: 10px 6px 4px 10px; Applied clockwise to top, right, bottom, and left edges consecutively (TRBL). A t A G l A n c e Shorthand Values 1 value padding: 10px; Applied to all sides. 2 values padding: 10px 6px; First is top and bottom; Second is left and right. 3 values padding: 10px 6px 4px; First is top; Second is left and right; Third is bottom. 4 values padding: 10px 6px 4px 10px; Applied clockwise to top, right, bottom, and left edges consecutively (TRBL). A t A G l A n c e Part III: CSS for Presentation 268 Padding Note that all of the previous examples have the same visual effect as shown in Figure 14-5. Finally, if you provide just one value, it will be applied to all four sides of the element. This declaration applies 15 pixels of padding on all sides of a div element. div#announcement { padding: 15px; border: 1px solid; } Padding doesn’t need to be so conservative or symmetrical. You can use pad- ding to dramatic effect for pushing content around inside its own border or colored background. The examples in Figure 14-6 are a little more “out there” and may give you a different perspective on how padding can be used. padding: 10px 33%; padding: 10px 10px 10px 50%; padding: 100px 10px 10px 100px; padding: 100px 5px; Figure 14-6. Extreme padding. padding: 10px 33%; padding: 10px 10px 10px 50%; padding: 100px 10px 10px 100px; padding: 100px 5px; Figure 14-6. Extreme padding. exercise 14-1 | Adding a little padding In this exercise, we’ll use basic box properties to improve the appearance of a fictional shopping site, JenWARE.com. I’ve given you a big headstart by marking up the source document and creating a style sheet that handles text formatting and backgrounds. The document, jenware.html, is available in the materials directory (www.learningwebdesign.com/materials). Figure 14-7 shows before and after shots of the JenWARE home page. It’s going to take a few steps to get this page into presentable shape, and padding is just the beginning. Figure 14-7. Before and after shots of the JenWARE home page. Borders Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins) 269 Borders A border is simply a line drawn around the content area and its (optional) padding. Thankfully, it doesn’t have to be as boring as that last sentence makes it sound. You can choose from eight border styles and make them any width and color you like. You can apply the border all around the element or just a particular side or sides. You can even apply different border styles to sides of the same element. We’ll start our border exploration with the various border styles. Border style The style is the most important of the border properties because, according to the CSS specification, if there is no border style specified, the border does Start by opening jenware.com in a browser and a text editor to see what you’ve got to work with. The document has been divided into three div elements (“intro,” “testimonials,” and “products”). Background colors have been added to the body , testimonials, and products sections. There is also a horizontally repeating background image along the top of the body that creates the gradient (color fade) at the top of the page, and an exclamation point image in the top-left corner of the testimonials section. The remaining rules are for formatting text. The first thing we’ll do is add padding to the “products” div . Two ems of padding all around ought to be fine. Find the #products selector and add the padding declaration. #products { padding: 2em; background-color: #FFF; line-height: 2em; } Next, we’ll get a little fancier with the “testimonials” section. I want to clear some space in the left side of the div so that my nifty exclamation point background image is visible. There are several approaches to applying different padding amounts to each side, but I’m going to do it in a way that gives you practice at deliberately overriding earlier declarations. Use the padding shorthand property to add 1 em of padding on all sides of the testimonials div . Then write a second declaration that adds 60 pixels of padding to the left side only. Because the padding-left declaration comes second, it will override the 1em setting applied with the padding property. #testimonials { padding: 1em; padding-left: 60px; background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top; line-height: 1.2em; } Save your work and look at it in the browser. The testimonials and product descriptions should look a little more comfortable in their boxes. Figure 14-8 highlights the padding additions. 1. 2. 3. 4. 1em 60px 1em 2em 2em Figure 14-8. The pink area indicates padding added to the testimonials section. Blue indicates the products section padding. 1em 60px 1em 2em 2em Figure 14-8. The pink area indicates padding added to the testimonials section. Blue indicates the products section padding. Part III: CSS for Presentation 270 Borders not exist. In other words, you must always declare the style of the border, or the other border properties will be ignored. Border styles can be applied one side at a time or by using the shorthand border-style property. border-top-style, border-right-style, border-bottom-style, border-left-style Values: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Default: none Applies to: all elements Inherits: no border-style Values: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Default: none Applies to: all elements Inherits: no The value of the border-style properties is one of nine keywords describing the available border styles, as shown in Figure 14-9. Figure 14-9. The available border styles (shown at the default medium width) . You can use the side-specific border style properties (border-top-style, border-right-style, border-bottom-style, and border-left-style) to apply a style to one side of the element. If you do not specify a width, the default medium width will be used. If there is no color specified, the border uses the foreground color of the element (same as the text). In the following example, I’ve applied a different style to each side of an ele- ment to show the single-side border properties in action (Figure 14-10). WA R N I N G There is a bug in Internet Explorer 6 for Windows that causes borders specified as dotted to render as dashed. WA R N I N G There is a bug in Internet Explorer 6 for Windows that causes borders specified as dotted to render as dashed. Borders Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins) 271 div#silly { border-top-style: solid; border-right-style: dashed; border-bottom-style: double; border-left-style: dotted; width: 300px; height: 100px;} The border-style shorthand property works on the clockwise (TRouBLe) system described for padding earlier. You can supply four values for all four sides or fewer values when the left/right and top/bottom borders are the same. The silly border effect in the previous example could also be specified using the border-style property as shown here, and the result would be the same as shown in Figure 14-10. border-style: solid dashed double dotted; Border width (thickness) Use one of the border width properties to specify the thickness of the border. Once again, you can target each side of the element with a single-side prop- erty, or specify several sides at once in clockwise order with the shorthand border-width property. border-top-width, border-right-width, border-bottom-width, border-left-width Values: length units | thin | medium | thick | inherit Default: medium Applies to: all elements Inherits: no border-width Values: length units | thin | medium | thick | inherit Default: medium Applies to: all elements Inherits: no The most common way to specify the width of borders is using a pixel mea- surement; however, you can also specify one of the keywords (thin, medium, or thick) and leave the rendering up to the browser. I’ve included a mix of values in this example (Figure 14-11). Notice that I’ve also included the border-style property because if I didn’t, no border would render at all. div#help { border-top-width: thin; border-right-width: medium; border-bottom-width: thick; border-left-width: 12px; border-style: solid; width: 300px; height: 100px; } Figure 14-10. Border styles applied to individual sides of an element. Figure 14-10. Border styles applied to individual sides of an element. Part III: CSS for Presentation 272 Borders or div#help { border-width: thin medium thick 12px; border-style: solid; width: 300px; height: 100px; } 12px thin thick medium Figure 14-11. Specifying the width of borders. Border color Border colors are specified in the same way: using the side-specific properties or the border-color shorthand property. When you specify a border color, it overrides the foreground color as set by the color property for the element. border-top-color, border-right-color, border-bottom-color, border-left-color Values: color name or RGB value | transparent | inherit Default: the value of the color property for the element Applies to: all elements Inherits: no border-color Values: color name or RGB value | transparent | inherit Default: the value of the color property for the element Applies to: all elements Inherits: no You know all about specifying color values, and you should be getting used to the shorthand properties as well, so I’ll keep this example short and sweet (Figure 14-12). Here, I’ve provided two values for the shorthand border-color property to make the top and bottom of a div maroon and the left and right sides aqua. div#special { border-color: maroon aqua; border-style: solid; border-width: 6px; width: 300px; height: 100px; } N ot e CSS2 added the transparent keyword value for border colors that allows the background of the parent to show through the border, yet holds the width of the border as specified. This may be useful when creating rollover (:hover) effects with CSS because the space where the border will appear is maintained when the mouse is not over the element. Unfortunately, the transparent value is not supported by Internet Explorer for Windows (versions 6 and earlier). Support in IE7 is not yet documented as of this writing, so you’ll have to test it out yourself. N ot e CSS2 added the transparent keyword value for border colors that allows the background of the parent to show through the border, yet holds the width of the border as specified. This may be useful when creating rollover (:hover) effects with CSS because the space where the border will appear is maintained when the mouse is not over the element. Unfortunately, the transparent value is not supported by Internet Explorer for Windows (versions 6 and earlier). Support in IE7 is not yet documented as of this writing, so you’ll have to test it out yourself. Borders Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins) 273 Figure 14-12. Specifying the color of borders. Combining style, width, and color The authors of CSS didn’t skimp when it came to border shortcuts. They also created properties for providing style, width, and color values in one declara- tion. Again, you can specify the appearance of specific sides, or use the border property to change all four sides at once. border-top, border-right, border-bottom, border-left Values: border-style border-width border-color or inherit Default: defaults for each property Applies to: all elements Inherits: no border Values: border-style border-width border-color or inherit Default: defaults for each property Applies to: all elements Inherits: no The values for border and the side-specific border properties may include style, width, and color values in any order. You do not need to declare all three, but keep in mind that if the border style value is omitted, no border will render. The border shorthand property works a bit differently than the other short- hand properties that we covered in that it takes one set of values and always applies them to all four sides of the element. In other words, it does not use the clockwise, “TRBL” system that we’ve seen with other shorthand properties. Here is a smattering of valid border shortcut examples to get an idea for how they work. h1 { border-left: red .5em solid; } left border only h2 { border-bottom: 1px solid; } bottom border only p.example { border: 2px dotted #663; } all four sides Now it is time to try your hand at borders. Exercise 14-2 will not only give you some practice, but it should also give you some ideas on the ways borders can be used to add graphic interest to CSS-based page designs. Part III: CSS for Presentation 274 Borders exercise 14-2 | Border tricks In this exercise, we’ll have some fun with borders on the JenWARE home page. In addition to putting subtle borders around content sections on the page, we’ll use borders to beef up the product headlines and as an alternative to underlines under links. Open jenware.html in a text editor if it isn’t already. We’ll start simple by using the shorthand border property to add an orange (#F26521) dashed rule around the testimonials section. Add the new declaration to the rule for the “testimonials” div . #testimonials { border: 1px dashed #F26521; padding: 1em; padding-left: 60px; background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top; line-height: 1.2em; } Next, add a double rule around the “products” area that is an even lighter orange (#FFBC53) so as not to call too much attention to itself. #products { border: double #FFBC53; padding: 2em; background-color: #FFF; line-height: 2em; } Just for fun (and practice), we’ll add decorative borders on two sides of the headlines in the products section. I want the borders to be the same color as the text, so we don’t need to specify the border-color . Find the existing rule for h2 elements in the “products” div , and add a declaration that adds a 1-pixel solid rule on the top of the headline. Add another declaration that adds a thicker, 3- pixel solid rule on the left side. Finally, to prevent the text from bumping into that left border, we can add a little bit of padding (1em) to the left of the headline content. #products h2 { border-top: 1px solid; border-left: 3px solid; padding-left: 1em; font-size: 1.2em; color: #921A66; } The last thing we’ll do is replace the standard text underline under links with a decorative bottom border. You will find that there are already rules in the style sheet for changing the colors of the four link states. Start by turning the underline off for all of the link states by setting the text-decoration to none in each of the rules. text-decoration: none; Next, add a 1-pixel dotted border to the bottom edge of each state by adding this declaration to each link rule: border-bottom: 1px dotted; 1. 2. 3. 4. Subtle Outlines Keeping the color of the rule close to the background color and keeping the width of the rule quite thin, we can achieve a very subtle effect, creating a texture more than a strong outline. D e S I G n t I P Subtle Outlines Keeping the color of the rule close to the background color and keeping the width of the rule quite thin, we can achieve a very subtle effect, creating a texture more than a strong outline. D e S I G n t I P Bottom Borders Instead of Underlines Turning off link underlines and replacing them with a custom bottom border is a common design technique in modern web design. It lightens the look of links while still making them stand out from ordinary text. D e S I G n t I P Bottom Borders Instead of Underlines Turning off link underlines and replacing them with a custom bottom border is a common design technique in modern web design. It lightens the look of links while still making them stand out from ordinary text. D e S I G n t I P N ot e Internet Explorer 6 users will see dashed borders instead of dotted borders under links due to buggy support for the dotted keyword. N ot e Internet Explorer 6 users will see dashed borders instead of dotted borders under links due to buggy support for the dotted keyword. Margins Chapter 14, Thinking Inside the Box (Padding, Borders, and Margins) 275 Margins The last remaining component of an element is its margin, which is an optional amount of space that you can add on the outside of the border. Margins keep elements from bumping into one another or the edge of the browser window. You can even use margins to make space for another column of content (we’ll see how that works in Chapter 16, Page Layout with CSS). In this way, margins are an important tool in CSS-based page layout. The side-specific and shorthand margin properties work much like the pad- ding properties we’ve looked at already, however, margins have some special behaviors to be aware of. margin-top, margin-right, margin-bottom, margin-left Values: length measurement | percentage | auto | inherit Default: auto Applies to: all elements Inherits: no Notice that because we want the border to have the same color as the links, we do not need to specify a color. However, if you try this on your own pages, you can easily change the color and style of the bottom border. As is often the case when you add a border to an element, it is a good idea to also add a little padding to keep things from bumping together. Add some padding to the bottom edges only, like so: padding-bottom: .25em; I’m noticing that there are a lot of redundant declarations here, and although it isn’t necessary, let’s take the time to condense our style sheet by grouping the selectors for these underline effects, then use separate rules to change only the colors (and background for the :hover state) . The final links section of the style sheet should look like this: a:link, a:visited, a:hover, a:active { text-decoration: none; border-bottom: 1px dotted; padding-bottom: .25em; } a:link, a:active { color: #CC0000; } a:visited { color: #921A66; } a:hover { background-color: #FCF191; color: #921A66; } See Figure 14-3 for what the page looks like. Figure 14-13. The results of our border additions. . and backgrounds. The document, jenware.html, is available in the materials directory (www.learningwebdesign.com/materials). Figure 14-7 shows before and after shots of the JenWARE home page off link underlines and replacing them with a custom bottom border is a common design technique in modern web design. It lightens the look of links while still making them stand out from ordinary. off link underlines and replacing them with a custom bottom border is a common design technique in modern web design. It lightens the look of links while still making them stand out from ordinary