Getting Interactive - Head First HTML and CSS - page 686

Styling the form with CSS

Ready Bake
CSS

We've got all the structure we need, so now we just need to add a few styling rules
and we'll be done. Because this form is part of the Starbuzz site, we're going to
reuse some of the style in the “starbuzz.css” stylesheet, and create a new stylesheet,
“styledform.css”, to add new style rules for the Bean Machine form. All of this CSS
should be familiar to you now. We're not using any rules unique to forms; it's all
just the same stuff you've been using in the last few chapters.

You'll find this CSS in the file “styledform.css” in the folder “chapter14/starbuzz”.
W e're goin g to re ly on th e Starb uzz CS S for so me of

ou r style, but we 're addi ng the Starbuz z backg round

im age, an d a mar gin to t he body .

body {
background: #efe5d0 url(images/background.gif) top left;
margin: 20px;
}

We're using the form to rep resent the
table in the tab le display…

form {
display: table;
padding: 10px;
border: thin dotted #7e7e7e;
background-color: #e1ceb8;
}

…and adding a border around t he form, and
some padding between the for m content
and the border, and a backgro und color to
offset it from the backgroun d.

W e're making the textar ea control in the

form textarea {
width: 500px;
height: 200px;
}

fo rm bigger, so there's m ore room f or

co mments by setting its width and height.

Ea ch “t ableR ow” < div> acts a s a r ow in

div.tableRow {
display: table-row;
}

the tabl e disp lay la yout .

div.tableRow p {
display: table-cell;
vertical-align: top;
padding: 3px;
}

This rule uses the first-child p seudo-element on the select or

for <p> elements nested inside “tableRow” <d iv>s. This mea ns

div.tableRow p:first-child {
text-align: right;
}

the first <p> elem ent in each r ow is aligned to the right, so

they all line up ve rtically agains t the right si de of the colu mn.

p.heading {
font-weight: bold;
}