CSS

ini adalah script CSS dari javascript tadi,silahkan copas saja


body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
   
}

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



p, ul, ol, blockquote {
    margin-top: 0;
}

a {
    color: #268ED4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    border: none;
}

#header {
    height: 40px;
    background: #5A5A5A ;
}

#header h1 {
    width: 760px;
    margin: 0 auto;
    padding: 12px 0 0 0;
    font-size: 1em;
}

#header h2 {
    width: 760px;
    margin: -18px auto 0 auto;
    text-align: right;
    font-size: 1em;
}

#header a {
    text-decoration: none;
    color: #FFFFFF;
}


#pages {
    height: 110px;
    padding-top: 10px;
}

#pages h2 {
    display: none;
}

#pages ul {
    display: block;
    width: 760px;
    height: 100px;
    margin: 0 auto;
    padding: 0;
}

#pages li {
    display: inline;
}

#pages a {
    display: block;
    float: left;
    width: 152px;
    height: 75px;
    padding: 35px 0 0 0;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: -1px;
    font-size: 1.6em;
    font-weight: normal;
    color: #333333;
}

#pages a:hover {
    color: #FF567E;
}

#page1 { background: #E5FAA1 url(latihan7_1.gif) no-repeat; }
#page2 { background: #97F0E6 url(latihan7_2.gif) no-repeat; }
#page3 { background: #F3B6CE url(latihan7_3.gif) no-repeat; }
#page4 { background: #FADDA1 url(latihan7_4.gif) no-repeat; }
#page5 { background: #C9CDFF url(latihan7_5.gif) no-repeat; }

#page1:hover, #pages .active #page1 { background-image: url(latihan7_6.gif); }
#page2:hover, #pages .active #page2 { background-image: url(latihan7_7.gif); }
#page3:hover, #pages .active #page3 { background-image: url(latihan7_8.gif); }
#page4:hover, #pages .active #page4 { background-image: url(latihan7_9.gif); }
#page5:hover, #pages .active #page5 { background-image: url(latihan7_10.gif); }


#content {
    width: 760px;
    margin: 0 auto;
    padding: 20px 0 0 0;
}


#latest-post {
    float: left;
    width: 400px;
}

#latest-post .title {
    letter-spacing: -1px;
    font-size: 2.2em;
}

#latest-post .posted {
    margin-bottom: 2em;
    font-size: .8em;
    font-weight: normal;
}

#latest-post .image {
    float: left;
    margin: .3em 1em 0 0;
}

#latest-post p, #latest-post blockquote, #latest-post ul, #latest-post ol {
    line-height: 155%;
}


#recent-posts {
    float: right;
    width: 320px;
}

#recent-posts h3 {
    width: 310px;
    height: 32px;
    padding: 12px 0 0 10px;
    background: #5A5A5A;
    font-size: 1em;
    color: #FFFFFF;
}

#recent-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#recent-posts li {
    padding: 5px 10px;
    border-bottom: 1px solid #5A5A5A;
}

#recent-posts li:hover {
    background: #EFEFEF;
}


#colOne {
    padding-bottom: 20px;
}


#colTwo {
    padding: 20px;
   
}

#colTwo ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#colTwo li, #colTwo form {
    padding: 10px;
}

#colTwo li {
    display: block;
    float: left;
    width: 220px;
}

#colTwo li ul {
}

#colTwo li li {
   
    float: none;
    padding: 0 0 0 10px;
}

#colTwo h2 {
    margin: 0 0 .5em 0;
    padding: 0 0 0 10px;
    font-size: 1em;
}


selamat mencoba