Interested in what we do?
Let’s have a talk, and see how together we can take your brand to the next level.
Case Study · Dev and Design · Featured · What We Do · Works
CSS: Some Basics
Selain HTML, coding language CSS juga perlu dipelajari untuk bikin website yang sesuai sama kebutuhan user. Kalau menurut Mz Adhitia Darmawan, Head of Technology Definite, CSS itu begini…
Anda tahu atau pernah dengar Hypertext Markup Language (HTML)? Iya, biasanya kalau Anda pencet ctrl+s pada webpage melalui browser, filename extension-nya pasti “.html”. Nah, HTML ini merupakan bahasa pemrograman yang mesti Anda pelajari jika ingin mengembangkan website.
Selain HTML, ada juga yang namanya CSS atau Cascading Style Sheets yang nggak kalah pentingnya. Therefore, sekarang kita bakalan ngebahas some basics of CSS bareng Head of Technology kami, Adhitia Darmawan.
CSS itu apa sih sebenernya, Mz Adhit?
“Biar gampang, kita bayangin aja website itu sebagai sebuah rumah. Kalau HTML dipakai untuk membuat pondasinya, CSS ini yang nge-handle bagian estetikanya.” Kata Mz Adhit.
Seperti namanya, Cascading Style Sheets, CSS menekankan penggunaan “style” untuk mendesain halaman website Anda agar lebih bagus, modern, dan sesuai dengan kebutuhan user. Dengan CSS, Anda bisa mengatur jenis font, warna, ukuran kolom, background, dan lain sebagainya untuk mempercantik tampilan webpage Anda. Selain itu CSS juga bisa dipakai untuk memvariasikan antarmuka seperti menambahkan transisi dan animasi.
“Pokoknya kalau kita buka website tertentu dan tampilannya nggak cuma polos, itu udah pasti bikinnya ada CSS-nya.” Tambah Mz Adhit.
Kenapa sih mesti pakai CSS? Apa nggak cukup dengan HTML aja?
“Hmm bisa sih pakai HTML aja, tapi itu dulu, awal tahun 2000an yang kebanyakan website tampilannya cuma putih dan kotak.” Jelasnya. “Sekarang ini CSS udah jadi barang wajib untuk pengembangan website, jadi kalau mau bagus, ya pakai CSS.” Katanya lagi. Dan saat ini, bisa dibilang udah jarang banget website yang nggak pake CSS karena bahasa coding ini dianggap sebagai standar browser populer.
Selain memberikan lebih banyak opsi setting dari unsur estetika, CSS memiliki berbagai keuntungan lain untuk Anda dan developer Anda, seperti mempercepat proses desain website. Dengan CSS, Anda cukup menggunakan satu fungsi untuk menampilkan desain yang sama di berbagai halaman–nggak perlu menyalin code berkali-kali dalam HTML, jadi time-saving banget. CSS juga mempercepat loading karena Anda nggak perlu mengetikkan atribut tag HTML di setiap file and otomatis proses load lamannya jadi lebih cepat. Selain itu, CSS memungkinkan konten Anda kompatibel dengan berbagai jenis perangkat, sehingga optimasi dapat dengan mudah dilakukan.
Terus, gimana cara kerja CSS dalam website development?
CSS coding: kegiatan yang terlihat sulit dilakukan karena kenyataannya memang tidak semudah itu, Ferguso…
Basically, CSS dibuat to work alongside HTML. CSS berinteraksi dengan HTML serta memodifikasi “style” pada setiap elemennya. Elemen merupakan komponen dari sebuah halaman website HTML, contohnya teks paragraf. Simpelnya kayak contoh yang satu ini.
Elemen HTML dalam bentuk paragraf:
<p>Definite, Digital Agency based in Jakarta</p>
Jika Anda ingin memodifikasi tampilan paragraf tersebut, Anda bisa menambahkan CSS code seperti ini:
p {
font-family: verdana;
font-size: 20px;
color: blue;
}
“p” disebut dengan “selector” yang mengindikasikan elemen mana yang harus dimodifikasi oleh kode CSS Anda. Sedangkan tulisan yang ada di dalam kurung kurawal merupakan “property” dan “value” yang diterapkan pada teks HTML Anda. font-family, font-size, dan color adalah property, sedangkan nilai yang menentukan properti tersebut verdana, 20px, dan blue merupakan value-nya. Secara umum Anda dapat menggunakan prinsip yang sama dalam mengganti background, menambahkan font-type, dan lain sebagainya.
Nah, selain beberapa keuntungan yang dibahas tadi, CSS juga mendukung kesuksesan UX design yang dibuat. Menurut our head of technology, “CSS itu penting karena menyempurnakan website kita dengan modifikasi tampilan yang sesuai dengan UX design yang dibuat, sehingga kita bisa menjawab kebutuhan dan memberikan solusi pada user.” CSS is how we translate UX design into a website, basically.
“Definite selalu mengimplementasikan CSS yang menarik dan fit untuk user di setiap website yang kita handle.” Kata Mz Adhit. Sebagai digital agency yang mengutamakan end user dan berkomitmen untuk selalu memberikan meaningful UX, kami menggunakan CSS untuk mendesain website agar sesuai dengan brand image dan kebutuhan target audiens kami.
Contohnya, Website ByeBye-FEVER menggunakan background biru muda, rounded style font dan button, serta transisi dan efek animasi yang menarik untuk memberikan kesan nyaman dan sejuk sesuai dengan persona brand-nya. Tampilan yang menarik ini juga akan bikin user betah berlama-lama mengunjungi website ByeBye-FEVER dan membaca artikelnya.
Preview BBF website
Hmm, jadi seperti itu ya penerapan CSS dalam website. Thanks for your very useful insight, Mz Adhit!
Kesimpulannya, CSS bisa jadi powerful tool karena bisa memodifikasi elemen-elemen dalam HTML. Istilahnya, membuat website yang biasa jadi luar biasa, gitu lah ya. Long story short, dengan menguasai CSS ini Anda bisa membuat website yang unik dan lebih stand out di antara kompetitor Anda. Atau kalau nggak mau ribet, mending langsung tanya-tanya website developer kami aja. Nggak cuma CSS, UI/UX design juga bisa kita bahas bareng-bareng. We are here to help! :)
Credits:
Resource:
Adhitia Darmawan, Heads of Technology Definite
Writer:
Amalia N. Andini
