Anda di halaman 1dari 6

Cascading Style Sheets

www.amikom.info Cascading Style Sheets (CSS) merupakan cara menambahkan Style pada document web sperti warna , jenis huruf dll.

CSS Basic Syntax


Berikut contoh basic style dari HTML dan CSS
<body bgcolor="#FF0000">

body {background-color: #FF0000;}

Menggabungkan HTML dengan CSS

Method 1: In-line (the attribute style)


Menggabungkan CSS dengan HTML menggunakan atribut HTML
<html> <head> <title>Example</title> </head> <body style="background-color: blue;"> <p>background warna biru</p> </body> </html>

www.amikom.info

Method 2: Internal (the tag style)


Menggabungkan HTML dengan CSS menggunakan tag <style>
<html> <head> <title>Contoh</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Halaman dengan background merah</p> </body> </html>

Method 3: External (link to a style sheet)


Membuat link dengan file terpisah mis : stye.css
<html> <head> <title>My web</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>

CONTOH STYLE /** * jwc.css

/* Elemen Utama */
a{ color:#049; text-decoration:none

} a:hover { text-decoration:underline } body { background:#CECECE url('images/bg_body.gif') top left repeat-x fixed; color:#444;

www.amikom.info

} form {

font-family:Arial,Helvetica,Sans,Sans-Serif; font-size:11px; margin:0px

margin:0px } input, select, textarea { font-family:Arial,Helvetica,Sans,Sans-Serif; font-size:11px } td { font-size:11px; text-align:left } /* Dasar Halaman */ #base { background:#FFF } /* Head Kiri & Kanan */ #headkiri, #headkanan { background:#555 url('images/bg_head.jpg') top left repeat-x } #headkanan { text-align:right } /* Menu Utama */ #menu { background:url('images/bg_menu.gif'); height:28px } /* Submenu */ #submenu { background:url('images/bg_menubawah.gif'); color:#999; letter-spacing:1px; padding:3px 8px 3px 8px } #submenu a { color:#CCC } #submenu a:hover { color:#FFF; text-decoration:none } /* menu.kiri */ #menu.kiri { color:#999; letter-spacing:1px; padding:3px 8px 3px 8px } #menu.kiri a { color:#CCC

www.amikom.info

} #menu.kiri a:hover { color:#FFF; text-decoration:none } /* Intro */ #left #intro { border-bottom:4px solid #EEE; line-height:16px; padding:6px 10px 10px 10px } /* Artikel */ #left #articles { color:#777; padding:10px } #left #articles .entry { border-bottom:1px solid #EEE; margin-bottom:6px; padding-bottom:6px } #left #articles .entry a { font-weight:bold } /* Support */ #left #support { padding:0px 0px 10px 10px } #left #support #messenger .team { margin-bottom:6px } #center { background:url('images/bg_split.gif') top left repeat-y } /* Registrasi Domain */ #center #domreg { background:url('images/bg_domreg.gif') top left; font-size:10px; height:127px } #center #domreg .subtitle { margin-top:6px } #center #domreg td { color:#000; font-size:10px } /* WebComplete */ #center #webcomplete { background:url('images/bg_webcpl.gif'); color:#FFF; xpadding:8px

www.amikom.info

} /* Berita & Informasi */ #center #berita { color:#777; padding:10px 10px 0px 10px } #center #berita .entry { margin-bottom:10px } #center #berita .entry .tanggal { font-size:10px } #center #berita .entry .judul { color:#333; font-weight:bold } /* Klien Kami */ #center #klien { padding:10px } #center #klien .entry { background:url('images/el_panah.gif') center left no-repeat; border-bottom:1px solid #EEE; margin-bottom:2px; padding:0px 0px 2px 10px } #right { background:url('images/bg_split.gif') top left repeat-y } /* Fitur Hosting */ #right #fitur { background:url('images/bg_fitur.gif') top left; height:127px; padding:0px 6px 0px 6px } #right #fitur .subtitle { margin-top:6px } #right #fitur td { font-size:10px } /* Paket Hosting */ #right #paket { background:url('images/bg_paket.gif') top left repeat-x; text-align:center } /* Situs Bulan Ini */ #right #situs { color:#777; padding:10px } /* Alamat JWC */

www.amikom.info

#alamat { background:url('images/bg_alamat.gif'); padding:8px 4px 4px 32px } /* Menu Bawah */ #menubawah { background:url('images/bg_menubawah.gif'); color:#FFF; font-size:10px; padding:4px; text-align:center } #menubawah a { color:#CCC } #menubawah a:hover { color:#FFF; text-decoration:none } /* Class Global */ .subtitle { margin-bottom:8px } .more { padding:4px 10px 0px 0px; text-align:right } /* Button */ .btxt { background:#FFF; border:1px solid #AAA } .btn { } .bck { border:none }

www.amikom.info