Eh sodare-sodare, kite terusin nyok belajar CSS dan Web Design nye. Kalo sebelumnye kite sudah mempelajari cara membuat dan menuliskan syntax CSS, sekarang kite mao ngebahas soal cara membuat class di CSS.

Apa Itu CSS Class?

Class, ape yang dimaksud dengan class itu ye? Kalo aye perhati'in dari ape yang dijelasin oleh yang nulis ebook CSS dan Web Design ini, class itu kayaknye singkatan dari classification, ato kalo kite Indonesiaken menjadi pengklasifikasian. Yang artinye pengelompokan atau peng-kelas-an, bukan pengelasan lho mpok. Kalo pengelasan, itukan bagiannye tukang las.

Apenye yang dikelompokin bang? Dan ape manfaatnye membuat kelompok-kelompok segale?

Ok, let say... eh koq jadi ikut-ikutan pake bahase Inggris segale, enakan pake bahase betawi aje kali ye. Begini mpok, katakanlah mpok kepingin website yang mpok sedang design itu setiap paragraphnye menggunakan warne item.

Disamping ntu, mpok juga kepingin ade paragraph-paragraph tertentu yang menggunakan warne merah saat mpok kepengen memberi kesan penegasan pada paragraph tersebut. Nah, dengan menggunakan class, mpok bisa melakukan itu dengan lebih nyaman dan mudah.

Ooo.. jadi itu gunanye kite bikin kelas-kelas atau class tadi ye bang. Tapi bagaimana caranya membuat class CSS itu bang? Ribet kaga?

Kaga mpok, ternyate untuk membuat class pada CSS ntu caranye gampang. Cara penulisannye mirip dengan saat kite membuat syntax CSS, mpok masih inget kan cara membuat syntax CSS? Nah, untuk membuat class CSS ini, kite cukup sedikit memodifikasi syntax CSS tersebut. Berikut ini contohnye!

Ini contoh cara menulis syntax CSS untuk membuat paragraph tapi kaga pake class:

p{color: blue;}

Sedangkan kalo kite pake class, maka penulisan syntax CSS nye menjadi sebagai berikut:

p.warnabiru{color:blue}

Jadi cuman itu aje bedanye ye bang. Dikit amat. Tapi ape maksud dari kata warnabiru di depan hurup "p" ntu bang? Ape ntu yang dimaksud dengan class CSS tadi ye?

Betul mpok, kata warna biru ntu, adalah untuk menunjukkan nama dari class dari selector yang ingin kite buat classnye. Mpok masih inget ape yang dimaksud dengan selector ntu bukan?

Nah, untuk memberikan nama class pade suatu selector, kite bisa menggunakan name ape aje. Kite juga bebas untuk menggunakan bahase ape aje. Mau pake bahasa Inggris keq, Indonesia keq, Jawa, Sunda, Madura, Betawi, dan banyak lagi yang laennya. Terserah kite aje, bebas koq. Yang penting kite ngerti artinye.

Tapi ade juga yang harus kite perhati'in saat memilih untuk name class ini mpok. Saat kite memberi name untuk suatu class, sebaeknya dicari name yang membuat kite jadi inget fungsi dari class tersebut. Hal ntu penting kite perati'in. Sebab ape mpok? Sebab hal itu akan memudahkan kite saat ingin menggunakan class tersebut di halaman HTML-nye.

Oooo... jadi class CSS yang kite buat tadi nantinye bakal diguna'in di halaman HTML ye bang? Jadi, class CSS tadi bukan cuman dibuat-buat aje, dan kaga perlu dipake di HTML-nye? Gimane care kite menggunakan class CSS tadi di HTML bang?

Ya jelas dong mpok. Buat ape kite bikin class-class CSS segale kalo kite kaga memerlukannye. Ntu namenye kurang kerjaan mpok. Dan untuk menggunakan class CSS yang sudah kite buat ntu, caranye juga gampang dan kaga ribet. Mpok bisa lihat contohnye dibawah ini:

<p class=”warnabiru”>Paragraph ini akan berwarna biru.</p>

Bener, kan mpok! Untuk menggunakan class CSS di halaman HTML ntu caranye kaga ribet. Bahkan kalo menurut aye, dengan menggunakan class CSS ini, kode kite jadi lebih mudah dan lebih enak untuk dibaca dan dimengerti.

Iye ye bang. Ternyate membuat dan menggunakan CSS ntu kaga seribet yang aye perkira'in sebelumnye. Jadi kite cuma perlu menyebutkan atau menuliskan name class yang sudah kite buat tadi, didepan selectornye. Dan dikurung dengan tanda kutip ("...").

Class CSS Yang Bersifat Umum

Selaen bisa di gunakan untuk menspesifikasikan suatu tag atau selector, class ini juga bisa kite gunakan untuk menspesikasikan properties yang bersifat umum.

Maksudnye begini mpok, katakanlah kite kepengen menggunakan warna biru tersebut bukan hanya untuk tag paragraph aje. Kite juge kepengen mengaplikasikan warna biru tersebut untuk tag-tag lainnye yang juga punye properties warne.

Misalnye tag heading (h). Tag heading ntu kan punye properties warne juga. Yang artinye, properties warne ntu adalah properties yang bersifat umum. Properties warne ntu banyak dimiliki oleh tag-tag HTML laen. Berarti properties warne, bisa kite buat classnye sendiri.

Sekarang kite pake' contoh diatas tadi. Kite akan coba membuat class untuk warne biru. Berikut ini care nulisinnye:

.warnabiru{color:blue}.

Coba lihat perbedaannye mpok. Kalo class yang kite buat di atas tadi, kite buat khusus untuk tag "p" atau tag paragraph. Sedangkan kalo yang disini, kite tidak menuliskan tag nye secare khusus. Yang artinye, class ini bisa kite guna'in untuk tag ape aje. Selame tag tersebut punya properties warne.

Dan untuk menggunakan class yang bersifat umum ini, caranye juga mirip dengan cara diatas tadi. Cuma ade sedikit perbedaannye. Coba mpok perati'in contoh dibawah ini:

<p class=”warnabiru”>Paragrap ini berwarna biru.</p>
<h2 class=”warnabiru”>Heading ini berwarna biru</h2>

Gimane mpok, sudah bisa melihat perbedaanye?

Kelihatannye emang kaga beda. Namun sebenernye ade bedanye. Bedanye? Kalo class yang kite buat pertame tadi, calss ntu cuman bisa kite gunakan untuk tag atau selector p. Sedangkan untuk class yang kedua ini, class tersebut bisa juga kite gunakan pada tag atau selector heading.

Selain ntu, ade perbedaan laenye. Coba mpok perati'in contoh dibawah ini:

<p>Tex ini warnyenye item, <span class=”highlight”>sedangkan yang ini warnenye biru,</span> dan yang ini item lagi.</p>

Dari contoh ntu kite bisa melihat, bahwa class umum untuk warne biru tadi bisa kite aplikasikan pada text-text tertentu dalam paragraph. Yang mane hal seperti ini kaga bisa kite lakukan kalo kite membuat class seperti pada contoh yang pertama diatas tadi.

Itu artinye, kite bisa memilih bagian-bagian text tertentu aje yang ingin kite aplikasikan class nye. Kite tinggal menuliskan tag awal dimane class tersebut akan mulai di aplikasikan. Yaitu dengan cara menuliskan syntax:

<span class=”nama class”>

Dan kemudian memberi tanda sebagai akhir, yaitu dengan menuliskan:

</span>

Nah, gimane mpok? Sudah bisa mengerti maksud dan perbedaannye bukan?

Iye bang, aye mulai ngerti sekaang. Wah, ternyate membuat class dan belajar CSS ntu mudah dan menyenangkan ye bang. Aye tadinye takut mao belajar CSS dan Web Design. Sebab aye sering ngeliat dan ngebaca kode-kode atau syntax CSS ntu sepertinye rumit dan ribet. Apelagi aye kan kaga punya pengetahuan dasar mengenai bahasa pemrograman komputer.

Betul mpok, yang ribet dan rumit ntu mungkin tergantung dari sisi mane kite melihatnye. Kalo belon-belon kite sudah keder alias minder duluan. Ntu artinye kite sudah kalah setengah perjalanan. Kite sudah nyerah sebelon mencoba.

Bahasa atau syntax CSS mpok, ini emang sudah mirip bahkan sama dengan bahasa pemrograman laennye. Karena ntu mpok, kalo kite sudah terbiasa membaca dan menuliskan syntax CSS ini, hal itu akan jadi bekal dasar yang bisa mendukung kite buat mempelajari bahasa-bahasa pemrograman laennye. Misalnye PHP, Java, VB Script, dan laennye.

Sampe disini, berarti ceritenye kite cukupin dulu ye mpok. Besok-besok bakal kite sambung lagi dengan cerite-cerite yang lebih seru lagi.