Aturan Penulisan CSS

Pada artikel kali ini, lanjutan dari artikel sebelumnya yaitu tentang Cara Menguasai CSS. Seperti yang sudah sundaku sarankan kepada sobat pada artikel sebelumnya yaitu menyiapkan segelas kopi sebelum membaca artikel ini, agar terhindar dari rasa ngantuk, pusing dan bosan.. hihihi.

Baiklah sobat, mari kita lanjutkan.




Aturan penulisan CSS

Dalam penulisan CSS ada aturan yang harus sobat patuhi, untuk digunakan pada CSS ada komponen utama dalam penulisannya yaitu Selektor dan Deklarator.

Perhatikan contoh dasar penulisan CSS dibawah ini :

Selektor { Deklarator};

Apa itu Selektor?
Selektor merupakan Tag dari penulisan HTML semisal H1,H2,p,b dll.

Apa itu Deklarator?
Deklarator adalah yang memerintahkan browser untuk membuat tampilan pada 
selector sesuai dengan perintah yang ada pada deklarator.

Masih bingung kan sobat? Mari kita bahas lebih lanjut lagi.

Deklarator terdiri dari Property dan Value
Contoh kecil :
Biasanya pada penulisan artikel banyak digunakan Tag <p> atau paragraph, jika sobat ingin merubah penulisan font dari artikel sobat pada paragraph, pada CSS 
penulisannya adalah sebagai berikut :

p {font-family: verdana};

Kode diatas merupakan selektor dari paragraph dan yang berada dalam kurung kurawal adalah deklaratornya yang memerintahkan browser untuk menampilkan artikel paragraph dengan font verdana.

Sedangkan font-family adalah Property dan verdana adalah Value. Untuk detail rumusnya sebagai berikut ini :

Selektor  { Property : Value };

Rumus diatas merupakan kunci sobat untuk menguasai CSS, dan perlu terus sobat ingat.

Sebenarnya CSS itu sangat sederhana sekali dan simple.

Selektor ID dan Selektor Class


Selain selector yang bisa ditulis secara langsung dengan menghilangkan tanda <…> semisal <p> cukup sobat tulis p saja, ada selektor lain yang tidak kalah pentingnya 
yaitu selector ID dan selektor Class.


Coba sobat bayangkan jika sobat mau merubah tampilan tag <p> dan tampilannya berlainan semisal untuk font, sobat bisa menentukan tag <p> di CSS tetapi jika pada penulisannya p {font-family:arial} maka semua tag <p> akan dirubah menjadi font Arial semua.

Bagaimana jika salah satu pada Tag <p> sobat menginginkan Font nya dirubah 
menjadi Verdana, untuk itu sobat membutuhkan Selector ID atau Class.

Apa itu Selector ID?

Fungsi dari selektor Id adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi ID bisa di beri format lain.

Sebagai contoh :
Penulisan pada Tag HTML
<p id= “toc”> disini sobat menulis artikel </p>
<p> Tulisan artikel sobat yang lain</p>

Disini sobat memberi Selektor ID dengan nama toc, dan pada CSS sobat bisa memberi code sebagai berikut ini :

P (font-family:verdana}
#toc{ font-family:arial}

Pada selector ID penulisan ID ditandai menggunakan tanda ‘ # ’ Yang berarti artikel pada p yang sudah diberi ID akan dibaca font menjadi arial, sedangkan p yang lain dibaca menggunakan font verdana.

Apa Itu Selector Class?

Untuk selektor Class fungsinya sama dengan selektor ID namun pada selektor Class sobat bisa memberi lebih dari satu selector class tetapi pada selektor ID sobat tidak bisa memberi nama ID yang sama.

Contoh penulisan Selektor Class :
Pada Tag HTML
<p class=”media”> artikel anda disini</p>

Pada CSS :
.media {font-family:calibri}

Pada selektor Class penulisan Class ditandai menggunakan tanda ‘ . ’

Kesimpulannya adalah :
Pada kedua selektor ini fungsinya sama, namun yang membedakan adalah pada 
selektor ID sobat tidak bisa membuat lebih dari satu dengan kata lain selector ID 
digunakan untuk yang spesifik.

Sedangkan selektor class sobat bisa menaruh Selektor Class pada Tag HTML lebih dari satu, namun semua itu nantinya tergantung akan kebutuhan sobat.

Baiklah sobat, pada artikel kali ini sampai disini dulu ya, nantikan post selanjutnya terkait Aturan Penulisan CSS . Supaya sobat tidak ketinggalan, berlanggananlah via email supaya sobat tidak ketinggalan post terbaru dari Sundaku.

Baca ke tahap selanjutnya dengan cara Klik DISINI

Terima kasih


Salam,