Pengertian dan Fungsi CSS

Pengertian dan Fungsi CSS - Setelah kita membahas tentang Pengertian HTML, rasanya kurang lengkap rasanya jika materi tentang CSS tidak disertakan. Ibarat HTML itu surat maka CSS adalah perangkonya.

Mengapa Menggunakan CSS?

Jika HTML digunakan untuk membuat struktur tampilan web. Maka CSS digunakan untuk mempercantik tampilan web. Nah lupakan CSS jika kita ingin membuat tampilan web kita biasa aja (baca: jelek) CSS focus terhadap make-up laman web. Sedangkan HTML focus terhadap konten web. Pemisahan ini membuat kita lebih mudah dan efisien dalam mengelola web kita.

Sejarah CSS

1996

CSS level 1 menjadi W3C Recommendation pada 17 December 1996.

1998-99

CSS level 2 menjadi W3C Recommendation pada 11 January 1999 (sumber lain :12 Mei 1998). Level ini ditandai dengan ditambahkannya dukungan untuk media (printers), downloadable fonts, element-positioning dan tables.

2001

Draft CSS level 3 dipublikasikan oleh W3C pada 23 Mei 2001 dan terus dikembangkan hingga sekarang. Ciri dari CSS Level 3 ini adalah dikembangkan

secara modular.

Implementasi CSS Saat ini.

Banyak fitur yang dimasukkan sejak spesifikasi pertama di tahun 2000, meskipun demikian tidak banyak browser yang mendukung fitur tersebut hingga tahun 2006.

Saat ini browser-browser besar (Opera, Firefox, Chrome, IE dan Safari) secara parsial dan bertahap (baca: lambat) mulai menyempurnakan dukungannya pada CSS3

Pengertian CSS

CSS merupakan singkatan dari Cascading Style Sheets, yaitu sebuah bahasa berbasis text yang digunakan

untuk memformat tampilan dari halaman web yang dibuat dengan HTML, misalnya dalam hal pewarnaan, ukuran, posisi dsb. Jika HTML adalah dasar dan batu bata yang membentuk struktur rumah, CSS adalah plester dan cat yang menghiasinya.

Dengan CSS, memungkinkan kita untuk memberikan efek-efek khusus pada isi halaman web secara lebih spesifik. Memungkinkan kita mengubah tampilan beberapa halaman web sekaligus dengan sedikit kode.

Sebenarnya, CSS bukan bahasa pemrograman seperti Javascript, bukan juga bahasa markup seperti HTML. Jadi jangan dibandingkan CSS merupakan W3C Recommendation.

Mulai Menggunakan CSS

Cara Berfikir

Jika kita ingin memformat tampilan web kita dengan mengguanakan CSS, maka cara berfikirnya:

1. Identifikasi elemen HTML yang akan di format. Bisa melalui nama tagnya (p, a, h1),

bisa melalui nama class-nya, bisa melalui nama id nya dst.

2. Tentukan format elemen HTML yang diinginkan seperti warna, ukuran, font, border dst

3. Tentukan nilai dari format tersebut.

Misal: kita ingin semua konten dlam elemen <p> (paragraf) berwarna hijau. Maka:

1. Elemen htmlnya p

p{ }

2. Formatnya warna

p{ color: }

3. Nilai dari formatnya hijau

p{ color: green; }

Jika kode tersebut diaplikasikan kepada dokumen HTML, maka semua konten atau teks dalam elemen paragraph akan berwarna hijau. Mudah bukan?

Skema Dasar CSS

Berikut ini skema dasar dari perintah / kode CSS:

selector

{

property1:value;

property2:value;

property3:value;

}

Keterangan:

Selector => elemen HTML yang akan dikenai aturan CSS, bisa berisi nama elemen, atau identitas lain seperti ID, nilai atribut class.

Property => jenis format yang akan kita implementasikan untuk elemen HTML terpilih, misalnya warna text, warna background, jenis font, warna border dsb.

Value => Nilai masing-masing property dari elemen HTML terpilih. Nilai tergantung dari properti yang digunakan, contoh properties yang berhubungan dengan colour dapat berisi hexadecimal colours seperti #336699, RGB seperti rgb(12,134,22) atau nama colour sperti red, green atau blue. Properties yang berhubungan dengan position maka nilainya dapat berisi margins, width, height Berikut contoh sedehana:

p {:5px; margin font-family: arial; color: blue;}

Artinya: semua elemen P pada halaman HTML akan diformat tampilannya sebagai berikut:

o

jarak antara elemen P dengan elemen lainnya adalah 5 pixel

o

Jenis huruf atau font yang digunakan adalah Arial

o

Warna huruf yang digunakan adalah biru

Spasi Kosong Pada CSS

Sama dengan HTML spasi kosong akan diabaikan di CSS artinya nggak ada efek apapun

kecuali kode CSSmu akan lebih mudah dibaca.

p

{: 5px ; margin 3

font-family : arial ; :;color blue

}

Berfungsinya sama dengan:

p

{

margin :5px; font-family :arial;

color: blue;

}