Konsep Dasar CSS

Sep 04, 2009 6 Comments by Nu

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


%MINIFYHTMLd8d5bb7579f2bcc76cc9197316f972ca6%

NuSinau

NuSinau adalah suatu website tempat berbagi berbagai ilmu pengetahuan.

%MINIFYHTMLd8d5bb7579f2bcc76cc9197316f972ca2%

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.

Kata Kunci

Sintak CSS, konsep dasar css, konsep html, struktur dasar css, 3 elemen pengelompokan css, elemen body beserta sintaknya, istilah dasar syntax css, sintak dasar css, sintak dasar css style.

HTML, XML, CSS
Nu

Tentang Penulis

Mantan Tentor SD dan SMP, mantan Guru SMA, mantan Dosen PT, mantan IT Helper, mantan Programmer, mantan IT Analyst.... Sekarang... Berusaha jadi pengangguran, masih muda, masih belajar.... Jangan panggil saya pak!... Butuh diskusi cepat? colek di twitter @nusinau

6 Responses to “Konsep Dasar CSS”

  1. Maki says:

    Iya.tulisanya berguna buat saya.terima kasih^^

  2. msandi says:

    bro, ada gak caranya mengupload web yang sudah jadi ke dunia maya. ketika web yang saya sederhananya sudah jadi. Kira2 yang gratis utk sementara, biar mengetahui hasilnya. dan bagaimana jika data basenya tidak usah ikut diupload, sehingga di atas (satelit) hanya program dasarnya aja, tapi databasenya ada di laptop yang. Takutnya kalau diatas Pentagon Tau Data2 yang kita inputkan. Itu caranya gimana bro, :) aq udah makai CSS dan HTML. Tlong balasannya (msandi808@gmail.com)

    • Nu says:

      upload aja ke server saya… :p
      tak kasih subdomain buat ngetes… boleh lhoo…

      upload programnya ke server, database arahkan ke laptop mas andi dengan ip static-nya.. selesai mas.

      kok sampe pentagon?….. wah hebat kali ms andi infomasinya… :)

  3. putRaaLdy says:

    Saya malah pusing nih.
    gimana ya biar gampang belajar CSS ??

  4. Ramdan says:

    Bro, Saya newbie dan gaptek banget nih brow soal ilmu komputer. Tapi saya ada tugas untuk buat web suatu organisasi. Bisa beritahu langkah – langkah buat web. Mohon bantuannya, terima kasih.

Leave a Reply