Inline styling is simply using the
<tag style="some: css here"> method of applying CSS, rather than purely using the separate CSS file.
And yes, rather than using repeated
<tag class="text"> you can just specify styles for the tags themselves. Eg.
p, span, div { text-size: 1em; }
As for some other suggestions, you could replace the items below (just a start, the whole file could be restructured.
Your Original
HTML Code:
<div id="menu_container">
<div id="menu_left"></div>
<div id="menu_middle">
<div class="menu_links" ><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Services</a> | <a href="#">Products</a> | <a href="#">Contact</a></div>
</div>
<div id="menu_right"></div>
</div>
My Alteration
HTML Code:
<!-- menu : removed left and right unnecessary divs -->
<div id="menu">
<!-- menu links : changed to a list and added titles to hyperlinks -->
<ul class="menu_links" >
<li><a href="#" title="Visit the main home page.">Home</a></li>
<li><a href="#" title="A brief introduction to YourSite.">About</a></li>
<li><a href="#" title="Overviewing the services which we offer.">Services</a></li>
<li><a href="#" title="A catalog of our products.">Products</a></li>
<li class="last"><a href="#" title="A list of ways you can get in touch with us.">Contact</a></li>
</ul>
</div>
and the CSS to "fix" the above
Code:
/* NEW ADDITIONS BY PETER COWBURN <peter@cowburn.info> */
#wrap {
width: 740px;
margin: 0 auto;
}
.menu_links {
list-style: none inside none;
padding: 0;
margin: 9px 0 0 7px;
}
.menu_links li {
display: inline;
padding: 0 8px 0 2px;
margin: 0;
background:
url(menu_sep.gif)
no-repeat center right;
}
.menu_links li.last {
background: none;
}
#menu {
border: solid 1px #790000;
background:
#b60000
url(menu_bg.gif)
repeat-x
top
left;
height: 33px;
width: 738px;
}
The two tiny images used in the above CSS have been attached to this post.
- Salathe
P.S. Sorry for tinkering with your code, I just like to help.