Bagaimana Menulis CSS?

Dalam hal ini ada beberapa istilah dan kosep dasar dari css. Tapi sebelum menuju pembahasan lebih lanjut, akan lebih baik kita harus membiasakan dengan bagaimana suatu style harus ditulis. Berikut adalah contoh mudah penulisan css pada suatu halaman web:

Contoh CSS 1

NuSinau

NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan.

Sintak CSS (Syntax CSS)

selector (properti: nilai)

body (color: blue)
p {font-family: tahoma}
h1 {font-weight: bold}
dan lain-lain

Selector

Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai. Dalam sebuah selector, setiap properti mempunyai nilai masing-masing dan sejumlah properti dengan nilai-nilai terkait dapat diatur.

Seperti pada contoh diatas; body, p, dan h1 adalah suatu selector dimana warna (color), nama font (font-family) dan jenis font (font-weight) diberi nilai untuk tiap propertinya (tahoma, bold, blue, dll).

Contoh

h1 (font-size: 20px; text-align: left; color: blue; font-family: Arial;)

dapat pula ditulis seperti:

h1 (font-size: 20px;
  text-align: left;
  color: blue;
  font-family: Arial;)

Pengelompokan Selector (Grouping of Selectors)

Seperti dapat dilihat, satu selector dapat memiliki beberapa properti. Dalam konteks yang berbeda, beberapa selector dapat mempunyai properti dengan nilai yang sama. Dengan begitu harus dilakukan pengolompokan selector.

h1 , body , p , ul
   {
         color : blue;
   }

Pada contoh diatas, elemen header, body, paragraph, unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan berwarna biru.

Mengapa Pengelompokan diperlukan dalam CSS?

• Untuk berbagi style yang sama, bila beberapa elemen mempunyai nilai properti yang sama (misalnya font, ukuran, warna, dll).
• Dengan satu perintah dapat memberikan properti style pada elemen yang berbeda dengan nilai yang sama.
• Untuk menghemat waktu bila terjadi penambahan properti dan juga ketika merubah properti di elemen.