Perkembangan dan Struktur CSS

Perkembangan CSS.

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh Word Wide Web Consortium ata W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape merilis browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Untuk saat ini, terdapat 3 versi CSS, yaitu CSS1, CSS 2, dan CSS3. CSS1dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel atau table layout dan media tipe untuk printer. Kehadiran versi CSS yang terbaru diharapkan lebih baik dari versi sebelumnya.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasu warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object-Model.

Selanjutnya, bagaimana Struktur CSS?

Sebelum belajar lebih jauh lagi mengenai CSS, sebelumnya kita harus mengetahui bagaiman struktur CSS itu sendiri karena ini adalah bagian dasar dari sebuah CSS. Pada dasarnya sintaks CSS itu terdiri dari tiga bagian yaitu :

• Selector
• Property
• Value

Jika dalam HTML dikennal adanya tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector. Selector adalah nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal atau eksternal. Dalam style tujuan, kita harus menentukan cara tiap selector seharusnya bekerja yang dinamakan properties di dalam tanda { } atau curly bracket yang dapat memiliki nilai berupa font, warna, dan lain-lain. Dalam body di halaman web, dapat kita arahkan ke selector-selector ini untuk mengaktifkan style tersebut.

CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property dan value.

           Body{

          Font-family: Arial, sans-serif;

         }

Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan dijelaskan sebagai berikut.

• Body : selector yang akan diatur stylenya.
• Fony-family : property yang digunakan untuk mengubah jenis huruf yang akan diterapkan pada selector body.
• Arial dan sans-serif : nilai dari property font-family.

Setelah sedikit pembahasan mengenai CSS di atas selanjutnya kita juga perlu mengetahui tool atau software apa saja yang akan digunakan untuk membuat template blog dengan teknologi CSS terbaru yaitu CSS3.

Untuk memulai membuat template dengan CSS3, diperlukan tool untuk menuliskan skrip CSS dan HTML. Hal yang paling sederhana, kita bisa menggunakan text editor bawaan dari windows yaitu notepad. Akan tetapi saya sarankan menggunakan editor yang memiliki fasilitas lebih khusus untuk menuliskan skrip CSS dan HTML. Berikut contoh-contoh program editor yang biasa digunakan dalam penulisan skrip CSS dan HTML.

• Adobe Dreamweaver
• Aptana Studio
• Netbean
• Sublime text
• Notepad++

Kalau saya pribadi lebih sering menggunakan Notepad++ (baca: notepad plus-plus) karena editor ini bisa dibilang lebih ringan daripada yang lainnya, selain itu Notepad++ ini juga memiliki fitur yang cukup lengkap, dan tentunya gratis. Untuk mendapatkan Notepad++ kita hanya perlu berkunjung ke situsnya disini dan men-download aplikasinya secara gratis.

Selain itu kita juga perlu menginstal web browser versi terbaru karena umumnya  browser terbaru sudah mendukung secara penuh teknologi CSS3. Disini saya sarankan menggunakan Google Crhome.

Setelah semua tool dan sofware yang kita perlukan terpasang semua, selanjutnya kita sudah bisa membuat tempalte blog/website dengan menggunakan teknik CSS3.

Setelah sekilas membahas mengenai dasar CSS, pada artikel berikutnya kita akan mulai masuk ke dalam perancangan (sederhana) CSS.