Jumat, 01 Maret 2013

Tutorial CSS (Cascading Style Sheet)

Bagi para web programer tentunya sangat familiar dengan yang satu ini. CSS atau singkatan dari Cascading Style Sheet merupakan suatu dokumen yang digunakan oleh para web programer untuk mengatur halaman web yang mereka program. CSS ini lebih menekankan ke dalam dunia desainnya, ya dari namanya saja sudah Cascading Style Sheet. Mari kita ulas lebih mendalam tentang CSS ini.

Beberapa ulasan tentang CSS :

  • CSS singkatan dari Cascading Style Sheets
  • Styles didefinisikan bagaimana manampilkan elemen HTML
  • Styles umumnya disimpan ke dalam Style Sheet
  • Styles ditambahkan HTML untuk membantu pekerjaan
  • External Style Sheets dapat membantu banyak pekerjaan
  • ExternalStyle Sheet disimpan dalam CSS files
  • Multiple Style dapat didefinisi banyak jendela menjadi satu

CSS ini sangat sederhana dalam pembuatannya, tidak membutuhkan program khusu untuk memasukkan perintah-perintahnya. Sebuah notepad sederhana pun dapat digunakan untuk membuat script CSS ini yang penting anda dapat memahaminya. CSS dapat digunakan untuk mengatur style-style daripada dokumen halaman web yang ingin ditampilkan. Dalam hal ini dapat dikatakan sebagai desain template daripada halaman website tersebut. CSS ini bukan suatu keharusan digunakan dalam mendesain web, namun apabila diterapkan akan membuat tampilan website semakin menarik sebab CSS mempunyai efek-efek khusus didalamnya. Selain itu CSS juga sudah sangat support pada kebanyakan browser yang kita gunakan. CSS saat ini sudah mencapai level yang ketiga setelah mengalami perkembangan dari dua level sebelumnya. Beberapa keuntungan yang bisa kita dapatkan dari penggunaan CSS ini :

  • Ukuran file lebih kecil
  • Load file lebih cepat
  • Dapat berkolaborasi dengan JavaScript
  • Pasangan setia XHTML
  • Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
  • Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja, dll.

Bagaimana penulisan CSS ?




Keterangan :

  • SelectorBagian pertama sebelum tanda “{}” disebut selector. Selector adalah tag html yang sudah umun diketahui.
  • DeclarationTerdiri dari property dan nilainya. Property adalah atribut yang anda ingin ubah dan tiap property mempunyai nilai/value.
Catatan :


  • Jangan ada spasi antara property value dengan unitnya.
  • Nama property bersifat case sensitif dan menggunakan huruf kecil.
  • Jika nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai.
  • Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property lain.
  • Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda koma.

Bagaimana penempatan script CSS ?


  • Internal CSS : yaitu penempatan script CSS langsung pada file HTML dokumen tersebut. Contohnya :
  • Eksternal CSS : yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention ***.css. Contohnya :
  • Inline CSS : yaitu penulisan script CSS langsung pada tag HTML yang bersangkutan. Contohnya :
Sekianlah sedikit pengenalan tentang CSS, untuk lebih mendalamnya akan saya bahas pada artikel selanjutnya.
Terima Kasih.

Related Post:

2 komentar:

  1. DAFTAR AGEN JUDI TARUHAN IDN POKER ONLINE S1288POKER

    KUNJUNGI FREECHIP SITUS RESMI POKER INDONESIA TERMURAH DAN TERPECAYA

    MASIH BANYAK PERMAINAN CASINO LIVE POKER CEME SABONG AYAM DAN PERMAINAN LAIN SERUNYA !! TENTUNYA EVENT BONUS PROMO SETIAP BULAN NYA YANG MANTAPPP ^^
    CS 24jam Online
    JANGAN SAMPAI KEHABISAN FREECHIPSNYA !!

    BalasHapus