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
