CSS singkatan dari Cascading Style Sheets. Secara bahasa berarti lembaran gaya yang mengalir ke bawah. Kamu akan kebayang dengan istilah ini setelah nanti tau penggunaan dan bentuknya. Secara istilah, CSS adalah bahasa penulisan yang digunakan untuk mendeskripsikan penampilan sebuah dokumen markup. CSS selalu digunakan bersamaan dengan HTML, meskipun kita dapat juga menggunakannya untuk mengatur style dokumen markup lain seperti XML, SVG dan XUL. Agar lebih terbayang, coba perhatikan tiga dokumen HTML di bawah ini dan lihat perbedaan tampilannya.
Mengapa Harus Menggunakan CSS?
HTML dirancang tidak ditujukan untuk mendesain sebuah halaman web, tapi hanya untuk menampilkan konten saja. Pada saat HTML beranjak ke versi 3.2, diperkenalkan tag <font> yang digunakan untuk mengatur tampilan sebuah teks, seperti jenis font yang digunakan, warna, dan ukuran. Tapi dengan adanya tag ini, malah jadi menyulitkan proses development, karena tag ini mesti disematkan di banyak halaman untuk mendapatkan hasil style yang sama. Bayangkan ketika kita sudah memiliki banyak halaman web, belasan atau puluhan, lalu kemudian hendak mengedit beberapa style saja misalkan ukuran font dan ingin semua halaman mendapatkan perubahan yang konsisten. Maka kita harus memperbaharui tag tersebut di setiap halaman satu per satu!Untuk itu, dibuatlah CSS, yang memisahkan style dari halaman web, sehingga antara konten pada HTML dan desain tampilan pada dokumen CSS dapat dikerjakan di dua tempat berbeda. Dengan kata lain, dokumen HTML cukup berisi konten saja, dan satu dokumen CSS dapat disematkan pada setiap dokumen HTML agar semuanya menampilkan style yang sama dan konsisten.
Penerapan CSS Pada HTML
CSS biasanya disimpan di dalam sebuah file berekstensi .css dan disematkan di dalam dokumen HTML untuk memberikan style pada halaman tersebut. Meski demikian, kita tetap dapat menambahkan sintaks CSS langsung di dalam dokumen HTML, di dalam tag<style></style> untuk
mengakomodir penerapan style yang hanya digunakan di
dalam dokumen tersebut. Kita juga dapat menyematkan sintaks CSS
langsung di dalam atribut style pada
suatu tag HTML untuk menerapkan style yang hanya digunakan pada
tag itu saja. Berikut adalah contoh penerapan ketiga mode tersebut:Dokumen yang disematkan file style.css:
<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Selamat Datang, Programmer!</h1>
<p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Dokumen dengan CSS di dalamnya:<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
h1 { text-align: center; color: lightsteelblue; }
</style>
</head>
<body>
<h1>Selamat Datang, Programmer!</h1>
<p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Dokumen dengan CSS pada tag:<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
</head>
<body>
<h1 style="text-align:center; color:lightsteelblue;">Selamat Datang, Programmer!</h1>
<p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Sintaks CSS
Sekarang mari kita perhatikan sintaks penulisan kode CSS:h1 { text-align: center; color: red; }
Pada contoh kode di atas:h1-> selector{ text-align: center; color: red; }-> deklarasi styletext-align-> propertycenter-> valuecolor-> propertyred-> value
Pada kode di atas elemen yang dirujuk oleh kode CSS kita adalah
<h1>. Elemen <h1> ini kita buat
supaya tulisannya rata tengah, maka kita beri property text-align dengan value center. Property dan value CSS
dipisahkan dengan tanda titik dua (:).
Kita dapat memberikan lebih dari satu property style dengan memisahkan antar
property dengan tanda titik koma (;).
property dan value disimpan di dalam kurung kurawal { dan }.Selector Element
Selector ini mengacu elemen HTML berdasarkan nama elemennya. Pada contoh berikut:<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>Welcome</h1>
<h1>Selamat Datang, Programmer!</h1>
<p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
itu berarti kita menerapkan style color:red pada
semua elemen <h1>
yang ada di dokumen dan menerapkan style color:blue
pada semua elemen <p>.Selector class
Selector ini mengacu elemen berdasarkan nama classnya. Nama class pada elemen diacu dengan nilai atribut class diawali oleh tanda titik (.). Pada contoh
berikut:<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
.merah { color: red; }
</style>
</head>
<body>
<h1>Welcome</h1>
<h1 class="merah">Selamat Datang, Programmer!</h1>
<p class="merah">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
pada dokumen di atas semua elemen yang memiliki atribut
class merah yakni
elemen <h1> yang
kedua dan <p> akan
berwarna merah. Elemen <h1>
yang pertama tidak dikenai style karena tidak memiliki atribut class="merah".Contoh lain:
<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
h1.merah { color:red; }
</style>
</head>
<body>
<h1>Welcome!</h1>
<h1 class="merah">Selamat Datang, Programmer!</h1>
<p class="merah">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
pada dokumen di atas, elemen yang teksnya berwarna merah hanyalah elemen <h1> yang kedua karena
selector h1.merah berarti
hanya memilih elemen <h1>
yang memiliki atribut class="merah"
saja. Elemen <p> juga
tidak dikenai style meskipun memiliki atribut class merah.Bandingkan contoh di atas dengan contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
h1 .merah { color:red; }
</style>
</head>
<body>
<h1>Welcome!</h1>
<h1 class="merah">Selamat Datang, <span class="merah">Programmer</span> !</h1>
<p class="merah">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Pada contoh terakhir ini, teks yang berwarna merah hanya yang bertuliskan Programmer saja. Perhatikan selector
pada CSS di atas, terdapat spasi antara h1
dan .merah. Spasi antar
selector berarti mengacu pada elemen turunannya. h1 .merah berarti memilih elemen berclass merah yang ada di dalam elemen h1.Selector id
Selector ini mengacu elemen berdasarkan nama idnya. Nama id pada elemen diacu dengan nilai atribut id diawali oleh tanda pagar (#).
Pada contoh berikut:<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
#judul-utama { color:red; }
#subjudul { color:blue; }
</style>
</head>
<body>
<h1 id="judul-utama">Welcome!</h1>
<h2 id="subjudul">Selamat Datang, Programmer!</h2>
<p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
elemen <h1> akan
berwarna merah dan <h2>
akan berwarna biru.Perhatikan lagi contoh ini:
<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
#hijau { color:green; }
</style>
</head>
<body>
<h1 id="hijau">Welcome!</h1>
<h1 id="hijau">Selamat Datang, Programmer!</h1>
<p id="hijau">Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Pada contoh di atas, hanya elemen <h1>
yang pertama saja yang berwarna hijau. Berbeda dengan selector class, selector
id bersifat unik, artinya mesti hanya ada satu id spesifik dalam sebuah
dokumen. Apabila ada dua atau lebih elemen yang ber-id sama seperti contoh di
atas, maka hanya elemen yang ditemukan pertama kali (dari atas) pada dokumen
saja yang dikenai style.Untuk mengenakan style ke banyak elemen, gunakanlah class.
Menggabung Selector
Kita dapat mengenakan style yang sama kepada berbagai elemen, dengan memisah antar selector dengan tanda koma (,).<!DOCTYPE html>
<html>
<head>
<title>HTML dengan CSS</title>
<style>
h1, p { color:#333; text-align:center; }
</style>
</head>
<body>
<h1>Selamat Datang, Programmer!</h1>
<p>Selamat belajar pemrograman di CodePolitan</p>
</body>
</html>
Pada contoh di atas, semua elemen <h1> dan <p>
pada dokumen akan dikenai style yang sama.Penutup
Pada tutorial kali ini kita telah mempelajari apa itu CSS, apa kegunaan CSS dan cara menggunakannya, bagaimana sintaks CSS, apa itu selector, bagaimana menggunakan selector element, class dan id, serta menggabungkan selector untuk style yang sama.Referensi:
http://www.w3schools.com/css
EmoticonEmoticon