Penjelasan CSS, Pemrograman Untuk Menyempurnakan Tampilan Website

Perkembangan teknologi di jaman modern seperti sekarang ini seakan-akan tidak ada habisnya. Dengan adanya teknologi, kita pastinya sangat terbantu dalam menjalankan kegiatan kita sehari-hari, salah satunya adalah saat mencari informasi. Dengan adanya teknologi, kita dapat dengan mudah mengakses informasi yang kita inginkan.

Dalam mencari informasi, biasanya kita akan mengakses internet dan menemukan informasi yang kita cari pada sebuah website yang menyediakan informasi tersebut. Seperti yang kita tahu, ada banyak sekali website yang tersedia di internet sebagai wadah penyedia informasi.

Berbicara mengenai website, seperti yang kita tahu tidak ada satupun website yang memiliki tampilan yang sama dengan website lainnya. Masing-masing website memiliki tampilan tersendiri mengikuti hasil dari rancangan pemrograman yang digunakan untuk membangun website tersebut.

Di dalam membuat sebuah website, pastinya kita semua sudah tahu bahwa HTML adalah hal yang sangat berpengaruh di dalam prosesnya. Dengan menggunakan HTML, kita bisa mendesain sendiri bagaimana tampilan dari website yang kita buat sesuai dengan keinginan kita.

Namun, selain HTML ternyata ada satu bahasa pemrograman lainnya yang juga berpengaruh di dalam membuat sebuah website. Hal yang dimaksudkan tersebut adalah CSS. CSS bisa dibilang sama dengan bahasa pemrograman pembuat website yang ada pada umumnya. Namun ada satu hal yang membedakan CSS dengan yang lainnya, yaitu CSS memiliki peranan tersendiri untuk memperindah tampilan website yang ada.

Nah, pada artikel kali ini kita akan membahas mengenai CSS. Mulai dari pengertiannya, fungsi serta cara kerja dari CSS ini sendiri. Untuk lebih jelasnya, silahkan simak ulasannya berikut ini.

Apa Itu CSS

Seperti yang sudah dikatakan sebelumnya, CSS merupakan salah satu dari banyaknya bahasa pemrograman yang digunakan untuk membuat website. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkan daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting.

Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web.

Hal pertama yang harus kita ketahui adalah suatu website dibangun diatas sebuah HTML, dimana HTML ini adalah terdiri dari kode atau script yang dibuat oleh seorang programmer dengan tujuan tertentu. Sebuah HTML disini mempunyai kapabilitas yang terbatas dalam hal estetika atau keindahan suatu halaman web dan disinilah letak peran penting CSS.

Pada dasarnya CSS atau Cascading Style Sheet juga sama seperti HTML, PHP ataupun Javascript yakni suatu Bahasa pemrograman yang dibuat untuk menunjang fungsi website, namun masing – masing mereka memiliki porsi atau tugas yang berbeda.

Pada CSS (Cascading Style Sheets) Bahasa atau instruksi yang diberikan lebih ditujukan pada desain atau style dari halaman website yang kita buat. Dalam hal peletakan script juga bisa dengan 2 cara yakni dijadikan satu dengan halaman induk HTML kita atau dibuatkan file khusus. Namun dalam dunia developer web lebih sering meletakkan file CSS secara terpisah untuk menghemat ukuran serta kosakata dari Bahasa CSS sendiri yang juga cukup luas.

Desain tampilan yang dimaksud dari CSS ini adalah meliputi banyak hal, mulai dari font (teks), background (latar belakang), margin halaman, spacing (jarak), button (tombol), tata letak (sistem grid) dan masih banyak lagi. Demi menunjang tampilan website yang indah dan berkelas seorang programmer web harus memperhatikan semua aspek tersebut. Pada umumnya file CSS yang tersimpan dalam satu server hanya ada satu namun mencakup semua halaman agar lebih efektif dan biasanya juga diberi nama style.css.

Seiring berkembangnya waktu, CSS ini yang pada awalnya hanya digunakan untuk mendesain halaman berjenis HTML dan XHTML saja namun saat ini dapat digunakan pula untuk dokumen XML bahkan sampai dengan pemrograman Android. Kehadiran CSS pun semakin menjadi kebutuhan utama bagi para programmer web mengingat semakin banyak bermunculan website yang memiliki tampilan dinamis serta responsive di segala perangkat.

Sejarah Perkembangan CSS

Dengan bergunanya CSS sebagai pemrograman yang penting untuk mempercantik tampilan website, sekarang ini sudah banyak web programmer yang membuat website dengan menggunakan CSS ini. Tentunya ada kisah awal dibalik adanya CSS ini. Pasti akan sangat menarik dan bermanfaat bagi kita untuk mengetahuinya.

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 semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs). Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu:

  • External Style Sheet (file CSS berbeda dari file HTML).
  • Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML).
  • Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

  • Font (Jenis ketebalan).
  • Warna, teks, background dan elemen lainnya.
  • Text attributes, misalnya spasi antar baris, kata dan huruf.
  • Posisi teks, gambar, table dan elemen lainnya.
  • Margin, border dan padiing.

W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini pada tahun1998. Semua atribut dari CSS 1 dimasukkan dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

CSS 3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Desainnya yang memudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :

  • Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.
  • Beberapa efek teks, seperti teks berbayang, kolom koran dan “Word-Wrap”.
  • Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Fungsi Dan Manfaat CSS

Sekarang ini bisa dikatakan bahwa hampir setiap hari pasti muncul wbsite-website baru dan tentunya dengan tampilan yang berbeda antara satu dengan yang lainnya. Hal tersebut tentunya dipengaruhi oleh penggunaan CSS ini. Yang mana seperti yang kita tahu sekarang ini sudah banyak sekali web developer dan web programmer yang menggunakan CSS untuk tampilan website mereka.

Fungsi dari adanya file CSS dalam setiap website tentunya cukup penting. Sebelumnya juga sudah sempat dibahas bahwa dengan adanya CSS kita dapat membedakan konten atau style dengan dokumen atau file website itu sendiri. Bisa dibilang salah satu tolak ukur dari kualitas halaman website yang dibuat adalah dari style yang digunakan dan disini CSS berperan sangat vital.

Keuntungan lain dari penggunaan file CSS adalah seakan – akan dapat dibuat menjadi library style yang bisa digunakan lagi sewaktu – waktu, tergantung dari kita untuk mengkreasikannya agar bentuk tampilan antar website yang dibuat tidak sama. Selain itu dengan adanya CSS seorang programmer web juga diberi kebebasan untuk berinovasi serta berkreasi seindah mungkin karena tidak ada batasan – batasan dari penggunaan kode CSS itu sendiri.

Hadirnya CSS, pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampu menghindarkan pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauh lebih kecil. Dengan ukuran file yang kecil, proses loading situs web juga akan jauh lebih cepat.

Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun umumnya file CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagian tertentu dari halaman web secara serempak. Inilah manfaat paling penting dari CSS mempelajari CSS bisa jadi bukan pekerjaan mudah. Namun, ada banyak keuntungan lain yang akan kita peroleh dengan menggunakan CSS ini, yaitu:

  • Update tampilan lebih mudah
    Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu jauh lebih mudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapat mengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karena semua tag untuk style ini berada pada satu file CSS saja.
  • Beban bandwidth lebih kecil
    Dengan CSS, ukuran file web akan menjadi “langsing” karena tag-tag style dipisahkan secara mandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selain itu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halaman-halaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-load berulang-ulang.
  • Modifikasi web template lebih mudah
    Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita. Dengan CSS, kita akan lebih mudah melakukan “vermak” pada template tersebut, misalnya mengganti warna latar atau mengubah jenis huruf.
  • Lebih mudah digunakan pada mobile phone
    Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi juga melalui mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakan oleh mereka yang browsing melalui gadget-gadget tersebut.
  • Seacrh engine friendly
    Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situs-situs web yang menggunakan table sebagai pondasi layoutnya.

Cara Kerja CSS

Dengan banyaknya keuntungan yang diperoleh dari penggunaan CSS, tentunya akan semakin banyak programmer yang memanfaatkan CSS untuk membuat website yang menarik. Dengan cara kerja dari CSS, website yang dibuat akan semakin terlihat cantik dan juga rapi sehingga orang yang mengunjungi website tersebut tentunya senang melihat konten yang ada pada website tersebut.

Berbeda dari pembelajaran HTML, PHP atau Javascript yang memiliki rumus atau metode tersendiri pada CSS cara kerja penulisan kode bisa dibilang paling mudah. Seorang programmer hanya perlu menambah wawasan mengenai instruksi atau perintah untuk mendesain web secara menyeluruh.

Pada CSS kita hanya perlu menulis stylenya saja yang terdiri atas selector id dan class. Contohnya jika kita berfokus pada background atau latar belakang kita dapat mengatur penggunaan image atau warna solid sebagai background, serta mensetting ukuran secara fixed atau sesuai ukuran asli dan lain sebagainya.

Jika penulisan kode CSS dijadikan satu dengan file HTML maka biasanya dapat ditulis di bagian Head, beda halnya dengan file Javascript yang diletakan pada Body di bagian terakhir. Sedangkan jika penulisan file CSS di halaman tersendiri maka tidak ada patokan khusus, namun perlu diperhatikan pada dokumen yang menggunakan CSS haruslah ada instruksi untuk pemanggilan file CSS beserta class – classnya.

Untuk mengetahui macam – macam kode atau script dari CSS kita dapat mencari di internet baik secara utuh maupun dalam bentuk tutorial satu – persatu. Tergantung dari kita sendiri lebih cocok menggunakan metode apa dalam pembelajaran.

Saat inipun sudah banyak dijumpai paket pembelajaran CSS lengkap seperti W3School dengan bahasan mengenai website secara menyeluruh serta Bootstrap yang saat ini juga cukup menjadi trending. Di dalam Bootstrap ini kita dapat menemukan script otomatis untuk Front End Website (desain / tampilan website) meliputi HTML, CSS dan Javascript khusus pengguna Bootstrap.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *