Rabu, 19 Maret 2014
2.
CSS (CASCADING
STYLE SHEET)
Cascading Style Sheet (CSS) merupakan salah satu bahasa
pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti
Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan
halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh
pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna
mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas,
bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan
untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk
menampilkan halaman yang sama dengan format yang berbeda.
Penulisan CSS dibagi 3 penempatan :
o
Inline
Style Sheet
o
Embbeded
Style Sheet
o
External
Style Sheet
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang
bersangkutan. Cara penulisannya cukup dengan menambahkan atribut
style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada
tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet:
Output pada browser :
Embbeded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style>
... </style> di atas tag <body>. Pada pendefinisian ini disebutkan
atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya
dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet
:
Output pada browser :
Nah, sudah faham kan untuk penulisan CSS dengan Inline dan Embedded Style Sheet, jika sudah mari sekarang kita lanjut ke
penulisan CSS dengan External Style
Sheet.
External Style Sheet.
Untuk penggunaan External
Style Sheet kita mesti membuat 2 buah file, yang pertama kita membuat file
berekstensi .html atau .htm, lalu yang kedua file berekstentsi .css nah,
silahkan langsung mencobanya.
Kami menggunakan disini file HTML bernama 003_css.html dengan code program seperti dibawah ini :
Dan untuk file kedua
kami beri nama 003_css.css dengan code program seperti dibawah ini :
Penjelasan :
Jika kita lihat pada code HTML <link
rel="stylesheet" type="text/css" href="003_css.css" />, nah maksudnya
adalah file CSS yang kita punya di-link dengan
menggunakan tag tersebut sehingga code HTML bisa menampilkan syntax CSS yang
kita punya yang akan ditampilkan pada browser.
Output pada browser :
Hyperlink dengan CSS.
Contoh code program HTML hyperlink dengan CSS, untuk code
HTMLnya seperti berikut :
Dan untuk CSS nya seperti berikut :
Output pada browser :
Penjelasan :
Kita lihat code program,
a : link = link awal dengan warna orange dan untuk garis bawah
teks masih ada.
a : visited = jika cursor dan di klik akan berwarna biru
a : hover = jika cursor disorot ke link yang kita sorot
maka akan berwarna merah dan garis bawah pada teks akan hilang, sebab terdapat
selector text-decoration dan value none.
a : active = jika link tersebut diklik dan halaman web
berada pada link tersebut.
Memperindah dan Mempercantik Table.
Langsung saja lihat dan praktikkan code HTML dibawah ini
:
Dan Syntax CSS dibawah ini :
Seperti biasa kita gunakan External Style Sheet, sebab dalam proses editing jika ada error code akan
lebih mudah untuk mencari error code-nya
dan kalian tidak perlu membaca satu persatu code
di HTML-nya.
Output pada browser :
Penggunaan ID dan Class pada CSS.
Selain menetapkan satu gaya untuk elemen HTML, CSS
memungkinkan anda untuk menentukan penyeleksi anda sendiri yang disebut
"ID" dan "CLASS".
1.
Id
Selector
Pemilih
id digunakan untuk menentukan gaya untuk elemen tunggal yang unik. Selector ID
menggunakan atribut ID elemen HTML, dan didefinisikan dengan "#".
Aturan style dibawah ini akan diterapkan ke elemen dengan ID = "contoh1"
:
2.
Class
Selector
Pemilih
kelas digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan
pemilih id, pemilih kelas yang paling sering digunakan pada beberapa elemen.
Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak elemen
HTML dengan kelas yang sama. Pemilih kelas menggunakan atribut class HTML, dan
didefinisikan dengan "." Pada contoh di bawah ini, semua elemen HTML
dengan class = "pusat" akan menjadi pusat-blok
