Szablon HTML i CSS

Połączmy dokument HTML i plik CSS. Poniżej przykładowy kod wyświetlany jako snippet.

Kod HTML i CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Moja pierwsza strona</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">
  <h1>Nagłówek</h1>
</div>
<div id="navigation">
  <h2>Nawigacja</h2>
  <ul>
    <li><a href="first.html">link</a></li>
    <li><a href="second.html">link</a></li>
    <li><a href="third.html">link</a></li>
  </ul>
</div>
<div id="content">
  <h2>Treść</h2>
  <p>treść strony</p>
</div>
<div id="footer">
  <p>Autor: BLA BLA</p>
</div>

</body>
</html>

<!-- Plik CSS: style.css -->
body {
  background-color: Green;
}

div {
  border: 3px solid Black;
  padding: 7px;
  width: 600px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

#navigation {
  float: left;
  width: 150px;
}

#content {
  float: left;
  width: 430px;
}

#footer {
  clear: both;
}

Ten kod pokazuje, jak połączyć dokument HTML z plikiem CSS oraz jak ustawić podstawowe style dla sekcji strony.