CSS

Css atau Cascading style sheet merupakan bahasa untuk memperindah halaman web. Pengolahannya jauh lebih mudah karena hanya perlu membuat satu file saja sebagai rujukan semua file html yang kita buat. Sehingga apabila di kemudian hari tampilan ingin dirubah, kita hanya perlu merubah file CSS nya saja sekalipun jumlah halaman html kita puluhan atau bahkan ratusan. Untuk membuat halaman HTML yang di aturtampilannya oleh CSS, sisipkan kode berikut pada halaman html di antara tag

file.cssadalah nama file css yang kita buat. Apabila nama file CSs yang kita buat adalah template.css, maka baris tersebut disesuaikan dengan nama filenya.

Adapun file CSS-nya sendiri adalah sebuah file text biasa yang disimpan dengan akhiran .css yang berisikan kode CSS. jangan lupa bahwa file css harus berada satu folder dengan file - file HTML yang kita rubah.

Pelanjaran singkat ini ditujukan untuk orang yang ingin mulai menggunakan CSS dan sebelumnya tidak pernah menulis sebuat syle sheet.
Pelajaran ini tidak menjelaskan benyak mengenai CSS. Hal ini hanya menjelaskan bagaimana membuat sebuah file HTML, sebuah file CSS dan bagaimana membuat keduanya berkerja sama. Setelah itu, anda dapat membaca beberapa pelajaran lain untuk menambah lebih banyak lagi fitur kedalam file HTML dan CSS. Atau anda dapat beralih menggunakan sebuah editor HTML atau CSS khusus yang dapat membantu anda membuat situs situs yang kompleks.
Di akhir pelajaran ini, anda akan selesai membuat sebuah file HTML yang terlihat sebagai berikut:
Hasil halaman HTML, dengan warna dan tata letak, seluruhnya menggunakan CSS.
Sebagai catatan saya tidak menganggap HTML ini indah ☺
Bagian bagian yang tampak seperti ini adalah tidak wajib. Hal tersebut mengandung penjelasan lebih lanjut mengenai kode-kode HTML dan CSS yang terdapat dalam contoh. Tanda “perhatian!” diawal menandakan bahwa ini adalah materi yang lebih sulit dari teks yang lain.

Langkah 1: menulis HTML

Untuk pelajaran, saya menyarankan anda untuk menggunakan alat yang sangat sederhana. Seperti, Notepad (bila menggunakan Windows), TextEdit (untuk Mac) atau KEdit (bila menggunakan KDE) dapat berkerja dengan baik. Setelah anda mengerti prinsipnya, anda dapat beralih ke peralatan yang lebih canggih, atau bahkan ke program-program komersil, seprti Style Master, Dreamweaver atau GoLive. Tetapi untuk CSS file anda yang pertama, adalah sesuatu hal yang baik untuk bila perhatian anda tidak teralihkan dengan banyak fitur yang terlalu canggih bagi.
Jangan menggunakan pengolah kata, seperti Microsoft Word atau OpenOffice. Mereka pada umumnya akan membuat file-file yang tidak dapat dibaca oleh browser web. Untuk HTML dan CSS, kita menginginkan file teks, yang sederhana.
Langkah 1 ialah dengan membuka editor teks anda (Notepad, TextEdit, KEdit, atau apa pun favorit anda), mulai dengan file yang kosong dan ketik berikut ini kedalamnya:

 
Home page

 
Renungan

 
Kotaku

 
Link-link

Halaman dengan style saya yang pertama

Selamat datang ke halaman dengan style saya!

Halaman ini tidak ada gambar, tatapi paling tidak memiliki style.

Dan juga memiliki link, meskipun mereka tidak pergi kemana-mana…

Disini seharusnya ada lebih banyak lagi, tetapi saya belum tahu apa.

Dibuat 5 April 2004

  oleh diriku sendiri.

Malah anda tidak harus mengetiknya: anda dapat melakukan copy dan paste dari halaman ini ke dalam editor.
(Bila anda menggunakan TextEdit pada Mac, jangan lupa memberi tahu TextEdit bahwa teksnya benar-benar teks sederhana (plain text), dengan pergi ke menu Format dan memilih “Make plain teks”.)
Baris pertama dari file HTML diatas memberi tahu browser apa tipe HTML-nya (DOCTYPE berarti DOCument TYPE). Dan dalam hal ini, adalah HTML versi 4.01.
Kata-kata yang tertulis diantara < dan > dinamakan tag, dan seperti yang ada lihat, dokumen ini terdapat di antara tag dan . Antara dan ada tempat untuk berbagai informasi yang tidak ditampilkan di layar. Saat ini pada tempat tersebut terdapat judul dari dokumen, tetapi kita akan menambahkan juga style sheet CSS disana.
Bagian adalah tempat aktual dari isi dokumen. Secara garis besar, segala sesuatu yang ditempatkan disitu akan ditampilkan, kecuali teks yang terdapat diantara , yang berfungsi sebagai komentar bagi diri kita sendiri. Hal ini akan diabaikan oleh browser.
Dalam contoh, tag

memperkenalkan kita pada “Unordered List (daftar tak beraturan)”, dalam artian, sebuah daftar yang isinya tidak bernomor. Tag
• adalah awal dari “List Item (Item dari daftar).” Tag adalah untuk “Paragraph (alinea/paragraf).” Dan adalah untuk jangkar “Anchor (jangkar),” yang merupakan hal yang membuat sebuah hyperlink.
  
  Editor Notepad menunjukan sumber HTML.
  Bila anda ingin mengetahui apa arti dari nama yang berada diantara <…>, salah satu tempat yang baik untuk memulai adalah Getting started with HTML. Tapi sedikit penjelasan mengenai struktur dari halaman HTML contoh milik kita.
  
  
  
  • Tag “ul” adalah sebuah daftar dengan sebuah hyperlink per item. Ini akan kita pergunakan sebagai “menu navigasi situs,” yang me-link ke halaman-halaman lain dari halaman Web kita. Sebagai anggapan, seluruh halaman dari situs kita mempunya menu yang serupa.
  • Elemen-elemen “h1” dan “p” adalah elemen elemen yang membentuk konten yang unik dari halaman ini, sedangkan tanda tangan (signature) dibagian bawah (“address”) akan tampil serupa di seluruh halaman situs.
  Perhatikan bahwa saya tidak menutup elemen “li”dan “p”. Dalam HTML (tapi bukan dalam XHTML), tidak menuliskan tag penutup dan
  adalah sesuatu yang diperbolehkan, seperti apa yang saya lakukan disini, untuk membuat teks lebih mudah dibaca. Tetapi jika anda inginkan, anda bisa menambahkannya sendiri. Mari kita asumsikan bahwa halaman ini akan menjadi sebuah halaman dari situs Web dengan halaman-halaman yang serupa. Sesuatu yang umum untuk halaman-halaman website saat ini, yang ini memiliki menu yang me-link ke halaman-halaman lain di situs ini, beberapa konten yang unik dan sebuah tanda tangan (signature).
  Sekarang pilih “Save As…” dari menu File, arahkan ke ke direktori tempat anda ingin menaruhnya (Desktop pilihan yang baik) dan simpan file tersebut sebagai “halamanku.html”. Jangan tutup dulu editor tersebut, kita akan menggunakannya lagi.
  (Bila anda menggunakan TextEdit di Mac OS X sebelum versi 10.4, anda akan melihat opsi untuk tidak menambahkan extension .txt pada tampilan Save as. Pilih opsi tersebut, karena nama “halamanku.html” sudah memiliki sebuah extension. Versi TextEdit yang lebih baru akan memperhatikan extension .html secara otomatis.)
  Sekarang, buka file tersebut di sebuah browser. Anda dapat melakukannya dengan cara berikut: cari file tersebut dengan file manager (Windows Explorer, Finder atau Konqueror) dan mengklik atau menkliknya dua kali. File tersebut seharusnya terbuka di default Web browser anda. (Bila tidak, buka browser anda dan seret (drag) file tersebut kedalamnya)
  Seperti yang anda lihat, halaman tersebut tampak membosankan…
  
  
  

  Langkah 2: menambahkan beberapa warna

  Anda mungkin melihat beberapa teks hitam dengan latar belakang putih, tetapi tergantung dari bagaimana brorser tersebut dikonfigurasi. Jadi salah satu hal mudah yang dapat kita lakukan untuk membuat halaman tersebut menjadi lebih gaya adalah dengan menambahkan beberapa warna. (Biarkan browser tetap terbuka, akan kita gunakan kembali nanti.)
  Kita akan mulai dengan sebuah style sheet yang dibuat di dalam file HTML. Kemudian, kita akan menaruh HTML dan CSS pada file yang terpisah. File terpisah merupakan hal yang baik, karena akan lebih mudah menggunakan style sheet yang sama untuk beberapa file HTML: anda hanya perlu menuliskan style sheet tersebut sekali. Tetapi untuk langkah ini, kita akan menaruhnya di sebuah file.
  Kita perlu menambahkan sebuah elemen

  [dsb.]

  Baris pertama menjelaskan bahwa ini adalah sebuah style sheet dan ditulis dalam CSS (“text/css”). Baris kedua mengatakan bahwa kita menambahkan style ke dalam elemen “body”. Yang ketiga menjadikan teks berwarna ungu dan baris berikutnya menjadikan latar belakang jadi kuning kehijauan. Style sheet dalam CSS terbuat dari aturan-aturan. Tiap aturan memiliki tiga bagian:
  1. Selector (dalam contoh: “body”), memberi tahu browser bagian dokumen (elemen HTML) yang mana yang terkena dampak aturan tersebut;
  2. property (dalam contoh, 'color' dan 'background-color' keduanya adalah property), yang menentukan aspek dari elemen yang sedang di atur;
  3. dan value ('purple' dan '#d8da3d'), yang memberikan nilai pada property dari style.
  Contoh tersebut memperlihatkan bahwa aturan-aturan tersebut bisa dikombinasikan. Kita memiliki dua set property, jadi kita juga bisa membuat dua aturan yang berbeda:

  body { color: purple }

  body { background-color: #d8da3d }

  tetapi karena kedua atauran tersebut hanya berdampak pada body, kita hanya menulis “body” setu kali dan menulis kedua property dan value bersama. Untuk mengetahui lebih lanjut mengenai selectors, baca bab 2 dari Lie & Bos. Latar belakang dari elemen body juga akan menjadi latar belakang dari seluruh dokumen. Kita belum memberi elemen-elemen lain (p, li, address…) latar belakang apapun secara eksplisit, jadi secara normal mereka tidak mempunyainya (atau: akan menjadi transparan). Property 'color' menetapkan warna teks dari elemen body, tetapi elemen elemen lain dalam body akan turut mewarisi warna tersebut, kecuali bila secara eksplisit di kesampingkan . (Kita akan menambahkan beberapa warna lain nanti.) Sekarang simpan file ini (gunakan “Save” dari menu File) dan balik ke jendela browser. Bila anda menekan tombol “Reload”, tampilan seharusnya berubah dari halaman “menbosankan” menjadi sebuah halaman yang berwarna (tetapi masih agak membosankan). Selain dari daftar link diatas, seluruh teks sekarang seharusnya berwarna ungu dengan latar belakang kuning kehijauan. Bagaimana sebuah browser menampilkan halaman tersebut setelah ditambahkan warna. Warna dapat ditetapkan dengan beberapa cara. Contoh menunjukkan dua diantaranya: menggunakan nama (“purple”) dan dengan kode hexadesimal (“#d8da3d”). Ada sekitar 140 nama warna dan kode hexadesimal memungkinkan lebih dari 16 juta warna. Adding a touch of style menjelaskan lebih lanjut menganai kode-kode ini.

  Step 3: menambahkan fonta

  Hal lain yang mudah dilakukan adalah dengan membuat perbedaan dalam fonta untuk berbagai elemen di halaman. Jadi marilah kita jadikan teks dengan fonta “Georgia”, kecuali untuk heading h1, yang mana akan kita beri fonta “Helvetica.” Di Web, anda tidak pernah dapat memastikan fonta apa yang dimiliki oleh para pembaca di dalam komputer-komputer mereka, jadi kita tambahkan juga beberapa alternatif: bila Georgia tidak tersedia, Times New Roman atau Times juga merupakan pilihan yang baik, bila semua itu tidak ada, browser bisa menggunakan fonta dengan serifs. Bila Helvetica tidak ada, Geneva, Arial dan SunSans-Regular juga serupa dalam bentuk, dan bila tak ada satupun hal tersebut yang jalan, browser dapat memilih fonta lain tanpa serif. Dalam teks editor tambahkan baris-baris berikut:

  [dsb.]

  Jika anda menyaimpan file tersebut lagi dan menekan “Reload” di browser, seharusnya ada fonta-fonta yang berbeda untuk heading dan teks lainnya. Sekarang teks utama telah memiliki fonta yang berbeda dari heading.

  Step 4: menambahkan batang navigasi

  Daftar yang terletak di bagian atas halaman HTML dimaksudkan sebagai menu navigasi. Banyak situs Web memiliki sejenis menu di daerah atas atau di daerah samping halaman dan halaman ini juga harus memilikinya. Kita akan menaruhnya di sisi kiri, karena hal tersebut lebih menarik dari pada diatas… Menu sudah ada di halaman HTML. Daftar
  diatas adalah menu tersebut. Link-linknya belum bekerja, karena “situs Web” kita hingga saat ini hanya terdiri dari satu halaman, tetapi saat ini hal tersebut bukan merupakan masalah. Di situs Web sesungguhnya, tentunya tidak boleh ada link-link yang tidak berfungsi. Jadi kita perlu memindahkan daftar tersebut ke kiri dan memindahkan sisa textnya sedikit ke kanan, untuk memberikan tempat untuk daftar tersebut. Property CSS yang kita gunakan untuk itu adalah 'padding-left' (untuk memindahkan teks body) dan 'position', 'left' dan 'top' (untuk memindahakan menu). Ada cara-cara lain untuk melakukan hal tersebut. Bila anda mencari “column” atau “layout” di halaman Learning CSS, anda akan menemukan pola yang siap di pakai. Tetapi ini dapat kita gunakan untuk tujuan kita. Dalam jendela editor, tambahkan baris baris berikut pada file HTML (lines 7 and 12-16):

  [dsb.]

  Bila anda menyimpan file tersebut lagi dan menekan tombol reload di browser, anda sekarang seharusnya mempunyai daftar link disebelah kiri teks utama. Sekarang terlihat lebih menarik bukan? Teks utama dipindah ke sebelah kanan dan daftar link sekarang ada di sebelah kirinya, dan bukan diatas. 'position: absolute' menandakan bahwa elemen ul diposisikan tersendiri terpisah dari teks lain baik yang ada sebelum maupun sesudahnya di dokumen tersebut serta 'left' dan 'top' mengindikasikan apa posisi tersebut. Dalam kasus ini, 2em dari atas dan 1em dari sebelah kiri jendela. '2em' berarti 2 kali ukuran font yang sekarang. Contoh, bila menu ditampilkan dengan sebuah fonta berukuran 12 point, maka '2em' adalah 24 point. Unit 'em' sangatlah berguna pada CSS, karena hal tersebut bisa beradaptasi secara otomaris pada fonta yang digunakan oleh pembaca. Kebanyakan browser memiliki menu untuk memperbesar atau memperkecil ukuran fonta: anda bisa mencarinya dan melihat bahwa menu bertambah besar seiring dengan membesarnya fonta, dimana hal tersebut tidak akan terjadi bila anda menggunakan ukuran dalam pixel.

  Langkah 5: Memberi style pada link

  Menu navigasi masih terlihat seperti daftar, dan bukan seperti menu. Mari menambahkan style padanya. Kita akan menghilangkan bullet pada daftar tersebut dan memindahkan item-item ke kiri, ketempat dimana bullet tersebut tadi berada. Kita juga akan memberi setiap item latar belakang berwarna putih dengan kotak hitam diluar. (Mengapa? Tidak ada alasan khusus, hanya kerena kita bisa melakukannya.) Kita juga menentukan warna apa yang akan diberikan pada link, jadi mari kita juga tambahkan hal tersebut: biru untuk link yang belum di lihat dan ungu untuk yang sudah dikunjunginya (lines 13-15 and 23-33):

  [dsb.]

  Secara tradisi, browser memperlihatkan hyperlink dengan garis bawah dan dengan warna. Biasanya, warnanya mirip dengan apa yang kita tentukan disini: biru untuk link yang belum anda kunjungi (atau sudah lama sekali dikunjungi), ungu untuk halaman-halaman yang anda sudah pernah lihat. Pada HTML, hyperlink dibuat dengan elemen , sehingga untuk menentukan warna, kita perlu menambah sebuah aturan style untuk “a”. Untuk membedakan antara link yang sudah dikunjungi dan yang belum, CSS menyediakan dua pseudo-classes” (:link dan :visited). Mereka dinamakan “pseudo-classes” untuk membedakan mereka dari attribute class, yang ada dalam HTML, e.g., Dalam contoh kita class="navbar".

  Step 6: Menambahkan garis horizontal

  Tambahan terakhir pada style sheet adalah sebuah garis horizontal untuk memisahkan teks dengan signature yang berada dibawah. Kita akan menggunakan 'border-top', untuk menambahkan garis yang terdiri dari titik-titik diatas elemen
  :

  [dsb.]

  Sekarang style kita sudah lengkap. Selanjutnya mari kita lihat bagaimana kita dapat menaruh style sheet di file yang terpisah, sehingga halaman-halaman lain dapat menggunakan style yang sama.

  Step 7: Menaruh style sheet di sebuah file terpisah

  Kita sekarang mempunyai sebuah HTML file dengan sebuah style sheet yang dibuat di dalamnya. Tetapi bila situs milik kita berkembang, kemungkinan kita menginginkan banyak halaman menggunakan style yang sama. Ada cara yang lebih baik daripada meng-copy style sheet ke setiap halaman: bila kita menaruh style sheet di sebuah style terpisah, semua halaman dapat mengarah padanya. Untuk membuat sebuah file style sheet, kita harus membuat sebuah teks file kosong yang lain. Anda bisa memilih “New” dari menu File di editor, untuk membuat sebuah jendala kosong. (Bila anda menggunakan TextEdit, jangan lupa untuk membuatnya menjadi file teks lagi, menggunakan menu Format.) Lalu cut dan paste segala sesuatu yang terdapat dalam elemen . Mereka meruupakan bagian dari HTML, dan bukan untuk CSS. Dalam jendela editor yang baru, anda sekarang sudah memiliki style sheet yang lengkap:

  body {

    padding-left: 11em;

    font-family: Georgia, "Times New Roman",

          Times, serif;

    color: purple;

    background-color: #d8da3d }

  ul.navbar {

    list-style-type: none;

    padding: 0;

    margin: 0;

    position: absolute;

    top: 2em;

    left: 1em;

    width: 9em }

  h1 {

    font-family: Helvetica, Geneva, Arial,

          SunSans-Regular, sans-serif }

  ul.navbar li {

    background: white;

    margin: 0.5em 0;

    padding: 0.3em;

    border-right: 1em solid black }

  ul.navbar a {

    text-decoration: none }

  a:link {

    color: blue }

  a:visited {

    color: purple }

  address {

    margin-top: 1em;

    padding-top: 1em;

    border-top: thin dotted }

  Pilih “Save As…” dari menu File, pastikan bahwa anda berada di directory/folder yang sama dengan file halamanku.html, dan simpan style sheet tersebut dengan nama “styleku.css”. Sekarang balik ke jendela dengan kode HTML. Hapus segalanya dimulai dari tag dan gantikan dengan sebuah elemen element, seperti berikut:

  [dsb.]

  Ini akan mangatakan pada browser bahwa style sheet dapat ditemukan di sebuah file bernama “styleku.css” dan karena tidak ada disebutkan nama direktori, browser akan akan mencarinya di direktori dimana file HTML ditemukan. Bila anda menyimpan file HTML dan menekan tombol reload di browser, anda tidak akan melihat adanya perubahan: halamannya akan tetap diberi style yang sama, tetapi sytle tersebut datang dari sebuah file external. Hasil akhir Langkah berikutnya adalah menaruh kedua file, halamanku.html dan styleku.css di situs Web anda. (Anda mungkin ingin merubahnya sedikit terlebih dahulu, …) Tetapi bagaimana melakukannya tergantung pada Internet provider anda.