Pozdrav, danas idemo dalje sa izradom templatea, zadnji put smo radili sa HTML kodom, a danas ćemo obratiti pažnju na CSS. Pa krenimo dalje.

Prvo moramo uraditi slijedeće:
1. Dodati div u header div, naravno moramo definisati user1 i user2 :

<div id="header">
<h1> Go Gren </h1>
<h4>It's not easy being green... but worth it.</h4>
<div id="user1">
<h2>User1 Position</h2>
Quick site snippet... Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
<a href="#">magna aliqua.</a>
</div>
<div id="user2">
<h2>User2 Position</h2>
Quick site snippet... Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et <a
href="#">dolore magna</a> aliqua.
</div>
</div><!--//

Trabalo bi ovako izgledati:

2. Sada krećemo sa CSS :

#container {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
...
za  h1 i h4 headers:
...
h1, h4 {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
...
za h2 i h3 headers:
...
h2, h3{
font-family:

3. Sada  moramo urediti malo tekst u CSS:

#container {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
...
...
h1 {
font-size: 32px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}

4. Sad dodamo CSS da uredimo malo paragrafe i ostalo :

#container {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:16px;
}
...
p {
margin-bottom: 18px;
}
...
...
blockquote{
font-size: 18px;
margin-bottom: 24px;
5. Dodamo samo ovaj mali dodatak :
...
a {
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
...

6. Sad je naredu dio CSS-a  koji će nam pomoći da dobijemo malo bolji raspored :

form {
font-size: 10px;
}
input {
background-color: #FFFFFF;
color: #000000;
border: 1px solid #999999;
font-size: 11px;
padding: 3px;
}
textarea{
background-color: #FFFFFF;
color: #000000;
border: 1px solid #999999;
font-size: 11px;
padding: 3px;
width: 300px;
height: 150px;
}
.button{/*this class allows me to treat an input element like a
button*/
border: 1px solid #FFF0CC;
background-color: #999999;
color: #F0E0C2;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
width: 150px;
height: 22px;
cursor: pointer;

7. Ovo je zadnji dio za danas, naravno isto moramo dodati u CSS :

body {
margin: 0px;
}
#container {
margin: 0 auto;
width: 900px;
border: 1px solid #666666;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:16px;
}
#container2 {
border: 1px solid #0000ff;
}
#container3 {
width: 670px;
float:left;
border: 1px solid #ff0000;
}
...
...
#header {
border: 1px solid #00ff00;
width: 930px;
height: 300px;
}
#user1{
border: 1px solid #ff6600;
width: 250px;
float: left;
}
#user2{
border: 1px solid #ff6600;
width: 250px;
float: right;
}
#user3{
border: 1px solid #ff6600;
margin-top: 100px;
}
#user4{
border: 1px solid #ff6600;
}
.leftWidth{/*class allows for quickly ensuring anything on the left
side can be set*/
width: 520px;
}
.quickMargin{/*adds 10px of margin to anything*/
margin: 10px;
}
...
...
#content {
margin:0 10px;
width: 420px;
float:left;
border: 1px solid #333333;
}
#pushbottom{
clear:both;
}
...
...
#sidebarLT {
margin:0 5px;
width:200px;
border: 1px solid #ff9900;
float:right;
}
#sidebarRT {
margin:0 10px;
width: 200px;
float: right;
border: 1px solid #0000ff;
}
...
#top_navlist {
position: absolute;
top: 170px;
width: 900px;
text-align:right;
border: 1px solid #003333;
}
...
...
#footer {
border: 1px solid #000033;
height: 85px;
width: 930px;
}

Ovako treba sada izgledati :

Kao što ste mogli primjetiti danas smo samo uređivali CSS.  CSS je najodgovorniji za izgled svake web stranice, zato ga nikad ne treba zanemariti.

Pozdrav !