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.