Jednom kad se počnete upoznavati sa CSS-om, sjajna je ideja vježbati odabir teme koja ima potpuno osnovni dizajn, na kojoj ćete unositi promjene.
Važno je razumjeti kako jednostavne promjene ponekad mogu drastično utjecati na izgled vaše stranice, a ponekad ne toliko.
U konačnici, vježbanje sa izmjenom HTML i CSS koda, će najbolje pomoći da vizualno vidite promjene koje unosite.
Stoga korištenjem Uređivača na ovoj stranici pokušajte eksperimentirati s nekoliko HTML i CSS predložaka
HTML predložak
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moja stranica</title>
</head>
<body>
<div class="header">
<h1>Moja stranica</h1>
<p>Stranica koju sam kreirao.</p>
</div>
<div class="navbar">
<a href="#">Poveznica</a>
<a href="#">Poveznica</a>
<a href="#">Poveznica</a>
<a href="#" class="right">Poveznica</a>
</div>
<div class="row">
<div class="side">
<h2>O Meni</h2>
<h5>Moja slika:</h5>
<div class="fakeimg" style="height:200px;">Slika</div>
<p>Neki obični tekst..</p>
<h3>Još dodatnog teksta</h3>
<p>Ovdje ću staviti još dodatnog teksta.</p>
<div class="fakeimg" style="height:60px;">Slika</div><br>
<div class="fakeimg" style="height:60px;">Slika</div><br>
<div class="fakeimg" style="height:60px;">Slika</div>
</div>
<div class="main">
<h2>VELIKI NASLOV</h2>
<h5>Opis naslova</h5>
<div class="fakeimg" style="height:200px;">Slika</div>
<p>Još teksta..</p>
<p>Dodatni tekst na mojoj stranici.</p>
<br>
<h2>Veliki naslov</h2>
<h5>Opis naslova</h5>
<div class="fakeimg" style="height:200px;">Slika</div>
<p>Još teksta..</p>
<p>Još dodatnog teksta.</p>
</div>
</div>
<div class="footer">
<h2>Podnožje</h2>
</div>
</body>
</html>
CSS predložak
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Stilizirajte zaglavlje */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Povećajte veličinu fonta elementa h1 */
.header h1 {
font-size: 40px;
}
/* Stilizirajte gornju navigacijsku traku */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Stilizirajte veze navigacijske trake */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Desno poravnata poveznica*/
.navbar a.right {
float: right;
}
/* Promjena boje kada mišom pređeš preko elementa*/
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Spremnik stupca */
.row {
display: flex;
flex-wrap: wrap;
}
/* Napravite dva nejednaka stupca koji se nalaze jedan do drugog */
/* Bočna traka/lijevi stupac */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Glavni stupac */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Lažna slika, samo za ovaj primjer */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Podnožje*/
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responzivni izgled - kada je zaslon manji od 700px širok, neka dva stupca budu naslagana jedan na drugi umjesto jedan pored drugog */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responzivni izgled - kada je zaslon manji od 400 px širok, neka se navigacijske veze slažu jedna na drugu umjesto jedna pored druge */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width:100%;
}
}