Dalam page.tpl.php kita telah menulis secara lengkap kerangka laman. Dan jika dipaparkan secara paksa, rangka tersebut masih belum disusun dengan sempurna. Fail style.css akan digunakan bagi membantu page.tpl.php untuk menyusun dan menetapkan lokasi setiap lapisan.

Bagi membantu dan memudahkan kerja untuk menulis aturcara CSS, kita memerlukan perancangan atau grid yang menerangkan saiz sepenuhnya laman yang akan dibina. Saya sertakan gambar rajah mengenai grid dan saiz untuk templat yang telah kita bina sebelum ini serta potongan gambar-gambar kepada yang kecil.

Dalam menulis kod CSS, kita perlu melihat kepada beberapa fail dan komponen untuk memudahkan kerja:

  • HTML fail (dalam kes ini: page.tpl.php)
  • gambar-gambar (saiz dan format yang digunakan)
  • lakaran saiz

Penulisan kod aturcara CSS

Dengan melihat pada kod HTML dan guna gambaran saiz lakaran di atas, kita akan bermula untuk menulis kod CSS dari lapisan yang paling luar dan diikuti lapisan yang seterusnya. Lapisan yang pertama adalah "wrapper". Lapisan ini merangkum semua lapisan di dalamnya, oleh itu ianya akan digunakan untuk menjadi latar belakang laman. Selain itu kita akan jadikan ianya berada di tengah-tengah laman. Berpandukan kepada saiz di atas dan gambar background.jpg, aturcaranya seperti ini:

#wrapper {
  width: 950px;
  display: table;
  background: url(images/background.jpg) repeat-y #ffffff top center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

Seterusnya kita akan konfigurasi untuk bahagian kepala laman, iaitu kita akan masukkan elemen gambar header.jpg pada lapisan "head". Oleh kerana lapisan ini berada di dalam lapisan "wrapper", maka sebarang elemen yang dimasukkan akan berada di atas lapisan paling luar. Jadi, apabila dipaparkan gambar header.jpg akan menutup sebahagian latar belakang dan menjadikannya seolah-olah bercantum. Maka kod aturcaranya adalah seperti berikut:

#head {
  width: 950px;
  height: 145px;
  display: block;
  background: url(images/header.jpg) no-repeat center center #ffffff;
  padding: 0;
  margin: 0;
}

Untuk "region" yang pertama iaitu "top", kita akan letakkannya berada di dalam lapisan "head" dan posisinya adalah berada di sebelah kanan. Anda boleh tetapkan saiz tetap atau biarkan ianya mengembang sendiri (fluidity). Sekiranya kandungan melebihi kawasan yang ditetapkan, kita akan biarkan kekunci arah muncul (scroll).

#top {
  width: 300px;
  height: 100px;
  border: none;
  overflow: auto;
  float: right;
  margin: 10px 30px 0 0;
  position: relative;
  display: block;
  color: #fff;
}

Dalam fail page.tpl.php, terdapat satu penambahan lapisan div yang dimuatkan bagi membolehkan kesemua kandungan diganjakkan sebanyak 60px pada bahagian kiri templat (rujuk gambaran di atas). Oleh itu, kita akan masukkan kod sokongan tersebut menerusi fail CSS ini.

#left-space {
  width: 60px;
  height: 10px;
  float: left;
}

"Region left" jika kita lihat dalam lakaran saiz di atas, kedudukannya telah berganjak sebanyak 60px dari sebelah kiri. Ini bagi mengelakkan kandungan tersebut tertindih pada latar belakang. Untuk "region right" juga hampir sama yang berbeza adalah posisi dan anjakan bermula dari sebelah kanan.

#left {
  width: 170px;
  display: block;
  float: left;
  padding: 0;
}
#right {
  width: 170px;
  display: block;
  float: right;
  margin: 0 60px 0 0;
  padding: 0;
}

Sekarang kita beralih kepada lapisan "center". Bagi membolehkan lapisan ini memenuhi ruangan tengah dan secara automatik berada di tempat yang dinyatakan, kita perlu menentukan saiz kelebarannya dengan tepat dan mengarahkan agar lapisan ini berada di sebelah "region left". Kadang-kala, walaupun pengiraan dilakukan dengan tepat, terdapat perbezaan ruangan yang menyebabkan kedudukan menyimpang dari lokasi sebenar.

Jika ini berlaku, kurangkan 10px dari saiz pengiraan untuk setiap belah memandangkan kita telah gunakan sebanyak 10px untuk memberikan ruangan "padding" untuk lapisan ini. Contoh: 490px - 2(10px) = 470px.

#center {
  width: 490px;
  float: left;
  display: block;
  padding: 0 10px;
  margin: 0;
}

Dalam lapisan "center" ini terkandung 3 lagi lapisan yang tersusun satu persatu. Untuk ketiga-tiga "region" ini, lebih mudah untuk diberikan stail kepadanya dengan merangkumkan semua sekali di dalam satu kod aturcara seperti ini:

#header, #content, #footer {
  width: 100%; /* tetapkan kepada saiz maksimum */
  margin: 0 0 10px 0; /* jarak antara region yang lain */
  display: block;
  padding: 0;
}

Lapisan yang terakhir yang akan memberi membentuk penutup kepada rekaan laman iaitu "foot". Lapisan ini kebiasaanya tidak mengandungi sebarang teks, dan jika anda ingin berbuat demikian tidak menjadi masalah. Kod CSSnya adalah seperti berikut:

#foot {
  width: 950px;
  height: 80px;
  display: table;
  background: url(images/footer.jpg) no-repeat center center #fff;
  margin: 0;
  padding: 0;
}

Kod CSS secara global

Sekiranya anda perasan, kod CSS yang saya berikan di atas adalah spesifik untuk setiap lapisan (layer) yang kita telah lakarkan dalam page.tpl.php. Jika anda cuba paparkannya di pelayar web, masih terdapat kekurangan dari segi tulisan, jarak dan ruang masih jelas.

Oleh itu, anda perlu menambah sendiri beberapa kod CSS dengan sendiri (sekiranya perlu) bagi memastikan ke semua elemen berada di tempat yang sepatutnya. Atau boleh muat turun fail style.css yang telah saya masukkan ke semua elemen-elemen yang penting. Ubah suai mengikut keperluan atau sebagai latihan.

Antara kod-kod CSS yang boleh digunakan adalah seperti berikut:

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font: 14px/170% Arial;
  color: #252525;
}
input {
  font: 12px/100% Arial;
  color: #252525;
}
textarea, select {
  font: 12px/160% Arial;
  color: #252525;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: Arial;
}
h1 {
  font-size: 24px;
  line-height: 28px;
  border-bottom: 1px solid #252525;
}

Dan banyak lagi. Boleh dapatkan sampel untuk kod CSS yang lain dengan memuat turun fail yang telah diberikan. Kod CSS yang ditulis ini adalah yang paling ringkas sebagai panduan untuk pembelajaran.

Kod-kod yang lebih kompleks untuk CSS akan ditunjukkan atau dikemas kini sekiranya perlu untuk versi yang mendatang.

Penilaian: 
No votes yet