Style 3
Source Code
| <div id = "style3">
<h1>My Site:</h1> <ul> <li><a href="/img_articles/7921/#">Home</a></li> <li><a href="/img_articles/7921/#">About</a></li> <li><a href="/img_articles/7921/#">Contact</a></li> </ul></div> <div class = "content_box3"> Style 3 Content Box </div> |
Final Result
Click here to view live demo
CSS for #style3
| #style3 {
font-family:Arial; } |
- font = Arial
CSS for H1
| #style3 h1 {
width: 120px; font-size:14px; font-weight:bold; color: #FFFF99; text-transform:uppercase; margin:0px; padding:16px 0px 2px 10px; float:left; background-image: url(gradient3.gif); background-repeat:no-repeat; } |
= gradient3.gif
- width = 120px
- font size = 14px
- bold font
- font color = #FFFF99
- transform text to uppercase
- margin = 0
- padding: top=16, right=0, bottom=2, left=10
- float left
- background image = gradient3.gif, no-repeat
CSS for UL
| #style3 ul {
margin:0px; padding: 8px 0px 0px 0px; list-style:none; } |
- margin = 0
- padding: top=8, right=0, bottom=0, left=0
- no list style
CSS for LI
| #style3 li {
width:130px; font-size:14px; font-weight:bold; border-right:1px solid #FF6600; float:left; } |
- width = 130
- font-size = 14
- bold font
- border-right = 1xp #FF6600
- float = left
CSS for link
| #style3 li a {
width:120px; color: #663300; text-decoration:none; display:block; padding:5px; background-image:url(gradient1.gif); } |
= gradient1.gif
- width = 120
- font color = #663300
- no underline
- display as block
- padding around = 5
- background image = gradient1.gif
CSS for visited link
| #style1 li a:visited {
color: #663300; text-decoration:none;} |
- font color = #663300
- no underline
CSS for hover link
| #style2 li a:hover {
color: #FF6600; text-decoration:none; background-image:url(gradient2.gif); } |
= gradient2.gif
- font color = #FF6600
- no underline
- background image = gradient2.gif
CSS for content box
| .content_box3 {
width:720px; font-family:Arial; font-size:11px; background-color:#FFFF91; border:1px solid #FF6600; padding:15px; clear:left; } |
- width = 720
- font = Arial
- font size = 11px
- background color = #FFFF91
- border around = 1px
- padding around = 15
- Clear left of UL tag
More HTML and CSS: 
