CSS merupakan singkatan
dari Cascading Style Sheets. CSS adalah kode untuk mengatur tentang tampilan
pada suatu halaman HTML sesuai dengan apa yang kita inginkan.
CSS selalu diawali kode
<HTML> dan juga diakhiri dengan </HTML>.
Keuntungan Menggunakan CSS.
Keuntungan menggunakan
CSS adalah :
1.
Kita akan lebih
mudah dalam menggunakan tata letak dan posisi pada suatu web yang kita
inginkan.
2.
Kita akan lebih
mudah dalam menggunakan pewarnaan pada web.
3.
Jenis huruf yang
kita inginkan dapat digunakan dalam CSS.
4.
Ukuran huruf
seperti <h1>, <h2>, <h3> dapat kita tentukan ukurannya dan
warna yang kita inginkan.
Kerugian Menggunakan CSS.
Kerugian menggunakan CSS adalah :
1.
Agak susah bila
belum memahami secara detail.
2.
Kita harus
teliti tanda kode pada CSS.
3. Pada web browser kita mungkin akan bagus
hasilnya, tetapi apabila kita buka di browser lain hasilnya mungkin akan
berantakan.
Contoh Kode CSS pada h1,h2, dan h3
<style type="text/css">
#h1{
color:red;
font-family:times
new rowman;
}
#h2{
color:blue;
font-family:arial;
}
#h3{
color:green;
font-family:arial;
}
</style>
CSS biasanya disimpan
pada file sendiri tetapi dapat juga ditulis langsung dalam file tersebut.
-
Pada contoh
penulisan CSS diatas misalnya pada h1 tersebut maksudnya yaitu : bentuk huruf
pada H1 adalah TIMES NEW ROWMAN dan warna hurufnya adalah RED (MERAH).
-
Pada contoh
penulisan CSS diatas misalnya pada h2 tersebut maksudnya yaitu : bentuk huruf
pada H2 adalah ARIAL dan warna hurufnya adalah BLUE (BIRU).
-
Pada contoh
penulisan CSS diatas misalnya pada h3 tersebut maksudnya yaitu : bentuk huruf
pada H3 adalah ARIAL dan warna hurufnya adalah GREEN (HIJAU).
Contoh kode CSS pada bentuk tampilan web
<style>
#badan {
width:50%;
height:170px;
}
#header{
width:auto;
height:100;
background-color:#00F;
}
#menu{
width:30%;
height:70px;
float:left;
background-color:#0F0;
}
#contain{
width:70%;
height:70px;
float:left;
background-color:#0FF;
}
#footer{
width:auto;
height:200;
background-color:#96F;
}
</style>
Hasil Kode CSS Diatas
Pada kode diatas terdapat 4 macam
bentuk tampilan :
1.
Header
2.
Menu
3.
Konten
4.
Footer
Pada
semua macam bentuk tersebut bentuknya tergantung pada BADAN.
HEADER
#header{
width:auto;
height:100;
background-color:#00F;
}
Pada
width maksudnya adalah ukurannya, ukurannya auto, maksudnya adalah menyesuaikan
ukuran pada bentuk badan.
Pada
height maksudnya adalah ukuran pada bentuk
kebawahnya, bentuknya berukuran 100, berarti bentuknya ukuran kebawah
sebesar 100 dan tampilan tersebut berwarna Biru(#00F).
MENU
#menu{
width:30%;
height:70px;
float:left;
background-color:#0F0;
}
Pada
width maksudnya adalah ukurannya, ukurannya 30%, maksudnya adalah ukuran pada
tampilan menu dari kiri ke kanan sebesar 30%.
Pada
height maksudnya adalah ukuran pada bentuk
kebawahnya, bentuknya berukuran 70px, berarti bentuknya ukuran kebawah
sebesar 70px, float:left, tampilan berada di bagian left(kiri), dan warna pada
tampilan tersebut berwarna Hijau (#0f0).
KONTEN
#contain{
width:70%;
height:70px;
float:left;
background-color:#0FF;
}
Pada
width maksudnya adalah ukurannya, ukurannya 70%, maksudnya adalah ukuran pada
tampilan menu dari kiri ke kanan sebesar 70%.
Pada
height maksudnya adalah ukuran pada bentuk
kebawahnya, bentuknya berukuran 70px, berarti bentuknya ukuran kebawah
sebesar 70px, float:left, tampilan berada di bagian left(kiri), dan warna pada
tampilan tersebut berwarna Biru Muda (#0FF)
FOOTER
#footer{
width:auto;
height:200;
background-color:#96F;
}.
Pada
width maksudnya adalah ukurannya, ukurannya auto, maksudnya adalah menyesuaikan
ukuran pada bentuk badan.
Pada
height maksudnya adalah ukuran pada bentuk
kebawahnya, bentuknya berukuran 200, berarti bentuknya ukuran kebawah
sebesar 200 dan tampilan tersebut berwarna Ungu(#96F).
Tidak ada komentar:
Posting Komentar