HTML and CSS Reference
In-Depth Information
Styling the form with CSS
Ready Bake
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;
Search WWH ::

Custom Search