Belajar Ngoding Dengan CSS Untuk Desain Web

Belajar Ngoding dengan CSS untuk Desain Web – karya Fiska Sukma Esaputra, Intern Junior Content Writer di Dicoding

Dulu saat website pertama kali diperkenalkan tampilannya masih sangat dasar dan kadang kita membutuhkan jasa membuat design. Tentu saja, programmernya masih ngoding dengan bahasa yang baru saja dikembangkan sehingga belum ada fitur-fitur menarik seperti sekarang. Tapi seiring berkembangnya bahasa pemrograman web, ngoding web pun menjadi sesuatu yang berhubungan dengan kreatifitas. Tentu saja berkat dikembangkannya bahasa pemrograman CSS untuk desain web. Kali ini kita akan bahas bagaimana menariknya ngoding dengan CSS.

Sebelum mulai, baiknya kita kenalan dulu dengan bahasa pemrograman yang satu ini. Karena, seperti kata pepatah tak kenal maka tak sayang, gimana mau ngoding dengan CSS kalau kita gak kenal sama bahasa yang satu ini.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Ngoding Dengan CSS Membantu Programmer

CSS adalah singkatan dari cascading style sheet pertama kali dirilis oleh World Wide Web Consortium (W3C) pada 17 Desember 1996 lalu. Sebagai hasil proposal ide dari seorang Håkon Wium Lie yang akhirnya membuat beberapa developer setuju pada idenya. Alasan CSS dibuat pada waktu itu karena style formatting pada HTML dianggap terlalu panjang. Ketika HTML 3.2 diluncurkan dengan penambahan tags seperti <font>, menjadi sebuah mimpi buruk untuk setiap programmer. Para programmer web besar mengalami kesulitan karena jenis font dan warna font harus ditambahkan ke dalam setiap halaman web, menjadikan proses pekerjaan lebih panjang dan juga membutuhkan tambahan biaya.

Kegunaan CSS

CSS digunakan untuk mendesain sebuah tampilan pada halaman web. Ngoding dengan CSS memungkinkan kita untuk memberi warna pada font, layout dokumen, menambahkan tabel, memberi warna latar belakang dan lain sebagainya.

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 pembuatan halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan sebuah web.

Teknik Penerapan CSS

Kalau kita ngoding dengan CSS, ada 3 cara penerapannya ke dalam file HTML yaitu Inline, Internal, dan Eksternal.

#1 Inline

Teknik inline biasa digunakan untuk penerapan hanya pada elemen yang dikenai style tersebut. Teknik ini tidak direkomendasikan untuk digunakan kalau teman-teman akan ngoding sebuah web yang panjang, karena kurang efisien.

#2 Internal

Teknik ini bisa menjadi pilihan ngoding CSS untuk teman-teman. Teknik ini hampir sama dengan inline, yaitu kita ngoding CSS secara langsung di dalam file HTML tetapi lebih sering ditulis di dalam tag <head>. Namun teknik ini juga kurang direkomendasikan karena apabila style yang digunakan banyak, maka baris kode pun akan semakin banyak, dan tidak bisa digunakan secara berulang untuk halaman web yang lain.

#3 Eksternal

Ini dia teknik ngoding dengan CSS yang paling direkomendasikan dan banyak digunakan. Selain lebih menghemat waktu, penulisan yang tidak terlalu rumit, teknik ini juga bisa digunakan secara berulang untuk digunakan di halaman web yang lain.

Teknik ini berbeda dari 2 teknik sebelumnya, karena CSS yang akan digunakan ditulis di dalam file terpisah. Untuk menggunakannya cukup memanggil alamat file kedalam dokumen HTML yang ingin ditambahkan style tertentu.

File CSS ditulis pada file terpisah.

File CSS cukup dipanggil pada bagian header.

Properties pada CSS

Properti digunakan untuk memilih jenis style apa saja yang akan diterapkan pada class, tag, atau id yang telah dipilih pada selector, dan pada satu selector bisa terdapat beberapa property. Pada CSS terdapat banyak sekali property yang dapat digunakan, tapi kalau kita ngoding dengan CSS kita tidak perlu menghapal semua property sekaligus, puyeng nanti teman-teman. Cukup pahami apa fungsi dari property yang digunakan.

Jenis property CSS diantaranya adalah :