Cascading Style Sheet (CSS)
CSS adalah kependekan dari Cascading Style Sheet, berfungsi
untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML
ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan
lain sebagainya.
Perhatikan contoh kode CSS berikut :
Gambar 49 Contoh Kode
CSS
Selector
Selector adalah elemen/tag HTML yang ingin diberi style.
Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu
menambahkan tanda <>. Pada contoh kode CSS di atas, kita akan memberi
style pada seluruh tag h1 yang terdapat dalam file HTML.
Jika tag HTML yang ingin diberi style memiliki ID, anda
dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).
#header
Dan jika tag yang diberi style memiliki Class, maka
penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama
class.
.artikel
Jika anda hanya menuliskan satu selector, seperti contoh
kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki
style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang
hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti
berikut :
.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi
style pada tag h1 yang hanya terdapat di dalam class artikel (atau - h1 yang
merupakan child dari class artikel).
Anda-pun dapat memilih lebih dari satu tag untuk penghematan
kode CSS. Misalnya ketika anda memiliki dua atau lebih tag dengan warna
background yang sama, dari pada menuliskan kode seperti ini:
h1{ background-color: #666666; }
P { background-color: #666666; }
a { background-color: #666666; }
anda dapat menggabungkan selector dengan menambahkan tanda
koma pada nama tag yang ingin diberi style.
h1, p, a { background-color: #66666; }
Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada
selector, seperti warna text, warna background, jarak antar elemen, garis
pinggir dan lain sebagainya.
Untuk memberikan nilai/value pada property kita gunakan
tanda titik dua ( : ). Setiap property diakhiri dengan titik koma (;), jika
anda tidak mengakhirinya maka browser tidak akan mengetahui maksud dari
property tersebut.
Property-property pada CSS sangat mudah dimengerti karena
lebih mirip bahasa kita sehari-hari. Misalnya untuk merubah warna text kita
gunakan property color, untuk merubah warna background kita gunakan property
background-color, untuk merubah ukuran huruf kita gunakan property font-size.
Mudah dimengerti bukan?
.artikel h1 { color :
red; background-color : blue; font-size : 20px; }
Menurut saya, Kode CSS sangat mudah dimengerti, karena
kata-kata yang digunakan sudah tidak asing lagi, perhatikan contoh kode CSS
sebelumnya, jika kita ubah ke bahasa kita sehari-hari, kira-kira menjadi
seperti berikut :
“Hey Brow (Browser) Cari tag h1 yang terdapat di dalam class
artikel, jika ditemukan/ada, ubah warnanya menjadi merah, warna background
menjadi biru dan ukuran huruf menjadi 20 pixel.”
Cukup perkenalan dengan CSS-nya, lalu yang menjadi
pertanyaan besar anda saat ini adalah :
“Dimana saya mengetikkan kode tersebut?”
Penulisan CSS
Ada tiga cara penulisan kode CSS, yaitu inline, internal dan
external. Ketiganya bisa anda lakukan sesuai dengan kebutuhan. Berikut contoh
penggunaan dari metode-metode tersebut:
Inline
Penulisan kode CSS dengan metode inline ini bisa dilakukan
langsung pada tag yang ingin diberi style dengan menggunakan atribut style.
<h1 style=‚color : red; ‚> Judul Situs </h1>
Pada metode ini, anda tidak perlu menuliskan selector.
Karena anda menuliskan CSS langsung pada tag yang ingin diberi style. Cara ini
sangat tidak dianjurkan, karena Anda akan mencampurkan antara “Format” dan
“Presentasi”. Cara ini juga tidak efektif ketika anda akan melakukan perubahan
pada CSS.
Internal
Metode CSS internal ditulis di dalam tag style yang
ditempatkan pada tag head.
<HTML>
<head> <title>Judul
HTML</title> <style> h1 {
color : red; } </style> </head> ...
Metode kedua ini sangat dianjurkan untuk pengujian style,
atau ketika anda hanya memiliki satu halaman web.
External
Metode yang terakhir adalah dengan membuat file CSS dan
dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya
namafile.CSS.
Pemanggilan file CSS dilakukan dengan menggunakan tag link:
<HTML>
<head> <title>Judul
HTML</title> <link
rel=‚stylesheet‛ href=‚fileCSS.CSS‛ />
</head> ...
Atribut rel adalah informasi hubungan (relationship) dari
tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS
yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link. terimaksih kalau mau ebook lainya silahkan download ebookntya pada link di bawah ini...
EBOOK CSS LENGKAP BAHASA INDONESIA
Silahkan cari ebook lainya di blog ini.
Deskripsi pencarian
Deskripsi pencarian
EBOOK ANDROID, EBOOK MICROSOFT WORD, EBOOK MICROSOFT EXCEL, EBOOK HTML, EBOOK LINUX, EBOOK DESAIN PENELITIAN, EBOOK METODE PENGEMBANGAN SYSTEM, EBOOK METODE PENELITIAN, EBOOK ADOBE ILUSTRATOR, EBOOK ADOBE PRIMERE, EBOOK ADOBE PHOTOSHOP, EBOOK CSS, EBOOK DREAMWEAVER, EBOOK HACKER, EBOOK JARINGAN, EBOOK PHP, EBOOK BERPIKIR DAN BERJIWA BESAR, EBOOK WORDPRESS, EBOOK TEKNISI , EBOOK PACKET TRACER, EBOOK MYSQL, EBOOK OPENCART, EBOOK MS VISIO, EBOOK MS FRONPAGE, EBOOK MS PUBLISHER, EBOOK KRIPTOGRAFI, EBOOK JAVASCRIPS, EBOOK ADOBE PRIMERE
