Izrada CSS predloška
Osnovna struktura
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stil.css" />
</head>
<body>
</body>
</html>
Wrapper, header i footer
<div id="wrapper">
<div id="header">
<h1>Web dizajn</h1>
<p id="slogan">Slogan vaše tvrtke</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
HTML u dva stupca
<div id="container">
<div id="article">
<p>Article</p>
</div>
<div id="sidebar">
<p>Sidebar</p>
</div>
</div>
CSS zadane postavke
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Tahoma, sans-serif;
background: #264057 url('slike/pozadina.gif') repeat-x;
}
#wrapper {
margin: 0 auto;
width: 80em;
}
Vodoravni izbornik
#header {
background: transparent url('slike/svjetionik.jpg') center right;
width: 40em;
height: 10em;
padding: 3em 0 3em 40em;
border-top: 0.2em solid #5a8cca;
border-bottom: 0.2em solid #5a8cca;
}
CSS naslov i podnaslov
h1 {
font-size: 6em;
font-weight: lighter;
}
#slogan {
font-size: 1.5em;
letter-spacing: 0.623em;
}
Članci i desni stupac
#article {
float: left;
background-color: #1D4C83;
width: 75%;
}
#sidebar {
float: left;
width: 25%;
background: #1D4C83 url("slike/prijelaz.gif") top repeat-x;
}
Tekst i podnaslov
p {
font-size: 1.4em;
padding: 1% 2%;
text-align: justify;
line-height>: 1.3;
letter-spacing: 0.08em;
}
h2 {/
font-size: 2.8em;
color: #A65121;
padding: 2% 5%;
font-weight: lighter;
}
Okvir sa slikom
.slike {
float: left;
margin: 0.3em 0.5em 0.3em 0;
border: 0.1px solid black;
}
h3 {
margin: 1% 2% 0;
font-size: 2.8em;
padding: 1% 5%;
line-height: 1.3;
font-weight: lighter;
background: url("slike/iza-naslova.gif") repeat-x;
}