Member Avatar for ggeoff

Hi

I am using MS Expression Web 2 migrating from Frontpage 2002. I have decided to try to produce an up to standards web site using CSS and this doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-as suggested by an article Getting Started or similar that I think I read on a MS blog.

I am having quite a lot of trouble and wish I had stuck to tables for layout! But I have made progress as Expression Web 2 is very nice to use.

I am currently stuck on designing a horizontal navigation bar. I have used the DL tag in the HTML and a class called "menu" for the formatting. I can't add
"a:hover" though or any of the other hyperlink formatting commands to the CSS file. EW2 justs underlines the "a" as being not acceptable. It won't accept any code beginning
with "a" in the CSS at all. As soon as I type "a" it unlines it as being unacceptable. My CSS file uses "link rel . . " in the web pages.

Consequently I have added a style sheet to the web page in the Head section using the File - Properties dialogue. since every page of the web will have the same
navigation bar it does seem silly not to be able to include the code in the CSS external file though. Does anyone know what I am doing wrong?

  • 2 Contributors
  • 5 Replies
  • 259 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ggeoff

Dani AI

Generated

Good troubleshooting — dragging the rule into the external stylesheet via Manage Styles (what you did) is a fine workflow. @Rhyan was right to point out scoping: keep your menu rules tied to the menu container so they only affect navigation links, not every anchor on the site.

One important thing to be clear about: link pseudo-classes must be ordered so later states can override earlier ones. The conventional order is link → visited → hover → active (LVHA). Put the rules in that sequence inside your stylesheet so hover and active states take precedence where appropriate. Also note that modern browsers intentionally restrict what you can change for visited links (mostly color-related properties) for privacy reasons. (devdoc.net)

Keep your stylesheet organized: resets and global anchor defaults first, then component rules (your nav) later — when specificity is equal, source order decides which rule wins. Add keyboard focus styling for accessibility and consider using :focus-visible so keyboard users get a clear indicator without annoying mouse users. Example component pattern (adjust values to taste):

/* component-scoped base */
.menu dd a {
  display: inline-block;
  padding: 6px 12px;
  color: #333;
  text-decoration: none;
}

/* hover + keyboard focus together for consistent behavior */
.menu dd a:hover,
.menu dd a:focus-visible {
  background: #036;
  color: #fff;
}

/* lightweight active feedback */
.menu dd a:active {
  transform: translateY(1px);
}

Organize files by purpose (reset → base → layout → components) so moving rules from a page-level prototype into the external file is predictable. If Expression Web flags a selector while typing, confirm you are editing a real .css file (saved with .css), that the external stylesheet is properly attached to the page, and that the rule you want to move is placed after any global anchor rules so it can override them. For cleaner markup and easier horizontal menus, consider switching from a DL to a UL/LI nav pattern and, where possible, use semantic nav containers for future-proofing. (devdoc.net)

Recommended Answers

All 5 Replies

Member Avatar for ggeoff

I found that it is possible to by using "Manage Styles" to move a style from an internal CSS to an external CSS or vice versa -just be dragging it. So I dragged it from the page to the external CSS to the class "menu" It worked but didn't put it in the "menu" class but just above it. I have now added the code for "visited" and it works.

I am a little wiser, I think? But is there some order in which a style is added to the external CSS? And what's the best way of working -work at page level and move internal defined styles to the external file?

Member Avatar for Member #117553

If you used class menu directly on a element, then instead of using a:hover in your css, you should use .menu:hover, .menu:visited, etc...
On the other hand, if you have applied menu class to your DL tag, then you should define your links like
.menu a:link, .menu a:visited, etc...

Member Avatar for Member #117553

To your last you have just posted.

the correct order to define styles for a link is
a:link, a:hover, a:visited and optionally a:active

As for the question where to do css coding - inside page or in an external file - it is easier to work with an external file, because you can keep both files opened one next to other and you will not have to scroll up and down as you would do with a single file.

commented: Very helpful clear advice +2
Member Avatar for ggeoff

If you used class menu directly on a element, then instead of using a:hover in your css, you should use .menu:hover, .menu:visited, etc...
On the other hand, if you have applied menu class to your DL tag, then you should define your links like
.menu a:link, .menu a:visited, etc...

Thanks Rhyan

I have the menu class applied to the DL tag and have added the code as you have suggested and it works fine.

Member Avatar for ggeoff

To your last you have just posted.

the correct order to define styles for a link is
a:link, a:hover, a:visited and optionally a:active

As for the question where to do css coding - inside page or in an external file - it is easier to work with an external file, because you can keep both files opened one next to other and you will not have to scroll up and down as you would do with a single file.

Thanks Ryhan but the order of the define styles for a link is:
a:link, a:visited, a:hover and a:active; otherwise the hover won't work after the link's been visited. ( I checked on w3schools)

Thanks for the advice about which is easier. And thanks once again for helping me with this - it was keeping me awake at night!

Geoff

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.