Odpowiedź:
Dokument html nazywasz sobie jak chcesz np. index.html a plik css nazywasz sobie style.css i potem wklejasz tak jak napisałem.
Kod który wklejasz do HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Szkielet</title>
</head>
<body>
<div id="container">
<div id="blok1">
<h1>Div 1</h1>
</div>
<div id="blok2">
<h1>Div 2</h1>
</div>
<div id="blok3">
<h1>Div 3</h1>
</div>
<div id="blok4">
<h1>Div 4</h1>
</div>
<div style="clear: both;">
<div id="blok5">
<h1>Div 5</h1>
</div>
</div>
Kod który wklejasz do CSS:
body {
background: grey;
}
#container {
width: 1515px;
height: auto;
}
#blok1 {
width: 1515px;
height: 200px;
background: yellow;
font-size: 20px;
color: red;
}
#blok2 {
width: 505px;
height: 400px;
background: green;
font-size: 20px;
color: red;
display: block;
float: left;
}
#blok3 {
width: 505px;
height: 400px;
background: greenyellow;
font-size: 20px;
color: red;
display: block;
float: left;
}
#blok4 {
width: 505px;
height: 400px;
background: paleturquoise;
font-size: 20px;
color: red;
display: block;
float: left;
}
#blok5 {
width: 1515;
height: 130px;
background: pink;
font-size: 20px;
color: red;
}
h1 {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
</style>
</body>
</html>
