Css Tutorial : Adding Child Divs

The container div can act as parent to child divs. Here, an ID holds a reusable class called box:
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
The CSS rules for the box class are almost the same as that for the parent container, except
for the background color, which will appear by default. Note that, as no set width is defined for
the box, it will stretch to fit whatever contains it, be that another div or the browser window:
/* Define styling of our reusable box */
.box {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}

Css Tutorial : Adding a Div

You create a division element within the (X)HTML by placing the following in the body:
<div>
<p>This is our content area.</p>
</div>
The result is a hook to which CSS can be applied. In Chapter 2, you learned about using IDs
and classes to add identifiers to a standard (X)HTML element. The same formula is used for
divs by referencing the selector in the opening tag using id="name" or class="name". In this
case, we’ve used an ID named container to define the division:
<div id="container">
<p>This is our content area.</p>
</div>
Let’s apply some simple CSS to the container ID:
/* Container holds all visible page elements */
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
With this CSS applied to our markup, the container will have a gray background with a
black border, and any elements it contains will be padded 20px from that border, as you can see
in Figure 3-1.

Adding styles to forms

Form fields can be styled, enabling you to get away from the rather clunky default look
offered by most browsers. Although the default appearance isn’t very attractive, it does
make obvious which elements are fields and which are buttons. Therefore, if you choose
to style forms in CSS, ensure that the elements are still easy to make out.
A simple, elegant style to apply to text input fields and text areas is as follows:
.formField {
border: 1px solid #333333;
background-color: #dddddd;
padding: 2px;
}
In HTML, you need to add the usual class attribute to apply this rule to the relevant element(
s):
<input class="formField" tabindex="11" type="text" id="realname"
å name="realname" size="30" />
This replaces the default 3D border with a solid, dark gray border, and it also sets the
background color as a light gray, thereby drawing attention to the form input fields. Note
that browsers that support :hover and :focus on more than just anchors can have these
states styled with different backgrounds, thereby providing further prompts. For example,
upon focusing a form field, you might change its background color, making it more obvious
that it’s the field in focus.
Because the border in the previous code is defined using a class, it can be applied to multiple
elements. The reason we don’t use a tag selector and apply this style to all input fields
is that radio buttons and check boxes look terrible with rectangular borders around them.
However, applying this style to the select element can work well.
Note that the background color in this example is designed to contrast slightly with the
page’s background color, but still provide plenty of contrast with any text typed into the
form fields; as always, pick your colors carefully when working with form styles.
The default Submit button style can be amended in a similar fashion, and padding can also
be applied to it. This is usually a good idea because it enables the button to stand out and
draws attention to the text within. Should you desire a more styled Submit button, you can instead use an image:
<input type ="image" src="submit.gif" height="20" width="100"
å alt="Submit form" />
Along with the fields and controls, it’s also possible to style the elements added in the previous
section “The label, fieldset, and legend elements.” The fieldset rule applies a
1-pixel dashed line around the elements grouped by the fieldset element, along with
adding some padding and a bottom margin. The legend rule amends the legend element’s
font and the padding around it, and sets the text to uppercase; it also adds a background
color so that the dotted line of the fieldset won’t be shown behind the legend text in
Internet Explorer. Note that not all browsers treat margins on legend elements in the same
way, so if you add a margin value, be sure to thoroughly test your page. The screenshot
that follows also includes the styles included in the default CSS document from the
basic-boilerplates folder.
fieldset {
border: 1px dashed #555555;
padding: 10px;
margin-bottom: 10px;
}
legend {
padding: 0 10px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background: #ffffff;
text-transform: uppercase;
}

A final style point worth bearing in mind is that you can define styles for the form itself.
This can be useful for positioning purposes (e.g., controlling the form’s width and its bottom
margin); the width setting can prove handy, since the fieldset border stretches to
the entire window width, which looks very odd if the form labels and controls take up only
a small area of the browser window. Reducing the form’s width to specifically defined
dimensions enables you to get around this. Alternatively, you can set a fixed width on the
fieldset itself (or float it, enabling you to display fieldsets side by side.
You can also color the form’s (or fieldset’s) background in addition to or instead of the
input fields, thereby making the entire form prominent. This is a device I’ve used on various
versions of the Snub Communications website’s contacts page, as shown in the following
screenshot.
Regardless of the form styles you end up using, be sure to rigorously test across browsers,
because the display of form elements is not consistent. Some variations are relatively
minor—you’ll find that defining values for font sizes, padding, and borders for input fields
doesn’t always result in fields of the same height, and that text fields and Submit buttons
don’t always align. A more dramatic difference is seen in versions of Safari prior to 3.0,
which ignore many CSS properties for forms, instead using the Mac OS X “Aqua” look and
feel—see the following screenshot for how the Snub Communications form looks in that
browser. Form functionality is not affected by this, but layouts can be.

Adding padding, margins, and backgrounds to a layout

1. Add a page background. In the add-starting-point folder, there are two images,
both of which are gradients. One is a black gradient, fading toward gray at its bottom
edge; this is intended for a page background. Add this by adding the following
rule to the style sheet (after the add your code below comment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-x value ensures that the background tiles horizontally only; the color
value #4d4d4d is the color of the bottom pixel of the gradient image, ensuring the
gradient seamlessly blends with the web page background.

2. Add a border to the wrapper. Amend the #wrapper rule to add a border around
the wrapper. Note that the wrapper in this example sits flush with the top edge of
the browser window view area, and so no top border is needed. That’s why the
border-top pair is added, overriding the previous rule for the top border only.
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}

3. Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div: Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div:

#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
}

4. Add some padding. Test the page now and you’ll see two major layout errors commonly
seen on the Web. First, the content hugs the edges of the div, which makes
it hard to read and also looks cluttered, despite the div being 600 pixels wide.
Secondly, the text at the bottom of the div is displayed over the gradient—it’s still
readable, but it looks a little messy. By adding padding (more to the bottom edge,
to account for the gradient), these issues are dealt with:
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}

Styling a table by Css : Adding borders to tables

As mentioned earlier, it’s a good policy to avoid using the default HTML table border. It
looks ugly and old-fashioned, and it’s a far cry from a clean, flat, 1-pixel border. You might
think it’s a straightforward process to add CSS borders to a table—logically, it makes sense
to simply add a border property/value pair to a grouped selector that takes care of both
the table headers and table data cells.
th, td {
border: 1px solid #c9c9c9;
}
But this doesn’t work. As the screenshot to the right shows, this method
results in the correct single-pixel border around the edge of the table,
but creates double-thick borders everywhere else. This is because the
borders don’t collapse by default, meaning that the right-hand border of
one cell sits next to the left-hand border of an adjacent cell, and so on.
Designers have historically gotten around this by using a rule to define a style for the top
and left borders of the table, and another to define a style for the right and bottom
borders of table cells. However, there’s a perfectly good property that
deals with the double-border syndrome: border-collapse. When this
property, with a value of collapse, is applied to the table element via an
element selector, borders collapse to a single border wherever possible.
The other available border-collapse property value, which reverts
borders back to their “standard” state, is separate.
table {
border-collapse: collapse;
}
With this brief explanation of table borders completed, we’ll now move into exercise
mode and style the table.

Adding a pop-up to an image

1. Create a container for the pop-up. Add the div shown following to the web page,
within the wrapper; the div will act as a container for the pop-up.
<div id="popupContainer">
</div>

2. Add the main image in the usual fashion, placing it inside the div created in step 1.
<img src="add-a-pop-up-image.jpg" alt="Landscape" width="500"
å height="375" />

3. Add a link and pop-up content. Surround the image with a dummy link, and then
add a span element immediately after the image. Within this, place the pop-up
content, which can contain text and even other images. Text can be styled within
inline elements (strong, em, and anchors, for example). In this example, the span
contains an image, which will be floated right, and some text (which is truncated
for space reasons—the completed version in the download files is longer). To
ensure that the floated image is “cleared,” making the span’s background appear
behind it once styled, a clearFix class is added to the span start tag, and an associated
CSS rule created (in step 10). More on this float-clearing technique, along
with floats and clears in general, is given in Chapter 7.
<a href="#"><img src="add-a-pop-up-to-an-image.jpg" alt="Landscape"
å width="500" height="375" /><span class="clearFix"><img
å src="add-a-pop-up-pop-up.jpg" alt="Winter shot" width="126"
å height="215" />
The text for the pop-up goes here…</span></a>
4. Set defaults. At this stage, the page content is displayed in a linear fashion—large
image followed by small image followed by text—so some CSS is now needed. In
the CSS document, add some padding to the existing body element, ensuring the
page content doesn’t hug the browser window edges when you’re testing the page.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

5. Give the images a border. Add the following rule to apply a thin gray border to the
images on the page.
img {
border: 1px solid #666666;
}

6. Define the pop-up area size. Add the following rule to define the size of the popup
area (the width setting defines its width and display: block stretches the
active area of the link to the size of its container—the image). The other settings
override link defaults, making the text within the div and anchor black and not
underlined.
#popupContainer a:link, #popupContainer a:visited {
position: relative;
display: block;
width: 500px;
text-decoration: none;
color: #000000;
}

7. Make the pop-up invisible. Add the following rule to make the pop-up initially not
display onscreen (i.e., outside of the viewing area of the browser).
#popupContainer a span {
position: absolute;
left: -10000px;
top: -10000px;
}

8. Style the span element. The following rule styles the span element during the
hover state. The display property value of block defines the pop-up as a blocklevel
element, rather than an inline one, while the position setting of relative
overrides that set in the previous step (as do the left and top values). The width
setting defines a width for the pop-up. The negative margin-top setting pulls the
pop-up upward, so it no longer sits under the main image. The value is the same
as the height of the main image minus the vertical offset required. (If it were set to
the height of the main image, the pop-up would sit flush to the top of the image
during the hover state, which looks cluttered.) The margin-left value provides a
horizontal offset, while the padding value places some padding within the span, so
its contents don’t hug its borders. The other settings style colors and fonts.
#popupContainer a:hover span, #popupContainer a:focus span,
å #popupContainer a:active span {
display: block;
position: relative;
left: 0;
top: 0;
width: 360px;
color: #000000;
font: 1.1em/1.5 Arial, Helvetica, sans-serif;
margin-top: -335px;
margin-left: 50px;
padding: 20px;
background-color: #e0e4ef;
border: 1px solid #666666;
}

9. Next, a rule is needed to float the image within the span. The margin settings
ensure that the image doesn’t hug the text-based content.
#popupContainer a:hover span img, #popupContainer a:focus span img,
å #popupContainer a:active span img {
border: 1px solid #666666;
float: right;

margin-left: 15px;
margin-bottom: 5px;
}

10. Apply the clearFix rule. Floated elements are outside the standard document
flow. Therefore, if there’s little text, the image appears to stick out of the span box,
as shown in the following example.
This can be fixed by adding the following rule (this technique is fully explained in
Chapter 7):
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

**Note:  Because of a bug in Internet Explorer pre-version 7, you need to add the following
rule to make the pop-up work in Internet Explorer 6 or 5.5: #popupContainer a:hover
{text-indent: 0;}. Ideally, this should be added in a style sheet linked via a conditional
comment—see Chapter 9 for more on hacks for old browsers.