Aturan Penulisan CSS

Dalam penulisan CSS ada aturan yang digunakan, pada CSS ada komponen utama dalam penulisannya yaitu Selector dan Declarator.
Perhatikan contoh dasar penulisan CSS di bawah ini :

Selector { Declarator };

Selector merupakan tag dari penulisan HTML semisal h1, h2, p, b dan lain-lain.
Deklarator adalah yang memerintahkan browser untuk membuat tampilan pada selector sesuai dengan perintah yang ada pada declarator.
Sedangkan declarator terdiri dari property dan value.

Contoh kecil :

Biasanya pada penulisan artikel banyak digunakan tag <p> atau paragraf, jika anda ingin merubah penulisan font dari artikel anda pada paragraf, pada CSS penulisannya adalah sebagai berikut:

p { font-family : Arial };

Tag <p> merupakan selector daro paragraf dan yang berada dalam kurung kurawal adalah declaratornya yang memerintahkan browser untuk menampilkan artikel paragraf dengan font Arial. Sedangkan font-family adalah property dan Arial adalah value nya.

Detail rumusnya sebagai berikut :

Selector { property : value };

Rumus di atas merupakan kunci anda untuk meguasai CSS, dan terus anda ingat sebenarnya CSS itu sangat sederhana sekali dan sangat simple.

Selector ID dan Selector Class
Selain selector yang bisa ditulis secara langsung dengan menghilangkan tanda <...>, semisal <p> cukup anda tulis p saja, dan selector lain yang tidak kalah pentingnya yaitu selector ID dan selector Class.
Coba anda bayangkan jika anda mau merubah tampilan tag <p> dan tampilannya berlainan semisal untuk font, anda 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> anda menginginkan font nya dirubah menjadi Verdana, untuk itu anda membutuhkan selector ID dan selector Class.

Selector ID

Fungsi dari selector ID adalah untuk memberi tanda supaya pada tag HTML yang sudah diberi id bisa diberi format lain.

Sebagai contoh :

Penulisan pada tag HTML
<p id="test"> disini anda menulis artikel </p>
<p> Tulisan artikel anda yang lain </p>

Disini anda memberi selector ID dengan nama test, dan pada halaman CSS anda bisa memberi kode sebagai berikut:

p{font-family:verdana};
#test{font-family:arial};

pada selector ID penulisan ID ditandai dengan tanda "#".
yang berarti artikel pada tag p yang sudah diberi ID akan dibaca font menajdi Arial, sedangkan tag p yang lain dibaca menggunakan font Verdana.
 

Selector Class

Untuk selector class fungsinya sama dengan selector id, namun pada selector class anda bisa memberi lebih dari satu selector class, tetapi pada selector id anda tidak bisa memberi nama id yang sama.

Contoh penulisan selector class :

Pada tag HTML:
<p class="media"> Artikel anda disini </p>

Pada CSS :
.media {font-famili:calibri};

Pada selector Class penulisan Class ditandai menggunakan tanda " . "

Kesimpulannya adalah :
Pada kedua selector ini fungsinya sama, namun yang membedakan adalah pada selector ID anda tidak bisa membuat lebih dari satu dengan kata lain selector ID digunakan untuk yang spesifik.
Sedangkan selector class, anda bisa menaruh selector Class pada tag HTML lebih sari satu, namun semua itu nantinya tergantung akan kebutuhan anda.