Какво е Интернет?
Learning CSS Lesson Two
Now we need to add some stylesheet to ul li a navigation menu.
.logo { position:absolute; margin:auto; background:beige; width:950px; height:150px; text-align:center;}
h2 { font-size:32px; font-style:italic; color:black; text-transform: uppercase;}
small { font-style:oblique; color:black; }
ul { position:absolute; width:900px; height:45px;}
li { float:left;margin-left:80px; padding:3px 3px 3px 3px; font-size:28px; display:block; text-decoration:none;}
li a:hover {color:white;}
li a {text-decoration:none;color:black;}
Okay let me explane you how i understend this,when i put DIV TAG i write point "." before name of my div,when div or tag is defaut in html doesen't need i think so :D :)
also we edit nav and footer menu to look good.
nav { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em;}
footer { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em; text-align:center;}
Your index.html must be like this NOW.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>body { background:#333}
header { position:relative; margin:auto; background:#CCC; width:950px; height:150px;}
nav { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em;}
main { position:relative; margin:auto; background:beige; width:950px; height:400px;}
footer { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em; text-align:center;}
.logo { position:absolute; margin:auto; background:beige; width:950px; height:150px; text-align:center;}
h2 { font-size:32px; font-style:italic; color:black; text-transform: uppercase;}
small { font-style:oblique; color:black; }
ul { position:absolute; width:900px; height:45px;}
li { float:left;margin-left:80px; padding:3px 3px 3px 3px; font-size:28px; display:block; text-decoration:none;}
li a:hover {color:white;}
li a {text-decoration:none;color:black;}
</style>
<title> WebCreatorBG HTML5 BASIC </title>
</head>
<body>
<header>
<div class="logo"> <h2> welcome to webcreator bg </h2> <small>HTML 5 First webpage Toturial</small>
</div>
</header>
<nav>
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">Downloads </a></li>
<li><a href="#">Abouts US</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<main>
Main Section We put here main text for our website
</main>
<footer>
Defines a footer for a document,the end of the page
</footer>
</body>
</html>
NEXT CHAPTER
