STYLING A HTML MENU WITH CSS

Introduction
This instruction set will cover the creation of a simple HTML menu and then styling the menu with CSS.
The HTML will be made first and will create a simple bulleted menu with links on each item. From there,
the menu will be styled using a cascading style sheet, or CSS. The cascading style sheet modifies the look
of HTML when attached. In this example we are going to remove the bullet points from the list then
change the font and color the links. For more information detailed on HTML and CSS visit www.w3c.org.

Part I: Creating a New Page

1. Open Dreamweaver from Start
Menu.

2. Click File -> New from the top

menu.

3. Select Blank Page on the New

Document box.

4. Select HTML under the Page Type

list.

5. Select <none> under the Layout

list.

6. Click the DocType dropdown list

and select XHTML 1.0 Transitional.

7. Click Create.

Styling an HTML menu with CSS Page 1

8. Click Window -> Workspace
Layout -> Designer from the top
menu.

Note: If window is not in design

view click Design View.

Part II: Creating a Menu

1. Click the Unordered List button
( ) to create an unordered list.

2. Type the name of the menu item.

3. Press Enter to add more menu

items.

4. Repeat steps 2 and 3 until the

desired number of menu items
have been added.

5. Highlight a menu item to add a

link.

Styling an HTML menu with CSS Page 2

6. Type a URL into the Link box in
the Properties section

7. Select _blank from the Target

dropdown list.

Note: This opens the link in a new

window when clicked.

Part III: Creating a CSS Rule for the Menu

The CSS rule created in the section will be attached to menu and will remove the bullet points.

1. Right-click anywhere in the

white space in the CSS Styles
section on the right.

2. Select New from the context

menu.

3. Click the Selector Type

dropdown list and select Class
(can apply to any HTML
element)

4. Type .menu in the Selector

Name textbox.

• The box below will fill in

with a description of the
selector.

5. Click the Rule Definition

dropdown list and select (This
document only)

6. Click OK.

• A new box will open

titled CSS Rule
definition for .menu

Styling an HTML menu with CSS Page 3

7. Select List under the Category
list.

8. Select none from the List-style-

type dropdown list.

• This will remove the

bullet points from the
list items

9. Click OK

Part IV: Creating a CSS Rule for Menu Items

The CSS rule created in the section will be attached to menu items to alter the appearance of the links.

1. Right-click in the CSS Styles box

on the right.

2. Select New from the context

menu.

3. Click the Selector Type

dropdown list and select Class
(can apply to any HTML
element).

4. Type .menu-item in the Selector

Name textbox.

• This will be applied to

the items in the menu

Styling an HTML menu with CSS Page 4

5. Click the Rule Definition
dropdown list and select (This
document only)

6. Click OK.

• A new box will open

titled CSS Rule
definition for .menu

7. Select Type under the Category

list.

8. Choose a font from the Font-

family dropdown list.

9. Choose a font size from the

Font-size dropdown list.

10. Click the square ( ) to the

right of Color and click a color
from the color menu.

11. Click OK

Styling an HTML menu with CSS Page 5

Part V: Attaching the CSS styles to the Menu
Now that the CSS styles have been made, they need to be attached to the proper items to become
active.

1. Click the first menu item from

the unordered list in the main
window.

2. Click <ul> at the bottom of the

main window to select the
entire menu.

3. Select menu from the Class

dropdown menu.

• The bullet points on the

menu items will
disappear.

4. Click on an item, from the menu

created in Part II, in the main
window.

5. Select menu-item from the

Class dropdown menu.

• The menu item will now

have the styling defined
in the .menu-item CSS
class.

6. Repeat step 5 for the rest of the

menu items.

Styling an HTML menu with CSS Page 6

Part VI: Saving & Viewing the File
1. Click File-> Save from the top
menu.

2. Browse to the location where the

file will be saved.

3. Enter a name in the File Name

field.

4. Click Save.

5. Press F12 key to open the

document in a browser.

• The result should look

something like the image
on the right.

Styling an HTML menu with CSS Page 7