<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" >
<title>Sivun otsikko (näkyy selaimen palkissa)</title>
</head>
<body>
<header>
<h1>Sivulla näkyvä otsikko</h1>
<nav>
<ul>
<li><a href="#">linkki</a></li>
<li><a href="#">linkki</a></li>
<li><a href="#">linkki</a></li>
<li><a href="#">linkki</a></li>
</ul>
</nav>
</header>
<!-- muu sisältö -->
</body>
</html>
header h1 {
color: rgb(40, 40, 40);
}
header nav ul {
/* fontin koon ym määrittelyä.. */
font-size: 1.2em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
/* taustaväriksi h1-elementin taustaväri */
background-color: rgb(40, 40, 40);
/* ei näytetä palloja */
list-style-type: none;
/* pyöreät kulmat */
border-radius: 10px;
}
header nav ul li {
display: inline;
}
header nav ul li a {
color: rgb(255, 255, 255);
display: inline-block;
padding: 5px 1.5em;
text-decoration: none;
}
/* kun a-elementin päälle viedään hiiri, muutetaan sekä
taustaväriä että tekstin väriä */
header nav ul li a:hover {
background-color: rgb(255, 255, 255);
color: rgb(40, 40, 40);
}