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.
1.
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; }
2.
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.
.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}
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:
1.
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, kita tidak perlu menuliskan selector. Karena anda menuliskan CSS langsung pada tag
yang ingin diberi style.
Cara
ini sangat tidak dianjurkan, karena akan mencampurkan antara “Format” dan “Presentasi”.
Cara ini juga tidak efektif ketika anda akan melakukan perubahan pada CSS.
2.
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>
</html>
Metode
kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanya memiliki
satu halaman web.
3.
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=’namafile.CSS‛
/>
</head>
</html>
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.
Cascading Style
Sheet (CSS) merupakan materi dari matakuliah Pemrograman Web dari jurusan
Sistem Informasi, unntuk informasi jurusan silahkan kunjungi :
Website SistemInformasi UNIDHA
Website
Universitas Dharma Andalas
