A ku kagum dengan blogger-blogger ni sebab pengetahuan mereka dalam coding html. Terus terang aku cakap, aku fail bab html ni. Mungkin coding php WordPress boleh la sikit-sikit, tapi html/xml dan segala benda yang seumpamanya termasuk CSS memang fail. Itu sebab kurang sikit tutorial pasal design dalam blog ni. Tapi aku suka benda cantik, dan aku menghargai benda cantik.

Setelah mengetahui istilah koding dalam template blog sekarang kita masuk ke pembahasan yang lebih spesifik, yaitu memahami syntax atau kalimat yang berhubungan dengan CSS.

Template Blogger didesain berdasarkan gabungan antara kode CSS dan HTML atau sering disebut sebagai  XML, Dimana CSS digunakan untuk mengatur desain tampilan  sedangkan HTML merupakan kode perintah untuk mengatur isi tampilan. Wah, bingung ya bahasanya, jadi kita pakai contoh saja agar tidak bingung dengan kalimat ini.

Jadi begini dalam setruktur template blog itu ada dua susunan yang harus saling menunjang.
Sebagai contoh, Saat pertama kali kita mengunjungi salah satu web atau blog kita akan menyaksikan tampilan berupa Logo atau judul blog, background warna atau gambar, sidebar kiri, kanan atau kiri kanan (sesuai selera pemilik), judul dan keterangan singkat isi postingan, Foto, ada juga yang menampilkan gambar slide pada halaman pertama.

Nah tampilan2 pada halaman blog tersebut tata letaknya agar menarik tapi tidak memberatkan loading blog maka di gunakan metode CSS. Jadi CSS ini hanya untuk menyusun tata letak atau perwajahan pada tampilan blog atau web. Sedangkan yang kedua berisi kode HTML atau kode Java untuk menjalankan perintah CSS.

Dengan menggunakan CSS, akan lebih mudah untuk mengatur style elemen halaman web. Sebagai contoh, misalnya untuk mengatur style elemen heading, Kita menginginkan jenis font Arial, 20 pixel, berwarna merah. Dengan CSS, kita cukup menuliskan properti dari elemen heading tersebut sekali saja, kita tidak perlu mengatur style pada setiap elemen heading yang ada.

Syntax CSS terdiri dari beberapa peraturan dalam menulisnya yaitu :
1 selector,
1 property, dan
1 value.
Dimana selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya. sebagai contoh misalnya :
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color (warna) merah (red) pada h1. Maka seluruh atribut dibawah h1 akan menjadi warna merah.

Pengelompokan Selectors
kita dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma.
Misalkan kita mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Ok kita lanjutkan pembahasannya...

Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ). Sebagai contoh
h1,h2,h3 {color:red; font-family:arial; font-size:15px;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 15 px.

Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.

p {
color: red;
}
em {
color: green;
}

<h1>Ini adalah heading 1</h1> <p> Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p>

<h1><em>Ini adalah heading 1</em></h1> <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p>


Pada gambar jelas terlihat semua tag p akan berwarna merah sedangkan tag em berwarna hijau. Tulisan Ini adalah heading 1 yang pertama tetap berwarna hitam karena tidak di apit oleh tag p, sedangkan tulisan Ini adalah heading 1 yang kedua berubah warna menjadi hijau karena di apit oleh tag em yang memiliki value hijau. Dalam memberi tag,  harus ada tag pembuka dan  penutup.

contoh :
tag pembuka  p <p> dan tag penutup p </p> demikian dengan tag <em> </em>  demikian juga untuk semua atribuat yang diberikan tag, harus ada pembuka dan penutupnya.

Cara Penulisan yang baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca saja.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:1px;
}

Sekarang kita sudah mengerti aturan dasar penulisan kalimat CSS. Bahasan berikutnya mengaplikasikan kode CSS ke halaman website.

CSS Comment
Kadang kala, ada baiknya kita menuliskan komentar ke dalam kode CSS kita untuk memberi catatan
pengingat. kita bisa menggunakan syntax pembuka ( /*)  dan penutup (*/) untuk menuliskan komentar. Segala teks yang berada di antara tag ( /*) dan (*/ ) tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri kita.

/* Tulis komentar kita di sini */
p
{
text-align: justify;

/* Tulis komentar kita di sini */

color: blue;
font-family: arial;
}

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
1. Inline CSS
2. Embed atau memasang kode css ke dalam bagian <head>
3. Nge link ke external CSS
4. Import CSS file
Yuk kita bahas satu per satu...

Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak  memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika kita mau memformat suatu elemen satu kali saja.

<P style=”color:blue”>
Isi paragraf.
</p>

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen  paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen  paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property:  value.

Embedded CSS
kita bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini  diawali dengan tag <style> dan diakhiri dengan tag </style>.

Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. kita lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang kita buat. Dengan cara ini, kita hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web kita. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.

Contoh:
kita membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small;}
h1 {color: red; }

Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan  kode di bawah ini, di antara tag <head> dan </head>

<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

Import CSS
kita bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:

@import "style.css";
atau
@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik. Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right. Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet. Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt

Dalam setiap penambahan sebuah element juga harus disertai dengan kode CSS untuk mengkonfigurasi  tampilannya, jadi ketika menambahkan widget baru harus ada pasangannya masing-masing antara Widget  HTML dengan CSS.

Sebagai contoh :
<div id='header-wrapper'>  memiliki pasangan pada kode CSS yaitu #header-wrapper { }
<div id='left-sidebar-wrapper'>  memiliki pasangan pada kode CSS yaitu #'left-sidebar-wrapper' 
{ } begitu juga yang lainnya.

ID ini harus bersifat unik atau tidak boleh ada yang sama, jika tidak maka template tidak akan bekerja dengan baik, bahkan tidak akan ada pengaruh perubahan pada template. sedangkan kode ]]></b:skin> adalah akhir dari semua kode css (desain tampilan)

Demikian cara penulisan kode css (kita lanjutkan ke tutorial bagian 3)