Find best premium and Free Joomla templates at GetJoomlaTemplatesFree.com

external css

 

lihatlah gambar diatas, itu adalah lyric sebuah milik penyanyi keren bernama Jemma Griffith , bercerita tentang ketabahan dan..... stoooooooooooop, ngapain bahas itu, kita lagi belajar css nih...

oke, lihatlah gambar diatas, sangat sederhana dan wagu, walaupun sudah terlihat informatif. sekarang bandingkan dengan gambar dibawah ini :

 

tetep informatif dan sederhana, tapi sudah tak terlalu wagu, walaupun pemilihan warnanya masih sedikit norak.

yang jelas dengan css kita akan membuat tampilan sederhana menjadi membahana, walaupun mungkin tetep wagu dan norak.... tergantung nasib kaleee..

 

langsung saja deh...

buatlah file css baru dan beri nama style-222.css, ketikkan kode dibawah ini

body{background:#ececec;

 color:#470968;

   font-size: 14px;

}

 

#banner{position:absolute;

top:2px;

left:320px;

width:800px;

height:150px;

border-radius:5px;

text-align:center;

background:#FFB6C1}

 

#menu-bar-nav{width:800px;

height:30px;

 border:1px #ba6ce3 solid;

 border-radius:5px;

padding-top:12px;

 position:absolute;

 top:155px;

 left:320px;

 background:#ff69b4}

 

#leftbar{position:absolute;

top:200px;

left:320px;

width:150px;

height:520px;

border-radius:5px;

border:solid #ba6ce3 1px;

text-align:center;

padding:10px;

background:#808000}

 

#rightbar{position:absolute;

top:200px;

left:948px;

width:150px;

height:520px;

border-radius:5px;

border:solid #ba6ce3 1px;

text-align:center;

padding:10px;

background:#808000}

 

#main-div{position:absolute;

top:200px;

left:495px;

width:429px;

height:520px;

border-radius:5px;

border:solid #ba6ce3 1px;

padding:10px 10px 10px 10px;

text-align:justify;

background:#f0f0f0}

 

 

lalu buatlah file html dengan nama terserah-anda.html ,ketikkan atau copy kode dibawah ini dan paste dihalaman baru anda :

 

<html>

<title> style advance </title>

<head>

<!--- hubungkan file css nya  -->

<link rel="stylesheet" type="text/css" href="/style-222.css" >

</head>

<body>

 

<div id="banner"> ini banner </div>

 

<div id="menu-bar-nav"> ini menu bar </div>

 

<div id="leftbar"> ini side bar kiri </div>

 

 

<div id="rightbar"> ini side bar kanan </div>

 

<div id="main-div"> <h1>AMAZING</h1>

Do it now <br/>

You know who you are<br/>

You feel it in your heart<br/>

And you're burning and wishing<br/>

 

At first, wait, won't get it on a plate<br/>

You're gonna work for it harder and harder<br/>

And I know 'cause I've been there before<br/>

Knocking on the doors with rejection (rejection)<br/>

And you'll see 'cause if it's meant to be<br/>

Nothing can compare to deserving your dream<br/>

 

[Chorus:]<br/>

It's amazing, it's amazing all that you can do<br/>

It's amazing, it makes my heart sing<br/>

Now it's up to you<br/>

 

Patience, now, frustration's in the air<br/>

And people who don't care<br/>

Well it's gonna get you down<br/>

And you'll fall (fall)<br/>

Yes you will hit a wall<br/>

But get back on your feet<br/>

And you'll be stronger and smarter<br/>

 

And I know 'cause I've been there before<br/>

Knockin' down the doors, won't take "No" for an answer<br/>

And you'll see 'cause if it's meant to be<br/>

Nothing can compare to deserving your dream<br/>

</div>

 

</body></html>

 

 

save dan cobalah..

catatan :file terserah -anda.html dan file style-222.css harus ditempatkan difolder yang sama. kalau kamu meletakkan file cssnya difolder lain,misalnya difolder 'style' maka rubahlah :

<link rel="stylesheet" type="text/css" href="/style-222.css" >

menjadi

<link rel="stylesheet" type="text/css" href="/style/style-222.css" >

 

jangan takut untuk memodifikasi sendiri file cssnya, rubah warnanya, atau warna hurufnya, ukurannya dsb dsb....

selamat belajar .....

Add comment


Security code
Refresh