Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. (source : wikipedia)

Mungkin yang belum pernah dengar kata CSS di dalam benaknya bertanya-taya, "Apa sih CSS itu?", "Bagaimana bentuk dan cara penulisan CSS itu?", Nah Sebelum memasuki kepada pembahasan CSS dasar MWcrew akan menjawab pertanyaan yang ada di atas tersebut, agar kita semua tahu apa itu CSS.

Apa itu CSS?

CSS ialah singkatan dari "Cascading Style Sheet" jika diartikan dalam bahasa Indonesia ialah "Bahasa Lembar Gaya".CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup/markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai :

CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membuat layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.

Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu :

1. Metode Table
2. Metode Div

Manfaat dari CSS

Dibawah ini adalah beberapa manfaat dari CSS yang saya tahu :

1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript.
5. Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

1. Header
2. Menu
3. Content
4. Footer

untuk penjelasan mengenai apa itu header,footer,menu dll....baca postingan "Knowing Structure of Blogger Template"

How its Work?

Cara kerja CSS itu sangatlah mudah, kita hanya perlu menulis style nya (selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

CSS Syntax (Aturan Penulisan)

Aturan penulisan dalam CSS sangatlah mudah dan simple, untuk contohnya lihat gambar dibawah ini :

Struktur Penulisan CSS

Untuk lebih jelasnya lihat contoh langsung dibawah ini.

Contoh 1 :

Selector_id{
   property:value;
}

Contoh 2:

Selector_class {
   property:value;
}

Contoh 3 :

Tag_html {
   property_1:value;
   property_2:value;
   ...
   ..
   ..
   property_n:value;/*anda bisa menambahkan lebih dari 1 property*/
}

Prosedur Penulisan :

• Penulisan diawali dengan selector atau tag_html
• Kemudian tambahkan kurung kurawal buka ({)
• Setelah itu barulah kita tulis property nya
• Setelah menulis property lanjutkan dengan : (titik dua)
• Setelah : (titik dua), masukan valuenya
• Setelah menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value
• Jika kita tidak menambahkan property:value lagi akhiri dengan kurung kurawal tutup (}) fungsinya munutup selector

Penulisan Comment

Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */.

Contoh :

/*Membuat heading */
h1 { 
   color :blue; 
   font-size:12px; 
}

Macam-macam Selector

Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus. Ada beberapa selector yang ada di CSS ini, yaitu :

• Selector Id
• Selector Class

Selector Id

Selector id digunakan untuk menempatkan style pada element yang unik.

Note

Pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama

Attribut id dari elemen HTML di definisikan dengan tanda pagar #.

Contoh :

#coba {
    text-align:center;
    color:blue;
    font-size:12px;
    font-weight:bold;
}

Untuk pemanggilan Id "coba" diatas maka kita perlu menggunakan struktur pemanggilan seperti ini :

<p id="coba">
    ini adalah contoh paragraf
</p>

Selector Class

Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik [.]

Contoh :

<h1 class="center">
     Contoh penerapan Selector Class
</h1>

<p class="center">
     Ini adalah contoh paragraf
</p>

<a href="http://mwcrew10.blogspot.com.com/" class="center">
     Ini adalah contoh link
</a>

Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah.

.center {
    text-align:center;
} 

Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi.

Contoh

.center {
    text-align:center;
} 
.blue {
    color:blue;
}
.bigfont { 
    font-size:24px; 
}

Semua definisi css di atas akan diterapkan pada tag HTML dibawah ini :

<h1 class="center blue largefont">
   Ini adalah contoh penerapan Selector class yang lebih dari  satu selector
</h1>

Setelah anda mengetahui dasar CSS berikutnya adalah bagaimana Cara penerapan CSS pada dokumen HTML. Ada tiga cara yang bisa dilakukan yaitu dengan cara :

1. External style sheet
2. Internal style sheet
3. Inline style.