CSS:n tutustuminen

Tässä tulemme käyttämään kahta tiedostoa:

muotoilu.html
-----------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Muotoiltu dokumentti</title>
<link rel = "stylesheet"
type = "text/css"
href = "tyyli.css" />
</head>
<body>
<div id="wrapper">
<header>
<h1>HTML5</h1>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>
</header>
<aside>
<article>
<h3>Asiaa</h3>
<p>Sivupalkissa olevaa asiaa</p>
</article>
</aside>
<section>
<article>
<h2>Artikkeli 1</h2>
<p>Tämä on HTML demo</p>
</article>
<hr/>
<article>
<h2>Artikkeli 2</h2>
<p>Tämä on HTML demo</p>
</article>
<hr/>
<article>
<h2>Artikkeli 3</h2>
<p>Tämä on HTML demo</p>
</article>
<hr/>
<article>
<h2>Artikkeli 4</h2>
<p>Tämä on HTML demo</p>
</article>
</section>
<footer>
<p>Tämä tulee alatunnisteeseen</p>
</footer>
</div>
</body>
</html>

-----------------------------------------------

Sekä tyyli.css:
-----------------------------------------------

header
{
height: 100px;
background: #EDDDA1;
}
h1
{
color: #FFF;
padding: 22px 0 0 20px;
}
nav
{
width: 400px;
height: 20px;
background: #D6C136;
margin-left: 200px;
}
nav ul
{
margin: 0 0 0 -10px;
}
nav li
{
float: left;
list-style-type: none;
padding: 0 10px;
}
section
{
width: 400px;
background: #B5C0EB;
margin-top; -20px;
}
h2
{
color: #000;
padding: 10 px 0 0 10px;
}
article
{
width: 400px;
background: #B5C0EB;
}
article p
{
padding: 10px;
}
aside
{
width: 200px;
height: 502px;
background: #8592ED;
float: right;
margin-top: -1px;
}
h3
{
color: #fff;
padding: 10px 0 0 10px;
}
aside article
{
width: 200px;
background: #8592ED;
color: #fff;
}
footer
{
height: 40px;
background: #EDDDA1;
margin-top: -16px;
}
footer p
{
padding: 10px 0 0 10px;
}

-----------------------------------------------

Viimeksi muutettu: maanantai, 28. lokakuuta 2019, 11:29