Mengenal CSS sebagai Pengatur Seluruh Tampilan Website

CSS adalah hal yang pasti akan selalu muncul dalam pengetahuan pemrograman dasar bersamaan dengan HTML. Keduanya menjadi basic knowledge dari seorang programmer khususnya seorang Front End Developer. Lalu, apa itu CSS? Ayo baca lebih lanjut!

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets yaitu bahasa pemrograman yang memberikan tampilan dan tata letak situs web. Seiring dengan HTML, bahasa ini adalah dasar untuk desain web. Situs web akan tetap menjadi teks biasa dengan latar belakang putih tanpa adanya CSS sehingga tidak akan menarik dan terkesan datar atau monoton.

Kegunaan bahasa ini adalah untuk menyederhanakan proses pembuatan website dengan mengatur elemen di bahasa markup. Pemakaiannya adalah untuk mendesain website front end. CSS dapat mengatur gaya huruf, warna huruf, ukuran huruf, baris antar paragraf, serta jenis background. Selain itu, bahasa ini juga bisa untuk mendesain layout, efek untuk website, dan memvariasikan tampilan di berbagai perangkat berbeda. 

Baca Juga : Berkenalan dengan Web Developer Beserta Tugas dan Tanggung Jawabnya

Sejarah Perkembangan CSS

Format dasar CSS saat ini merupakan ide dari seorang programmer yang bernama Hakon Wium Lie yang termuat dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau mengembangkan suatu standard CSS bersama dengan seorang temannya yang bernama Bert Bos.

Pada akhir tahun 1996, CSS telah resmi dipublikasikan dan didukung seorang programmer bernama Thomas Reardon dari perusahaan software ternama yaitu Microsoft. Penulis maupun pembaca dapat menggunakan CSS pada halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen.

Programmer menggunakan bahasa ini 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 struktur isi.

Sekarang penggunaan CSS telah semakin meluas dan terus berkembang. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman website (situs).

Fungsi CSS

1. Halaman Lebih Cepat 

Ketika menggunakan CSS, hal yang perlu hanya menulis satu aturan dan menerapkannya di berbagai file yang membutuhkan hanya dengan memanggilnya.  Jadi, code tersebut akan lebih singkat dan nantinya membuat proses download menjadi lebih cepat.

2. Mempercepat Proses Desain

Tidak perlu lagi menyalin satu per satu desain ke setiap file halaman. Hanya perlu mengetikkan satu kali fungsi CSS lalu menggunakannya di banyak halaman HTML. CSS dapat mengatur semua tampilan pada aspek file yang berbeda. Kemudian tentukan file dan mengintegrasikannya di atas markup HTML.

3. Mengatur Style dalam Website

CSS memiliki atribut yang lebih beragam daripada HTML ataupun PHP. Bahasa ini dapat menentukan font selain default, menentukan warna dan ukuran teks, menerapkan warna background, menambah elemen tabel, dan menggabungkannya ke posisi tertentu. 

Kekurangan dan Kelebihan CSS

Berikut merupakan kekurangan beserta dengan kelebihan CSS:

Kelebihan CSS

Berikut ini adalah beberapa kelebihan CSS.

1. Bahasa pada CSS sangat fleksibel sehingga nyaman untuk dilihat
2. File CSS berukuran cenderung kecil sehingga bandwidth yang dibutuhkan juga kecil
3. Antara dokumen CSS dengan HTML dapat dipisah sehingga memberi kemudahan pembuat website untuk mengubah atau mengedit file CSS
4. Banyak halaman yang dapat menggunakan satu file CSS
5. CSS menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML

Kekurangan CSS

Berikut ini adalah beberapa kekurangan CSS

1. Tampilan yang berbeda-beda pada browser
2. Terdapat browser lama yang tidak support CSS
3. Dalam membuat dan mendesain CSS dibutuhkan waktu yang lumayan lama

Jenis CSS Style

1. Internal Style Sheet

Internal Style Sheet adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website.

Kelebihan internal CSS, antara lain:

• Editing yang mudah di tiap halaman website
• Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
• Internal stylesheet bisa memakai ID dan Class
• Perbaikan error yang mudah

Kekurangan internal CSS, antara lain:

• Kurang efisien karena harus menuliskan ulang untuk penggunaan di beberapa halaman website
• Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya.
• Ukuran file menjadi lebih besar.

2. External Style Sheet

External Style Sheet jauh lebih praktis penggunaannya karena peletakannya yang berada di luar area object. Penggunaan jenis ini dapat digunakan secara berulang pada objek sekaligus bahkan antar website sehingga lebih menghemat ruang.

Kelebihan External CSS, antara lain:

• Ukuran file lebih kecil
• Code rapi
• Respon website lebih cepat
• Bisa digunakan untuk beberapa halaman website berbeda

Kekurangan external CSS adalah :

• Kurang cocok untuk halaman custom
• Halaman website rawan berantakan saat file gagal load sempurna

3. Inline Style Sheet

Jenis ini dapat langsung memasukkan kode yang anda tulis pada setiap atribut HTML. Oleh karena itu, pada setiap atribut memiliki style yang berbeda sesuai kebutuhan dan hal ini tergolong kurang efisien daripada jenis CSS lainnya.

4. Embedded Style Sheet

CSS jenis ini memiliki ciri yang hampir sama dengan Inline Style Sheet karena penempatannya di halaman yang sama pada suatu website. Bedanya, posisi untuk Embedded Style Sheet berada di antara tag <head> dan </head> dengan awalan tag <style>. Pemanfaatan Embedded Style Sheet biasanya untuk membuat tampilan unik di suatu halaman website dengan pola berulang.

Cara Kerja

Standardnya, CSS memakai bahasa Inggris sederhana berbasis syntax. Keberadaan HTML ini untuk mendeskripsikan konten dan dibantu CSS dengan memberikan sentuhan modifikasi. Kombinasi kinerja keduanya dapat memaksimalkan tampilan website seperti yang anda inginkan.

Di dalam struktur yang sederhana ini, CSS terdiri dari selector dan declaration block. Pengaturan elemen dapat dilakukan sesuai dengan keinginan yang juga dapat memungkinkan anda melakukan deklarasi terhadap elemen tersebut. Terdapat berbagai rules yang harus diingat.

Selector mengarah ke elemen HTML yang ingin diubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang terpisahkan dengan tanda titik koma. Umumnya deklarasi CSS berakhiran dengan tanda titik koma, sedangkan declaration block terapit oleh tanda kurung kurawal.

Cara Aplikasi

Terdapat empat cara untuk menerapkan gaya (style) ke dokumen HTML.

1. Penerapan sebaris dengan elemen HTML

Penggunaan bisa dalam atribut style dari elemen HTML apa saja untuk mendefinisikan aturan style. Aturan-aturan ini akan teraplikasikan pada elemen itu saja, seperti:

<p style = property : value ; “Hello World!”  </p>

2. Embedded Dokumen HTML

Penempatan aturan CSS ke dalam dokumen HTML menggunakan elemen < style >  untuk memuat aturan.  Tag <style > ….. </style > terletak dalam tag  <head> … </head >

3. File External Sheet Style

Elemen ini dapat berfungsi untuk menyertakan file stylesheet eksternal dalam dokumen HTML. Lembar gaya eksternal adalah file teks terpisah dengan ekstensi “.css”. Ini dapat pula berperan sebagai semua aturan gaya dalam file teks dan memasukkan file ini dalam dokumen HTML apa pun di dalam tag <head>…  </head >  menggunakan elemen <link >

4. Default Browser

Peramban menyertakan beberapa gaya yang telah anda tulis sebelumnya. Namun, ada juga beberapa browser yang tidak mendukung spesifikasi yang modern atau memiliki bentuk sendiri menggunakan propertinya. Oleh karena itu, anda harus berhati-hati saat menulis CSS dalam dokumen HTML.

Contoh Property

Pada umumnya, menuliskan suatu property  berarti juga menuliskan value-nya. Properti ini berfungsi untuk memberi efek khusus pada elemen HTML dan nantinya tampil pada website.

• Border

Border adalah properti CSS yang berfunsi untuk mengatur dan membuat garis tepi pada HTML dengan banyak variasi. Adapun contoh dari border properti, seperti:

1. Border-left-width :mengatur lebar garis kiri
2. Border-color :mengatur warna dari garis
3. Border-style : mengatur style dari garis
4. Border-top : membuat garis atas
5. Border-right : membuat garis kanan

• Background

Border properti ini berperan dalam mengatur background tampilan website.

Contoh :

1. Background-color : memberi warna pada latar belakang
2. Background-image : memberi gambar pada latar belakang dari suatu element
3. Background-position : mengatur posisi gambar pada latar belakang

• Color

Properti color memiliki fungsi untuk mengubah warna text, background, dan lain sebagainya.

• Float

Properti float berfungsi untuk mengatur text agar dapat melipat di sekitar elemen gambar, tetapi juga bisa anda gunakan untuk layout dan style lainnya. 

Contoh : 

float: right; Untuk menentukan elemen harus mengapung di sebelah kanan elemen yang menampungnya.

• Font

Gunakan properti ini untuk menentukan ukuran font, gaya teks, dan jenis font yang akan tampil di website nantinya. 

Contoh :

1. Font-weight : mengatur ketebalan dari text
2. Font-size : mengatur ukuran font sesuai keinginan
3. Font-family : mengatur jenis font 
4. Font-style : mengatur style font pada text
5. Font-variant : mengatur font apakah menjadi huruf kecil atau tidak

• Height

Ini adalah properti yang berfungsi untuk mengatur tinggi dari suatu elemen secara otomatis dalam nilai seperti pixel, cm, em, persen, dan sebagainya. 

• Padding

Untuk menghasilkan ruang kosong di sekitar konten, entah di dalam atau di luar .

Contoh :

1. Padding-top  : mengatur ruang elemen dengan konten bagian atas
2. Padding-right : mengatur ruang elemen dengan konten bagian kanan
3. Padding-bottom : mengatur ruang pada elemen dengan konten bagian bawah
4. Padding-left : mengatur ruang pada elemen dengan konten bagian kiri

• Margin

Margin berfungsi untuk membuat ruang kosong di sekitar elemen bagian luar. Hal tersebut memungkinkan untuk sisi bawah, atas, kiri, dan kanan secara terpisah.

Contoh :

1. Margin-top : mengatur jarak antar elemen bagian atas
2. Margin-right : mengatur jarak elemen bagian kanan
3. Margin-bottom : mengatur jarak elemen bagian bawah
4. Margin-left : atur jarak antar elemen bagian kiri

• Weight

Properti ini berperan dalam mengatur ketebalan dari text.

Contoh CSS

Berikut ini adalah contoh CSS mudah yang dapat kalian gunakan.

1. Menentukan Format Paragraf

Contoh dari pemrograman ini adalah untuk mengatur format paragraf. Contohnya adalah semua paragraf dalam satu halaman memiliki ukuran 120% dan berwarna abu-abu tua, kode yang ditambahkan adalah:

p { font-size: 120%; color: dimgray; }

2. Mengubah Warna Link

Catatan berikut ini menunjukkan warna link yang telah ditentukan dengan CSS, yaitu:

• Normal: Warna link belum pernah dibuka dan tidak diklik
• Visited: Warna link sudah pernah dibuka
• Hover: Warna ketika meletakkan kursor di atas link
• Active: Warna ketika link diklik

Kode yang dapat digunakan untuk menentukkan keempat warna tersebut, yaitu:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Baca Juga: Mengenal Apa Itu Inbound Link? Definisi, Contoh dan Manfaat

3. Menentukan Huruf Kapital atau Kecil

Berikut ini adalah kode yang dapat digunakan agar sebuah paragraf hanya berisi huruf kecil atau kapital saja.

<p class=”smallcaps”>Paragraf Anda.</p>

4. Membuat Kotak Teks

Pada umumnya, kotak teks berguna untuk menonjolkan sebuah informasi yang penting. Berikut ini adalah kode yang dapat digunakan:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Hasil dari kode tersebut adalah kotak dengan border berukuran 5px dan warna ungu di sekitar teks yang dapat ditandai dengan class important. Untuk menandai teks dengan kelas tersebut, dapat ditambahkan class sebagai berikut.

<p class=”important”>Paragraf Anda.</p>

5. Membuat Link

Fungsi dari dibuatnya tombol link adalah agar link terlihat lebih mencolok. Kode di bawah dapat digunakan untuk membuat tombol link:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Berikut adalah penjelasan bagian-bagian dari kode di atas:

• a:link, a:visited, a:hover, a:active memastikan bahwa tombol akan selalu muncul meskipun sudah diklik atau ditunjuk dengan kursor. 
• background-color menentukan warna tombol.
• padding menentukan ukuran tombol.
• text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
• text-decoration menentukan ada atau tidaknya garis bawah di teks.
• display: inline-block memungkinkan untuk mengatur tinggi dan lebar tombol.

6. Menandai Baris dalam Tebal

Fungsi dari kode ini adalah untuk membuat garis dalam tabel memiliki warna yang berbeda ketika ditunjuk dengan kursor. Kode yang dapat digunakan adalah:

tr:hover { background-color: #ddd; }

Kesimpulan

Di atas adalah penjelasan mengenai apa itu CSS beserta dengan jenis, contoh dan cara kerjanya.

CSS adalah alat yang paling bagus dalam mendekorasi web semenarik mungkin sesuai dengan yang diinginkan. Saat ini, sudah banyak website yang menggunakan CSS. Hal ini karena CSS adalah salah satu bahasa markup yang wajib ada.

Sekawan Studio menyediakan jasa pembuatan website untuk mengoptimalkan situs pada SERP.