Apa itu CSS? – Pengertian, Fungsi, dan Cara Kerjanya

Anda mungkin sering mendengar istilah CSS, terutama pada dunia programming. Istilah tersebut memang masih berhubungan dengan pemrograman website.

CSS adalah hal yang pasti akan selalu ada dalam pengetahuan pemrograman dasar bersamaan dengan HTML. Keduanya menjadi basic knowledge dari seorang programmer, khususnya seorang Front End Developer.

Lalu, apa itu CSS? Berikut kami rangkumkan informasi lengkapnya untuk Anda, meliputi pengertian, sejarah, fungsi, jenis, hingga contohnya. Jadi, mari 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 variasi tampilan di berbagai perangkat berbeda. 

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 cascading style sheets 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 cascading style sheets pada halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen.

Programmer menggunakan bahasa ini untuk memisahkan antara isi dokumen yang ditulis dengan HTML atau bahasa markup lainnya dengan presentasi dokumen cascading style sheets.

Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, serta mengurangi kompleksitas dan pengulangan pada struktur isi.

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

Fungsi CSS

Beberapa fungsi dari cascading style sheet adalah sebagai berikut.

1. Halaman Lebih Cepat

Ketika menggunakan bahasa ini, hal yang diperlukan hanya menulis satu aturan dan menerapkannya di berbagai file.

Jadi, code tersebut akan lebih singkat dan nantinya dapat membuat proses download menjadi lebih cepat.

2. Mempercepat Proses Desain

Funsgi selanjutnya adalah mempercepat proses desain karena Anda hanya perlu mengetikkan satu kali fungsi CSS lalu menggunakannya di banyak halaman HTML. Jadi, Anda pun tidak perlu lagi menyalin satu per satu desain ke setiap file halaman.

Bahasa ini dapat mengatur semua tampilan pada aspek file yang berbeda, kemudian Anda dapat menentukan file dan mengintegrasikannya di atas markup HTML.

3. Mengatur Style dalam Website

Bahas ini memiliki atribut yang lebih beragam daripada HTML ataupun PHP. CSS juga 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 cascading style sheets:

Kelebihan CSS

Berikut ini adalah beberapa kelebihan cascading style sheets.

1. Bahasa ini 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 cascading style sheets.
4. Satu file cascading style sheets dapat digunakan untuk beberapa halaman.
5. CSS menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML

Kekurangan CSS

Berikut ini adalah beberapa kekurangan cascading style sheets

1. Tampilan yang berbeda-beda pada browser
2. Beberapa browser lama yang tidak support bahasa ini
3. Dibutuhkan waktu yang lumayan lama dalam membuat dan mendesainnya,

Jenis CSS Style

Berikut adalah beberapa jenis dari cascading style sheet.

1. Internal Style Sheet

Internal Style Sheet adalah kode cascading style sheet 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 style sheet 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 style sheet 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 style sheet, antara lain:

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

Kekurangan external style sheet adalah :

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

3. Inline Style Sheet

Pada jenis ini, Anda dapat langsung memasukkan kode yang ditulis pada setiap atribut HTML. Oleh karena itu, pada setiap atribut memiliki style yang berbeda sesuai kebutuhan. Hal ini tergolong kurang efisien daripada jenis cascading style sheet 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 jenis ini biasanya digunakan untuk membuat tampilan unik di suatu halaman website dengan pola berulang.

Cara Kerja CSS

Standarnya, CSS memakai bahasa Inggris sederhana berbasis syntax. Keberadaan HTML ini berfungsi untuk mendeskripsikan konten, lalu 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. Akan tetapi, terdapat berbagai rules yang harus diperhatikan.

Selector mengarah ke elemen HTML yang ingin diubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Umumnya, deklarasi CSS berakhiran dengan tanda titik koma, sedangkan declaration block terapit oleh tanda kurung kurawal.

Contoh CSS

Berikut ini adalah contoh CSS mudah yang dapat Anda 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 cascading style sheet, 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; }

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 tautan 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; }

Macam-Macam Property CSS

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

1. Border

Border adalah properti cascading style sheet 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

2. Background

Border properti ini berperan dalam mengatur background tampilan website.

Contohnya adalah sebagai berikut:

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

3. Color

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

4. 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.

5. Font

Gunakan properti ini untuk menentukan ukuran dan jenis font serta gaya teks 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

6. Height

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

7. 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

8. Margin

Margin berfungsi untuk membuat ruang kosong di sekitar elemen bagian luar. Hal tersebut memungkinkan untuk membuat margin 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: Mengatur jarak antar elemen bagian kiri

9. Weight

Properti ini berperan dalam mengatur ketebalan dari text.

Cara Menerapkan CSS ke HTML

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 aturannya. Aturan-aturan ini akan teraplikasikan pada elemen itu saja, seperti:

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

2. Embedded Dokumen HTML

Penempatan aturan cascading style sheet 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 style sheet eksternal dalam dokumen HTML. Lembar gaya eksternal adalah file teks terpisah dengan ekstensi “.css”.

Hal ini dapat berperan sebagai aturan gaya dalam file teks dan memasukkannya 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.

Nah, itulah tadi penjelasan mengenai apa itu cascading style sheet 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 cascading style sheet. Hal ini karena CSS adalah salah satu bahasa markup yang paling fleksibel. Jadi, sebaiknya segera implementasikan desain website Anda dengan CSS.