Tutorial Cascading Style Sheet (CSS) - Syntax CSS

Kalau dalam tutorial CSS sebelumnya dibahas sekilas tentang CSS, selanjutnya disini kita akan lebih dalam lagi belajar syntax CSS yang lebih kompleks. Untuk itu sebelum kita mulai, maka prsiapkan dulu tenaga, stamina, kalo perlu sediakan suplemen, agar peperangan kita nanti lebih dahsyat....he3..kayak jaman penjajahan aja mo perang.
Baiklah, di tutorial terdahulu dipaparkan sekilas tentang "Selector" dan "Declaration" pada kesempatan kali ini akan dijabarkan secara lengkap mengenai kedua hal tersebut, yang disertai dengan contoh kasus, agar pemahaman tentang syntax CSS lebih dipahami bagi yang ingin memperdalam pengetahuannya tentang CSS.

Selector
Selector bisa berupa elemen HTML juga bisa berupa id atau class. Untuk selector berupa elemen HTML sudah di bahas di tutorial sebelumnya, sekarang akan kita bahas selector yang lain yaitu berupa id dan class.
Untuk selektor berupa id, ditandai dengan menggunakan karakter hash (#), orang kita menyebutnya tanda pagar, sedang selector berupa class dintandai dengan menggunakan karakter dot (.). berikut contoh penerapannya selector-selector tersebut.

Selector id


<style>
#id1{
    text-align: center;
    color: red;
}
</style>

pada script diatas kita membuat selector untuk id dengan nama #id1, dimana propertinya berupa perataan teks (text-align) dengan value center dan properti yang kedua berupa pewarnaan text dengan properti color dengan value red (merah). Dari id yang dibuat akan diterapkan untuk elemen html dalam hal ini pada elemen p (paragraf). Berikut contoh script lengkapnya dan disimpan dengan nama css_id.html dan panggil melalui browser.


<!DOCTYPE html>
<html>
<head>
<style>
#id1{
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p id="id1">Hallo Guy's</p>
<p>Paragraf ini tidak disertakan id. Sehingga setiap awal penulisan dimulai dari tepi kiri. </p>

</body>
</html>

Selector class
Kita akan membuat selector class dengan nama .tengah dimana propertinya berupa perataan teks dan pewarnaan. berikut contohnya :


.tengah{
    text-align: center;
    color: red;
}

Dan contoh penggunaan selector class adalah seperti gambar dibawah ini, simpang dengan nama css_class.html dan lakukan pemanggilan pada browser.


<!DOCTYPE html>
<html>
<head>
<style>
.tengah {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="tengah">Heading yang ditengahkan dengan warna merah</h1>
<p class="tengah">Paragraf yang ditengahkan dengan warna merah</p>

</body>
</html>

Dari contoh tersebut bisa dilihat bahwa heading juga ditengahkan karna di dalam elemen h1 diikutsertakan class="tengah", tapi jika hanya ingin mengatur propertinya untuk elemen tertentu, maka selector bisa ditulis dengan menyebutkan elemenya dan diikuti selector class, misal dalam hal ini yang akan ditengahkan hanya elemen paragraf p saja sedang elemen heading h1 tetap.
berikut contohnya menuliskan elemen khusus yang diikuti selector class.


p.tengah{
    text-align: center;
    color: red;
}

dan contoh script selengkapnya adalah sebagai berikut :


<!DOCTYPE html>
<html>
<head>
<style>
p.tengah {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="tengah">Heading tidak terpengaruh dengan pemberian properti class ini</h1>
<p class="tengah">Paragraf yang ditengahkan dengan warna merah</p>

</body>
</html>

dan hasilnya akan tampak pada gambar dibawah.

Dalam contoh berikutnya, elemen HTML juga dapat mengikutsertakan lebih dari satu kelas.
Pada contoh di bawah ini, elemen p akan ditata sesuai dengan class = "tengah" dan class = "besar":


<p class="tengah besar">Paragraf ini memiliki 2 properti, yaitu ditengahkan dan ukurannya diperbesar.</p>

Contoh script selengkapnya seperti berikut :


<!DOCTYPE html>
<html>
<head>
<style>
p.tengah {
    text-align: center;
    color: red;
}

p.besar {
    font-size: 300%;
}
</style>
</head>
<body>

<h1 class="tengah">Heading tidak terpengaruh dengan pemberian properti class ini.</h1>
<p class="tengah">Paragraf yang ditengahkan dengan warna merah.</p>
<p class="tengah besar">Paragraf ini memiliki 2 properti, yaitu ditengahkan dan ukurannya diperbesar.</p>

</body>
</html>

Dan hasilnya seperti berikut :

CSS comment
Bagi para programmer, untuk mempermudah melacak script yang segudang banyak code css, biasanya menggunakan baris komentar dari properti yang dibuat.
Untuk membuat baris komentar, agar baris ini tidak akan di eksekusi oleh program maka pada baris ini menggunakan karanter /* dan diakhiri dengan karakter */ yang bersifat multiple line, artinya ketika pada suatu baris di letakkan karekater /*, maka mulai dari baris tersebut akan dianggap sebagai baris komen saja sampai ditemukan karakter penutup komen */.
Contoh untuk baris komen tersebut adalah :


p.tengah{
    text-align: center;
    /*  ini adalah baris komen untuk dibaris ini saja */
    color: red;
}

/* sedang ini adalah baris komen
sampai ditemukan tanda koment penutup berupa */

contoh penggunaannya seperti berikut :


<!DOCTYPE html>
<html>
<head>
<style>
.tengah {
    text-align: center;
     /*  ini adalah baris komen untuk dibaris ini saja */
    color: red;
}

/* sedang ini adalah baris komen
sampai ditemukan tanda koment penutup berupa */
</style>
</head>
<body>


<h1 class="tengah">Heading yang ditengahkan dengan warna merah</h1>
<p class="tengah">Paragraf yang ditengahkan dengan warna merah</p>

</body>
</html>

Dan hasilnya di browser akan tampak seperti berikut :

Demikian tutorial untuk syntax CSS, semoga bisa menambah pemahan kita tentang syntax-syntax css. Dan nantikan tutorial CSS sslanjutnya agar kemampuan kita untuk bisa membuat aplikasi atau desain web yang kita buat semakin indah. Trimakasih.

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Syntax CSS