hi,
i made a demo site with a css external style sheet and basic html. i commented the code heavily so you may learn something. heres the code
css:
<code>
/* global */
body {
background: #666; /* 666 is shorthand for #666666 and background is shorthand for background-color: */
margin: 10px; /* the border above the black box */
text-align: center; /* aligns text in center of page */
font-size: 13px;
font-family: times, arial, verdana; /* when not specified this is the font of the text in things such as div and p tags */
}
#container {
position: relative;
width: 525px;
margin: auto; /* aligns black box w/ photo to center of page */
background: #FFF; /* shorthand for #FFFFFF - white */
padding: 1px; /* is the 1 pixel white border around photo */
border: 10px solid #000; /* padding-border-margin in that order from image out */
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
}
#nav ul li {
list-style: none; /* takes away bullets */
display: inline; /* displays horizontally */
}
#nav ul li a:link, #nav ul li a:visited, #nav ul li a:active {
padding: 2 20px; /* makes the links seperated */
color: #FFF;
font-size: 14px;
/* font-weight: bold; */
/*
a css comment
*/
text-decoration: none; /* no underline on the nav links */
}
#nav ul li a:hover {
color: #FFF;
background: #000;
}
</code>
html:
<code>
<html>
<head>
<title></title>
<link href='style/style.css' rel='stylesheet' type='text/css' media='screen'>
</head>
<body>
<div id='container'>
<img src='images/silo.jpg' width='525' height='373' alt='photography' title=''>
</div>
<div id='nav'>
<ul>
<li><a href=''>about</a></li>
<li><a href=''>photography</a></li>
<li><a href=''>contact</a></li>
</ul>
</div>
</body>
</html>
</code>
some helpful links are:
http://css.maxdesign.com.au/listutorial/
http://www.w3schools.com/default.asp
good luck if you have questions post em'