Tentang CSS
CSS (Cascading Style Sheet)
adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk
mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak
terjadi pengulangan tulisan.
Keuntungan menggunakan CSS
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri. • Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web • Mempercepat proses rendering/pembacaan HTML.
Manfaat dari CSS:
Kode HTML menjadi lebih sederhana dan lebih mudah diatur, Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu: Header –> berisi tema web/ judul
Menu –> menu link web Content –> isi dari web
Footer –> identitas/ copyright Atribut ID
Ada dua cara penempatan elemen dalam web dengan CSS yaitu: 1. Position (Posisi)
Mengunakan properti position terdapat 4 cara: Static –> posisi normal (default).
Relative –> posisi elemen tergantung dari elemen yang lain. Absolute –> posisi elemen berpatokan pada jendela browser. Fixed –> posisi elemen tetap walaupun digeser.
2. Float (Nempel)
Menggunakan properti float atau clear:
Float:left –> elemen akan menempel pada sebelah kiri elemen induk. Float:right –> elemen akan menempel pada sebelah kanan elemen induk. Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:
Margin –> jarak/batas elemen dengan elemen lain Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS: contoh penulisan css :
<html> <head>
<style type = "text/css"> #header {
width:900px; height:50px; border: 1px solid #640404; } #headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; } #headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center; } </style> </head>
<body>
<h1>Sample</h1> <div id = "header">
<div id="headerLeft">Header Left</div> <div id="headerRight">Header Right</div> </div>
</body> </html>
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML),
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Penempatan CSS dalam HTML
Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh: <html>
<head>
<style type = "text/css"> .header {
height:50px; border: 1px solid #640404; } .headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; } .headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center; } </style> </head> <body>
Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html> <head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/> </head>
<body> </body> </html>
Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html> <head> </head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div> </body>
</html>
Jika menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag<head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi
gunakan saja file style.css dan coba. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian<body> saja bagian yang didalam <head> tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. CSS memiliki ratusan properties dan values, tentu Tidak semua browser dapat menampilkan jenis huruf yang di spesifikasikan didalam CSS. Untuk itu perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. dapat menggunakan property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link { font-weight: bold; font-size: 12px; color: #C87C28;
text-decoration: none; } a.link1:visited { font-weight: bold; font-size: 12px; color: #CC6600;
font-family: Times New Roman; text-decoration: none; } a.link1:hover { font-weight: bold; font-size: 12px; color: #C87C28;
font-family: Times New Roman; text-decoration: underline } a.link1:active { font-weight: bold; font-size: 12px; color: #C87C28;
font-family: Times New Roman; text-decoration: none; } a.link2:link { font-weight: bold; font-size: 12px; color: #663300;
font-family: Arial, Helvetica, sans-serif; text-decoration: underline; } a.link2:visited { font-weight: bold; font-size: 12px; color: #800000;
font-family: Arial, Helvetica, sans-serif; text-decoration: none;
}
a.link2:hover { font-weight: bold; font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif; text-decoration: underline overline; }
a.link2:active { font-weight: bold; font-size: 12px; color: #ff6600;
font-family: Arial, Helvetica, sans-serif; text-decoration: underline;