Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
Free Stock Images
  • Create A Free Account
  • Download High-Res Stock Images For Free
  • +5 Million Images
Your Ad Here
Creating and linking external CSS files
by Ades Tynyshov
Advanced CSS (linking to an external style sheet)
by Adam Priestley
CSS Menu Style 2
by Nick La
Creating Your First CSS Website
by GreyCobra.com
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML tutorials
A collection of HTML templates.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials CSS Menu Style 1
rss

CSS Menu Style 1

Author: Nick La More by this author
Browse Pages:  1  2  3 > >>

Added: Apr 03, 2006 Rating:  Average Rating: 3.14 Votes: 50 Position: 6734 of 14445Average Rating: 3.14 Votes: 50 Position: 6734 of 14445Average Rating: 3.14 Votes: 50 Position: 6734 of 14445Average Rating: 3.14 Votes: 50 Position: 6734 of 14445Average Rating: 3.14 Votes: 50 Position: 6734 of 14445 Level: Experienced Software:  DreamweaverGoLiveFrontPage

In this tutorial, I'm going to show you how to make three different style CSS menus with the same html code as seen on csszengarden.com. But of course, this one is much more simpler.

I will show you how to define the styles for h1, ul, and li tags and change its appearance without modifying the html source code.

Style 1

Source Code

<div id = "style1">
<h1>My Site:</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div class = "content_box1">
Style 1 Content box
</div>

Final Result

style 1

Click here to view live demo

CSS for #style1

#style1 {
font-family:Arial;
}
  • font = Arial

CSS for H1

#style1 h1 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: #FF6600;
width: 120px;
text-align: right;
padding: 5px;
margin: 0px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
border-left: 1px solid #FF6600; }

h1

  • font size = 14px
  • bold font
  • tranform all text to uppercase
  • background = #FF6600
  • width = 120px
  • text align right
  • padding(around) 5px
  • margin = 0
  • set H1 float(align) to left
  • 1px border-top
  • 1px border-right
  • 1px border-left

CSS for UL

#style1 ul {
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
list-style: none; }
  • font size = 14px
  • bold font
  • margin = 0
  • padding = 0
  • no list style (bullet)

CSS for LI

#style1 li {
background-color: #FF9900;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;}
  • background = #FF9900
  • make LI tag float to left
  • border-top 1px
  • border-right 1px

CSS for link

#style1 li a {
width: 100px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;}
  • width = 100
  • font color = white
  • no underline
  • display as block
  • padding: top=5, right=0, bottom=5, left=5
  • transform text to uppercase

CSS for visited link

#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;}
  • font color = white
  • no underline

CSS for hover link

#style1 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;}
  • font color = black
  • no underline
  • background = #FFCC33

CSS for content box

.content_box1 {
font-family: Arial;
font-size: 11px;
clear: left;
background-color: #FFFF91;
border: 1px solid #FF6600;
width: 720px;
padding: 15px;}
  • font = Arial
  • font size = 11px
  • clear left floating
  • background color = #FFFF91
  • border around = 1px
  • width = 720
  • padding around = 15


print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages:  1  2  3 > >>

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "CSS Menu Style 1"