Lessons.Ch11. CSS text in Microsoft – modifying the top menu styles




For this lessson you'll be working in the ( styles.css ) or the ( fonts.css ) style sheet page directly. We'll demonstrate how to locate the style you'll want to edit, and use the CSS Properties or 'Manage Styles' panel to help you modify the font style properties. For folks with a bit of CSS experience, you'll be able to locate the style information in the page as it is labeled.

There are # font styles you can modify for the top menu:

  • font type ( family )
  • font size
  • font color x 5 states

In the following demonstration we'll start by modifying the 'main level' button font styles, then follow up with modifying a 'submenu button' font styles.

To modify the 'font type – family' of your side menu buttons

  1. click on the Task Panes or Panels (menu) >> enable the Manage Styles (menu) panel

    Expression Web 3/4

    you should see the ''Manage Styles'' panel in view

    in EW 3/4

  2. now open the styles.css or the 'fonts.css' style sheet
    located in your ( Site / styles ) folder

  3. scroll down the page and locate the following style (we're going to turn off the 'Folder List' to allow for more a viewable area

    .ddsmoothmenu ul

  4. select the .ddsmoothmenu ul style with your mouse, and the 'Manage Styles' panel will highlight that style

  5. now in the ''Manage Styles'' panel, right click on the .ddsmoothmenu ul style that is now highlighted, and click on Modify Style

  6. the 'Modify Style' window will open and you'll be able to modify the following:
    • font-family     ( type or name of font )
    • font-size         ( in px for pixels )
    • font-style       ( normal or italic )

  7. use the drop menu's to select a different font-family, font-size or font-style
  8. you can add a font-weight if you want to bold the font or try one of the variants
  9. click OK when you're done
  10. your web editor will 'modify' the alignment of the style on the styles.css page from a single line, to multiple lines

  11. this is the standard method for writing styles in a style sheet
  12. the styles.css uses an inline method for writing the styles to make it easier to find the style you want to edit, you won't need to try to line things back up once you've edited the style with the 'Manage Styles' panel.

To Modify the Submenu font styles, you'll be using the same method as you did for the main level buttons, but this time you'll be selecting the following style

  • .ddsmoothmenu ul li ul li a


This entry was posted in Lessons.Ch11. CSS text and tagged , , , , , , . Bookmark the permalink.

Comments are closed.