Styling Website with CSS - Volantech Bahasa Indonesia
58339
single,single-post,postid-58339,single-format-standard,qode-core-1.2,ajax_fade,page_not_loaded,,pitch-ver-1.7, vertical_menu_with_scroll,smooth_scroll,grid_1300,blog_installed,wpb-js-composer js-comp-ver-5.0,vc_responsive

Styling Website with CSS

Cascading Style Sheet atau biasa disebut CSS merupakan kumpulan koding yang disusun teratur yang ditujukan untuk mengatur halaman sebuah web sehingga dapat tampil menarik. CSS tidak termasuk sebagai salah satu bahasa pemograman. CSS disisipkan pada kode HTML dan dijalankan bersama-sama dengan kode logic HTML lainnya.

 

cssCascading Style Sheet merupakan bagian file dengan format HTML yang membawa gaya pengaturan terhadap isi website. Pengaturan terhadap  style bagian heading, tiap sub menu dan halaman, bodytext, footer, images, layout dan konten, dan sebagainya ditujukan untuk menunjang tampilann HTML. HTML dan CSS dijalankan bersamaan dan dapat dibuat dalam 1 struktur karena keduanya memiliki tujuan yang sama dimana pengaturan konten merupakan tugas HTML sedangkan CSS mengambil tugas tampilan.

Dengan CSS, browser dapat mengubah baris koding HTML menjadi dokumen dengan pemodelan objek atau biasa disebut DOM. DOM dikembangkan oleh World Wide Web Consortium dengan sifat lintas platform dan dapat digunakan dengan berbagai bahasa pemograman. Objek-objek yang ada di dalam HTML dikembangkan dengan standarisasi agar dapat berinteraksi antar elemen baik pada dokumen HTML dan XML. Contoh Document Object Modelling seperti gambar dibawah ini :

css2

Dengan adanya standarisasi pengelolaan dokumen html, perancangan halaman web akan lebih terstruktur. Node-node ini akan mempermudah penempatan baris-baris koding dengan membagi-bagi bagian dari dokumen html. Pada setiap node dapat mengandung elemen-elemen html, dapat diwakilkan dengan css dengan metode penulisan css sebagai berikut: css(element, property, value) atau css.set(element, property, value). Penyisipan koding css pada baris html akan mempermudah pengaturan properti dan value dari halaman website.

Pengembangan website tidak terlepas dari pengembangan “W3”, mengembangkan css agar dapat digunakan lintas platform maupun lintas browser. Sehingga css dapat ditampilkan secara baik bersama penggunaan html, php, maupun javascript. Browser saat membaca file html, akan memformat halaman html sesuai dengan informasi yang terkandung dalam style sheet. Ada 3 cara untuk menggunakan css dalam mempercantik halaman html, yaitu

  • Inline style sheet, penerapan koding css pada jenis ini bersamaan dengan elemen pada bagian body html. Pengaruh dari koding ini biasanya 1 paragraf ataupun 1 baris, karenamethod
  • Internal style sheet, merupakan penggunaan css pada baris html yaitu setelah head. Penggunaan penulisan css ini biasa untuk pemformatan html yang sederhana dan tidak memerlukan penggantian style.
  • External style sheet, digunakan untuk mengubah template pada halaman html. Dengan mengubah file ini seluruh file html dapat berubah style yang telah digunakan. Pendefinisian file html yang memerlukan perubahan tampilan sesuai dengan tema setiap event perlu menerapkan css tipe ini.

Dengan penggunaan css, perancang dapat memisahkan gaya dan tata letak isi dari dokumen html tersebut. Proses pengontrolan terhadap dokumen html dapat dipermudah dengan 1 atau lebih dokumen style sheet saja. Berikut ini beberapa keuntungan penggunaan css, yaitu:

  • Menghemat waktu dalam pengaturan properti-properti yang terdapat pada elemen, karena koding css dapat digunakan kembali untuk halaman html yang lain.
  • Perawatan format dokumen lebih mudah untuk diperbaruhi dan konsistensi setiap halaman dapat terjaga karena perubahan dokumen css dapat mempengaruhi seluruh tampilan halaman website yang menggunakan sheet style yang sama.
  • Dapat menampilkan halaman website lebih cepat karena beberapa halaman html akan berbagi history format css yang sama, sehingga ukuran file tranfer dapat ditekan dan loading lebih cepat
  • CSS memungkinkan tampilan file html menjadi lebih baik, jika dibandingkan dengan file yang hanya memuat koding html saja.
  • Kompabilitas di berbagai perangkat, css membantu pengoptimalan dokumen html diberbagai perangkat sehingga hasil render dapat memiliki gaya tampilan yang sama baik untuk monitor, tablet, smartphone, printer, dan sebagainya.

Penggunaan css dalam website sama pentingnya dengan penggunaan html. Css dapat bekerja dengan koding selain html, seperti php maupun javascript. Untuk informasi lebih lanjut silahkan menghubungi kami dev@volantech.io.

©Written By: Satriadi Wijaya Tjoa S.Kom

Anda dapat mengunjungi halaman berikut sebagai sumber referensi:

https://www.khanacademy.org

http://www.tutorialrepublic.com/css-tutorial

https://www.w3.org/TR/DOM-Level-2-Style/css.html

https://www.w3schools.com/w3css/

 

Volantech Content Admin About the author
No Comments

Leave a Comment: