Catatan Hati Seputar CSS

Sejarah dan Perkembangan CSS

     CSS (Cascading Style Sheet) adalah standar pembuatan dan pemakaian style untuk dokumen terstruktur. CSS digunakan untuk mempersingkat penulisan tag HTML \ seperti font, color, text,  dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML maupun XHTML. Meskipun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk juga SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
     CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS.
     Pada akhir tahun 1996, CSS telah resmi dipublikasikan (dan menyusul kemudian CSS Level 1 pada bulan Desember). Pengerjaan proyek ini juga didukung oleh seorang programmer bernama Thomas Reardon dari perusahaan software ternama, Microsoft. CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS).
     Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.
      Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs).

 Fungsi CSS

     Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara menggunakan CSS

>> Cara menggunakan CSS: inline style

     Inline style adalah penerapan kode css pada satu elemen HTML didalam satu halaman HTML, dengan cara ini kita bisa langsung memberikan style dengan cara memasukkan kode css pada atribut tag HTML. Atribut yang digunakan untuk menyisipkan kode css adalah atribut style, sebagai contoh perhatikan contoh skrip HTML dibawah:

<p> Paragraf kesatu nih, ingin berubah warna biru </p>

<p> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga </p>

     Skrip HTML diatas jika dijalankan akan menampilkan tulisan yang bewarna hitam, jika kita ingin merubah warna paragraf ke warna biru, maka kita bisa langsung memberikan atribut style dengan nilai color: blue;.

<p style="color: blue;"> Paragraf kesatu nih, ingin berubah warna biru</p>

<p style="color: blue;"> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga </p>

     Perlu diketahui, bahwa metode inline style tidak efisien jika kita sering merubah dan menggunakan kembali kode CSS yang telah kita buat. Dengan metode ini, kita hanya bisa menerapkan style hanya pada satu elemen, bayangkan jika kita harus memberi dan merubah satu-satu style semua paragraf yang terdapat dalam dokumen HTML.

>> Cara menggunakan CSS: embedded style/Internal Styles

     Jika inline style hanya bisa digunakan dalam satu elemen HTML dalam satu halaman HTML, maka embedded style bisa digunakan dalam beberapa elemen HTML. Meskipun bisa digunakan dalam beberapa elemen HTML, embedded style hanya bisa diterapkan hanya pada satu halaman HTML. Metode ini menggunakan tag <style> didalam elemen head, kita membuat baris skrip CSS dalam tag <style>  dan skrip CSS itu akan langsung merubah semua elemen sesuai yang kita atur. Sebagai contoh, kita akan merubah style tulisan semua elemen paragraf dengan warna biru, maka skrip HTML akan seperti ini.

<html>

  <head>

    <title>Cara Menggunakan CSS</title>

    <style> p{color:blue;} </style>

  </head>

  <body>

    <p>Paragraf kesatu nih, ingin berubah warna biru</p>

    <p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>

  </body>

</html>

     Dengan metode ini baik paragraf kesatu atau kedua akan langsung berubah menjadi berwarna biru, kembali lagi jika kita menggunakan metode inline style maka kita harus merubah satu-satu elemen.

>> Cara menggunakan CSS: linked style/External Styles

     Ini adalah metode yang bisa digunakan untuk merubah style pada semua elemen di semua page, cara ini mengharuskan kita untuk membuat file CSS. Setelah kita membuat file CSS, maka file tersebut kita panggil dalam tag <link>.

Sebagai contoh, pertama kita buat file dengan nama style.css, ketikkan skrip berikut untuk merubah semua tulisan elemen paragraf ke warna biru.

p{color:blue;}

Setelah itu,  ketikkan skrip berikut untuk memanggil file style.css yang telah dibuat.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Letakkan skrip diatas dalam tag <head> sehingga skrip akhir menjadi seperti ini.

<html>

  <head>

    <title>Cara Menggunakan CSS</title>

    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

  </head>

  <body>

    <p>Paragraf kesatu nih, ingin berubah warna biru</p>

    <p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>

  </body>

</html>

     Ketika skrip diatas dijalankan akan memberikan hasil yang serupa seperti dua metode sebelumnya, kelebihan dalam metode ini adalah kemudahan untuk merubah dan menerapkan style pada elemen apapun dalam page manapun.
     Cara ini hampir pasti dilakukan oleh para pengembang web. Pada kenyataannya ketiga metode diatas sering digunakan berbarengan ketika kita menggunakan tambahan skrip dari luar seperti penggunaan plugin atau sejenisnya.

TERIMAKASIH