Apa Itu CSS
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.Sejarah Singkat CSS
Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.CSS level 1 mendukung pengaturan tampilan dalam hal:
- Font (jenis, ketebalan),
- Warna teks, latar belakang, dan elemen lainnya,
- Text attributes, misalnya spasi antar baris, kata, dan huruf,
- Posisi text, gambar, tabel, dan elemen lainnya,
- Marjin, border, dan padding,
Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
Pengertian dan Manfaat CSS
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah: bahasa pemrograman untuk mengatur tampilan suatu website atau blogTampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.
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 dan merupakan pasangan setia XHTML,
- Digunakan dalam hampir semua web browser.
Sintaks dan Penempatan Kode CSS
Sintaks CSS terdiri dari tiga bagian:- selector
Selector adalah elemen atau tag HTML yang akan di-definisi-kan. - property
Property adalah atribut yang akan diganti dengan “nilai” tertentu - value
Value CSS adalah nilai dari property
Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
selector {contoh 1:
property: value
}
p {
color:red
}
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“). Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehingga sintaksnya menjadi:
selector {
property1: value;
property2: “value_value”; … }
contoh 2:
p {
text-align:center;
font-family:“sans serif”
}
Aturan-aturan yang berlaku dalam sintaks CSS:
- Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
- Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
- Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
- Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
h1,h2,h3 {Class selector
color:green
}
Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:
p.right {
text-align: right
}
dan
p.left {
text-align: left
}
Aturan Class selector:
- Jangan memberi nama class dengan angka,
- Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).
Atribut ID
Aturan penamaan ID:- Dapat mengandung huruf, angka, atau karakter garis bawah,
- Karakter pertama harus berupa huruf atau karakter garis bawah,
- Diawali dengan tanda #,
- Jangan memberi nama id sama dengan value,
- Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
The quick brown fox jumps over the lazy dog
</h2>
<h3 id = "tebal">
And then it falls into the well
</h3>
</body>
</html>
Penempatan kode CSS dalam HTML
Ada tiga cara penempatan kode CSS dalam HTML:- Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Menguak Rahasia CSS</p>
</body>
</html> - Eksternal CSS
Memanggil file CSS dari luar atau tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
</body>
</html> - Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<p style=”background: red; color: black;”>Menguak Rahasia CSS</p>
</body>
</html>
Selamat! Anda baru saja berhasil menguak rahasia pertama dari CSS. Setelah membaca postingan ini ini, Anda telah memiliki pengetahuan dasar untuk melanjutkan ke rahasia berikutnya: Kumpulan Tag CSS. # Tapi Nanti Dipostingan yang akan datang
Cukup Sekian Dan Terimakasih, Semoga artikel tentang Pengenalan CSS Cascading Style Sheetsini dapat bermanfaat bagi kita semua.
