Styling Embedded HTML with CSS, Project Muse

In this article, youll learn how to format the elements of the contact form you created in the
Business Catalyst Admin Console interface. Using some standard CSS rules, you can adjust the
way the form and the form elements are displayed, to match your page design.
After pasting the forms source code from the Admin Console into the page in Muse, the form
is displayed with its default styles (see Figure 1).

Figure 1. After pasting in the arbitrary HTML code, the form displays on the page.

Just like any other element, you can use the side handles to resize the dimensions of the form
and move it around on the page to the desired location.
Right-click (or Control-click) the form, and choose HTML from the list that appears (see Figure
2).

Adobe Systems Confidential Styling Embedded HTML with CSS

Figure 2. Use the context menu to select HTML from the list of options.

The HTML code window appears. This displays the code that you pasted from the Admin
Console into the page. Place your cursor at the top, before the first line of code and press Enter
(Windows) or Return (Mac) a few times, to move the form code down and make some space
to add the styles (see Figure 3).

Figure 3. Press Enter or Return to add a few lines of space above the existing code.

This area above the form code is where you can paste or type in the CSS rules that will affect
the appearance of the form elements.
To see how this works, copy the code below:
<style type="text/css">
input.cat_textbox, textarea { background-color: #fff; border: 1px solid
#cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia,
Times, serif; }
input.cat_textbox { height: 16px; }
input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sansserif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight:
bold; text-transform: uppercase; }
.form label, .webform label { font: 14px Georgia, Times, serif; }
table.webform td { padding: 0; }
</style>

Paste the code into the top part of the HTML window, above the form (see Figure 4).

Figure 4. Paste the CSS styles in the top of the HTML window. Click OK to close the HTML window. Notice
that the forms appearance has updated using the new formatting. Click Preview or choose File > Preview
page in browser to see how it will display in the published site.

Adobe Systems Confidential Styling Embedded HTML with CSS

You can use this same strategy to control many of the different form elements that are
included when you add the contact form code that you copied from Business Catalyst.
Take a moment to review the code that you pasted in the top of the window. Notice the two
style tags at the top and bottom of the CSS rules that surround them. This is important;
without the opening and closing style tags, the CSS rules wont work. Here are the two style
tags, displayed on their own:
<style type="text/css">
</style>

These opening and closing style tags tell the browser that the code inside contains CSS
formatting rules. Always be sure that these tags exist at the top of the window, before pasting
the CSS rules inside.
When you want to make changes to your form elements to update their appearance, it is a
matter of calling out the class (which is the name assigned to the various elements in the
form), specifying the property you want to update, and then setting its attributes.
Consider the line of code below:
input.textarea {
background-color: #fff;
}

The word input.textarea is the name assigned to one type of text field (its class). Then, the
next line calls out the property you want to change. In this case background-color refers to the
background color of the text field. And then after the colon, the #fff is a shorthand way in CSS
code to write #ffffff (which is the hexadecimal color value that specifies the color white).
In plain English, the rule above says: Set the background color of this type of text field to white.
To update the form, you could also assign the background color of the text field to a common
web color value: red. The code below sets the background color that type of text field to red:
input.textarea {
background-color: red;
}

CSS rules are written in their own language. Just like learning any new language, it takes some
practice to become fluent in it. To learn more information about the syntax (the grammar used
to write these rules) read the excellent tutorials and CSS reference guides provided online for
free by W3Schools.
Once you are ready to begin editing your own contact forms, you can use the list below to
identify the class name and the associated properties that you can adjust for each form
element.
Note: Always remember to surround your list of CSS rules with the opening and closing style
tags, because otherwise the browser (and Design view) cant render the rules:

Adobe Systems Confidential Styling Embedded HTML with CSS

<style type="text/css">
</style>

Removing the default elements from the top of the contact form
By default, when you paste the form in the page, it will begin with the following two elements
(see Figure 5).

Figure 5. The Required and Title menu are displayed at the top by default.

If youd like to remove either or both of these elements, open the HTML window and look at
the source code you pasted (directly below the CSS styles tag you may have added).
To remove the *Required line, locate this line of code and delete it:
<span class="req">*</span> Required

To remove the Title label and menu, locate these lines of code and delete it:
<td><label for="Title">Title</label><br /><select name="Title" id="Title"
class="cat_dropdown_smaller"><option value="301457">DR</option><option
value="301456">MISS</option><option value="301453"
selected="selected">MR</option><option value="301454">MRS</option><option
value="301455">MS</option></select></td>

Note: Be careful when editing the HTML code not to accidently remove any tags other than
the lines shown above. Even removing a single extra character, like this >, could cause the
form to break. If that happens, you can return to the Admin Console and copy the code to
paste it back into the page, replacing the code you edited.

List of classes and properties to add CSS rules and format contact forms
When you assign color values, youll get a much greater variety of colors by using an online
tool, such as kuler, or an image-editing program (Photoshop or Fireworks), to create
hexadecimal color values. Hexadecimal color values always begin with the # symbol, followed
by a combination of 3 or 6 alphanumeric characters (0-9 and A-F).
You may find it easier to use the Eyedropper tool in Muse to select colors from your existing
design. You can copy the hexadecimal color values from the field in the Color Picker and paste
them into the code. However, the following 16 web colors can be specified by name. They can
be very helpful to use when you want to test a rule:

Adobe Systems Confidential Styling Embedded HTML with CSS

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal,
White and Yellow
When you specify the colors by name, do not include the # symbol before the color.
The following list is not exhaustivethere are many different combinations (and many other
properties you can use) to affect elements. Use these suggestions to get started:
Element

Visual Guide

Classes

Properties

Example

Change the
appearance of
the form itself

table.webform td

backgroundcolor

table.webform td {
background-color:
blue;
padding: 2;
}

Set the text to

align center (or
aligned left)

table.webform td

text-align

table.webform td {
text-align: center;
}

Remove the *
from required
form fields

.req

display

.req {
display: none;
}

padding

OR reset
the color of
the * to
red:
color: red;

OR select the form. Choose

the Text tool. Set the text styles
in Muse.

color
font-family
font-size
font-style
font-weight

.webform label {
color: #990000;
font-family: Times;
font-size: 20px;
}

Add borders
around the text
fields

.form input, .webform input

border-width

.form input, .webform

input {
border-width: 2px;
}

The text labels

displayed inside
menus, text
fields, and
buttons

input, button, textarea, select,

optgroup, option

color
font-family
font-size
font-style
font-weight

input, button,
textarea, select,
optgroup, option {
color: #666;
font-family: futura;
font-weight: bold;
}

The text label

displayed above
each form
element

.webform label

Adobe Systems Confidential Styling Embedded HTML with CSS

Add line space

between the
form elements

table.webform td

line-height

table.webform td {
line-height: 24px;
}

The appearance
of all the
buttons, text
fields, and
menus

input, button, textarea,

optgroup, option

backgroundcolor

input, button,
textarea, optgroup,
option {
border-width: 2px;
width: 200px;
background-color:
Olive;
}

The appearance
of drop-down
menus and the
submit button
only

input, select

color
font-family
font-size
font-style
font-weight
width

input, select {
color: green;
font-size: 24px;
width: 150px;
}

Set the width,

line height and
border of the
text fields, dropdown menus
and input items

input.cat_textbox,
textarea.cat_listbox,
select.cat_dropdown,
select.cat_listbox

line-height

input.cat_textbox,
textarea.cat_listbox,
select.cat_dropdown,
select.cat_listbox {
line-height: 30px;
width: 200px;
border-width: 4px;
}

Change the
appearance of
the submit
button only

#catwebformbutton

height
width
color
backgroundcolor
border
font-family
font-size
font-style
font-weight

Change the text

that is displayed
inside the
Submit button

Locate the original text shown

to the right in the HTML
window.

Original:

border-width
width

Update the value property by

entering the new text for the
button

width
border-width

#catwebformbutton {
border-width: 4px;
height: 30px;
width: 100px;
background-color:
Maroon;
color: White;
font-family: Cambria;
}

<input class="cat_button"
type="submit" value="Submit"
id="catwebformbutton" />
Edited:
<input class="cat_button"
type="submit" value="Contact Us"
id="catwebformbutton" />

Adobe Systems Confidential Styling Embedded HTML with CSS