Sekilas Tentang CSS

Sekilas Tentang CSS

Dalam buku CSS2 Stylist: menata Gaya Halaman Web dengan CSS2, ada satu pengertian dan penjelasan yang menarik tentang CSS. Dalam buku tersebut dijelaskan bahwa:

CSS (Cascading Style Sheet) adalah suatu bahasa yang di khususkan untuk mengatur gaya atau layout sebuah halaman web. CSS digunakan oleh pembuat halaman web dan juga pengakses halaman web, unutk mendefinisikan warna, huruf layout,dan aspek-aspek presentasi dokumen lainnya. CSS memang didesain untuk memisahkan antara isi dokumen (yang ditulis menggunakan HTM atau bahasa lain yang sejenis) dengan bentuk presentasi dokumen (ditulis dalam CSS). Pemisahan ini memberikan keuntungan akan adanya peningkatan dalam aksesibilitas isi, menyediakan flesksibilitas lebih, dan pengendalian terhadap spesifikasi karakteristik bentuk presentasi, serta mereduksi kompleksitas dan perulangan-perulangan pada struktur isi.

Selain HTML, suatu bentuk markup lainnya, yaitu XML, juga dapat memanfaatkan CSS ini untuk mengatur gaya tampilan yang diinginkan. Dalam implementasinya, CSS didefinisikan melalui kode-kode style sheet yang dapat disertakan pada file HTM itu sendiri, atau terpisah dari file HTML. Jika terpisah maka file style sheet tersebut harus diberi ekstensi .css untuk menandai bahwa file tersebut adalah file CSS. Setelah itu, file CSS dapat di referensi oleh file HTML.

Berikut ini saya akan mengenalkan CSS penting yang harus dipahami untuk membuat sebuah template.

Variable Definitions

Bagian ini adalah bagian-bagian yang akan mengatur blog anda, antara lain warna blog, jenis dan ukuran font yang akan digunakan, serta posisi sidebar dan halaman posting (apakah di kanan atau di kiri). Untuk pengaturan warna dan jenis font serta ukurannya, biasanya kita akan mengedit pada bagian Layout > font and Color. Disini saya hanya menjelaskan cara kerjanya.

Berikut adalah contoh penggunaanya.

<Variable name=”bgcolor” description=”Page Background Color” type=”color” default=”#fff” value=”#ffffff”>

Pada contoh diatas, artinya bahwa warna background blog kita adalah #ffffff (warna putih) dan secara default akan berwarna #fff (putih) pula.

Contoh lain:

<Variable name=”titlecolor” description=”Post Title Color” type=”color” default=”#c60” value=”#cc6600”>

Maksud variable diatas adalah warna judul pada posting blog kita adalah#cc6600 (oranye)

Contoh lain:

<Variable name=”pagetitlefont” description=”Blog Title Font” tye=”font” default=”normal normal 200% Georgia, serif” value=”normal normal 200% Georgia, serif”>

Variable diatas akan mengatur jenis font pada judul kita.

Satu lagi contoh:

<Variable name=”startSide” description=”Side where text starts in blog language” type=”automatic” default=”left” value=”left”>

Variable diatas akan mengatur posisi blog kita di sebelah kiri.

Variable-variabel diatas akan diletakkan pada CSS blog. Bentuk pendefinisiannya adalah dengan cara menambahkan karakter “$” pada bagian depannya.

Berikut contoh pendefinisian variable-variabel tersebut.

#outer-wrapper {

                Width: 620px;

                Margin : 0 0 10px 384px;

                Padding : 0;

                Text-align: $startSide;

                Font : $bodyfont;

                Background : url (http://lh5.ggpht.com/_tSekPjjuxt8/SdQckJFUReT/AAAAAAAAABU/nCuCrmQb0FQ/kontu_03.gif) repeat-x;

}

Berikut ini adalah penjelasan kode diatas.

Text-align:$startSide; maksudnya bahwa teks diarahkan rata sebelah kiri

Font: $bodyfont; maksudnya teks akan berjenis sesuai dengan  yang ada pada variable.

Widht

Widht adalah istilah untuk mengatur lebar bagian-bagian pada blog.

Contoh:

#sidebar-wrapper {

                widht :220px;

                float: $sendside;

                word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

                overflow: hidden; ?* fix for long non-text content breaking IE sidebar float */ }

maksud kode diatas “lebar sidebar blog kita adalah 220px”.

Height

Heigh adalah istilah untuk mengatur tinggi pada bagian-bagian blog.

Margin

Margin adalah kode untuk mengatur batas jarak, misalnya jarak antara header blog dengan batas atas, bawah,kiri,kanan browser, atau jarak, misalnya antara sidebar dengan halaman posting. Biasanya margin diikuti dengan keterangan sebagai berikut.

Margin-top                         : mengatur jarak batas bagian atas

Margin-bottom                                : mengatur jarak batas bagian bawah

Margin-$startSide           : mengatur jarak batas bagian kiri

Margin-$endSide            : mengatur jarak batas bagian kanan

Sata beri contoh:

Margin-top: 0;

Margin-bottom: 0;

Margin-$startSide: 10px;

Margin-$endSide: 384px;

Eterangan-keterangan di atas bisa disingkat menjadi:

Margin: 0 0 10px 384px;

Urutan ukuran margin di atas disingkat searah jarum jam.

Padding

Dari pengalaman saya membuat template blog, fungsi padding dan keterangannya hampir sama dengan fungsi margin, walaupun sebenarnya keduanya berbeda.

Related Post: