Pada artikel sebelumnya saya telah membahas bagaimana cara menggunakan CSS yaitu dengan inline CSS, Embedded CSS dan External CSS. Jika Anda telah memahami bagaimana menggunakan CSS maka sekarang Anda perlu tahu bagaimana cara penulisan dari CSS tersebut.
CSS dapat ditulis dengan struktur penulisan seperti berikut :
Selector {Properties : Value;}
Selector berfungsi untuk menentukan bagian mana yang akan diatur style nya.
Jenis-Jenis Selector CSS
Ada 3 jenis selector yang menjadi basic dari selector CSS, antara lain Class selector, Id selector dan Tag selector
Class Selector
Penggunaan selector jenis ini dapat digunakan secara bebas pada tag HTML apapun yang ada di dalam halaman web Anda. Anda dapat memberikan hampir semua nama apapun untuk penamaan class selector ini. Penggunaan class selector menurut saya adalah yang paling mudah digunakan karena dapat digunakan ke dalam beberapa tag HTML sekaligus. Cara penulisan class selector adalah dengan memberikan tanda (.) titik di depan class tersebut. Contohnya adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Class Selector</title></head>
<body>
<h3 class="judul">Clocarius Belajar Membuat Website</h3>
</body>
</html>
Cara penulisan pada CSS nya adalah :
.judul {
Font : 12pt courier;
}
Berikut ini adalah kode lengkap nya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Class Selector</title>
<style>
.judul{
Font : 12pt Impact;
}
</style>
</head>
<body>
<h3 class="judul">Clocarius Belajar Membuat Website</h3>
</body>
</html>
Saya ingatkan sekali lagi bahwa penggunaan selector class dapat Anda gunakan pada lebih dari satu tag HTML, Anda hanya perlu menuliskan style css nya pada tag HTML yang ingin Anda buat sama tampilannya.
ID Selector
Sebenarnya ID selector juga hampir sama dengan Class selector yaitu dapat digunakan oleh hampir semua Tag HTML, hanya saja penggunaan nya terbatas tidak dapat digunakan lebih dari satu tag HTML. Contoh penulisannya adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar ID Selector</title>
</head><body>
<div id="footer">Copyright @clocarius – 2017</div>
</body></html>
</head>
<body>
<h3 class="judul">Belajar Membuat Website Sederhana Clocarius</h3>
</body>
</html>
Cara menuliskan kode CSS nya adalah seperti ini :
#footer {
color: blue;
border: 1px solid black;
}
Kode lengkap dari cara penulisan ID selector tersebut adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar ID Selector</title>
<style>
#footer {
color: Green;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="footer">Copyright @clocarius – 2017</div>
</body>
</html>
</head>
<body>
<h3 class="judul">Belajar Membuat Website Sederhana Clocarius</h3>
</body>
</html>
Ingat, penggunaan ID selector hanya dapat digunakan satu kali pada sebuah halaman web. Seperti contoh diatas, kita hanya akan mempunyai satu footer pada sebuah halaman web.
Tag Selector
Penggunaan tag selector ini menggunakan nama dari tag HTML tersebut untuk menjadi selectornya, misalnya jika kita ingin mengganti style dari tag <h1> maka kita akan membuat nama selectornya dengan h1. Untuk lebih paham nya mari simak contoh pada kode HTML berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Selector</title>
</head>
<body>
<h1>Belajar CSS dari Clocarius Website</h1>
<h1>Mengenal Struktur Penulisan CSS</h1></body>
</html>
Berikut ini adalah contoh penulisan pada CSS nya :
h1{
font: 14pt Courier;
color: blue;
}
Kode lengkap dari cara penulisan CSS dengan Tag Selector adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Selector</title>
<style>
h1{
font: 12pt Courier;
color: blue;
}
</style>
</head>
<body>
<h1>Belajar CSS dari Clocarius Website</h1>
<h1>Mengenal Struktur Penulisan CSS</h1>
</body>
</html>
Jadi seperti itulah struktur penulisan pada CSS, Anda harus banyak mempelajari dan mencoba masing-masing selector tersebut agar lebih memahami struktur penulisan pada CSS.
Baca Juga : Pengenalan Dasar CSS
