Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)

Sebelumnya saya telah menulis artikel tentang pengenalan CSS (Cascading Style Sheet) dan bagaimana cara penerapan CSS pada dokumen HTML. Namun artikel yang berjudul Pengertian CSS dan Cara Penerapan CSS pada HTML itu bukan benar-benar untuk para pemula (newbie) yang benar-benar awam dengan dokumen HTML dan CSS. Oleh karena itu disini saya akan melakukan pembahasan lagi khusus untuk para newbie yang baru memulai niatnya untuk bersama-sama belajar mengembangkan website.
CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. HTML versi 3.2 ini merupakan mimpi buruk untuk para Pengembang Web karena untuk memberi style pada document HTML para pengembang harus membuat tag-tag tersendiri misalkan tag , tag atribut warna dan lain sebagainya pada setiap dokumen HTML yang akhirnya membuat pengembangan web dengan skala besar menjadi lebih kompleks, rumit dan mahal. Dokumen HTML pada awal dibuat memang tidak di maksudkan untuk memformat dokumen sedemikian rupa, HTML di maksudkan untuk mendefinisikan suatu isi dari dokumen. CSS mulai dikembangkan pada HTML versi 4, semua format tag-tag tadi mulai di hilangkan, di ganti, dan di simpan pada file yang diberi nama CSS secara terpisah dan sekarang semua jenis browser sudah mendukung CSS.
CSS memudahkan pembuatan website dalam mendefinisikan bagaimana element-element yang ada di dokumen HTML di tampilkan. Style dokumen HTML nanti disimpan dalam file berekstensi .css. Dengan penerapan style secara external pada satu file css kita dapat merubah penampilan dan layout semua halaman website tanpa harus membuka setiap file HTML dan meng-editnya.
Contoh coding CSS adalah sebagai berikut :

h1 { color :blue; font-size:18px; }

• h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
• Color merupakan properti CSS
• blue adalah nilai dari properti CSS
• Setiap deklarasi atau statement CSS di buat didalam tanda kurawa {   }
• Setiap properti diakhiri dengan tanda titik koma ;

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 */

/* comment : membuat heading */ h1 { color :blue; font-size:18px; }

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 yang disebut class dan id.

selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :

<p id="parameter">ini paragraph</p>

 
definisi id diatas pada CSS akan ditulis sebagai berikut :

#parameter {

    text-align:center;

    color:red;

    font-size:12px;

    font-weight:bold;

}

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 penggunaan misalkan kita memiliki beberapa elemen HTML sebagai berikut:

<h1 class="center">ini paragraph</h1>

<p class="center">ini paragraph</p>

<a href="http://www.w3function.com/" class="center">ini 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 misalnya

<h1 class="center blue largefont">ini paragraph</h1>

 

Semua definisi css di bawah akan diterapkan pada tag HTML diatas

.center {text-align:center;}

.blue {color:blue;}

.largefont{ font-size:18px; }

 

Cara penulisan selector id dan class selain dengan cara yang saya jelaskan di atas juga bisa ditempatkan didepan nama elemen HTML. berikut merupakan contoh penulisannya

p.center {text-align:center;}

h1.blue {color:blue;}

a#largefont{ font-size:18px; }

 

Setelah anda mengetahui dasar CSS berikutnya adalah bagaimana Cara penerapan CSS pada dokumen HTML. Ada tiga cara yang bisa dilakukan yaitu dengan cara External style sheet, Internal style sheet dan Inline style. Lebih lanjut lagi dengan cara penerapan CSS silahkan baca artikel saya yang saya ceritakan di awal : Pengertian CSS dan Cara Penerapan CSS pada HTML. di artikel ini juga ada tutorialnya jadi jangan di lewatkan ya :)

thanks to w3function