Apa Itu CSS? Pengertian, Fungsi, dan Contohnya


CSS yaitu salah satu bahasa yang wajib kamu ketahui saat belajar membuat website. Tanpanya, tampilan website kurang menarik, dan perlu usaha lebih untuk melakukan perubahan pada elemen tampilan.

CSS singkatan dari cascading style sheets, yang merupakan bahasa untuk menentukan tampilan dan format halaman website. Dengan CSS, kamu bisa mengatur jenis font, warna tulisan, serta latar belakang halaman.

CSS digunakan dengan bahasa markup, seperti XML dan HTML untuk membangun website yang menarik dan mempunyai fungsi yang berjalan baik.

CSS ini juga berguna untuk mengatasi keterbatasan HTML mengatur format halaman website. Kenapa begitu?

Apabila hanya menggunakan HTML saat membangun website dengan halaman, kamu harus menulis tag untuk elemen HTML di semua halaman itu.

Dengan adanya CSS, kamu cukup menulis kode 1 kali untuk elemen HTML untuk diterapkan ke seluruh halaman. Nantinya, saaat akan melakukan perubahan, kamu juga cukup melakukan perubahan disatu kode tadi. Praktis, bukan?

Apa Fungsi CSS?

Secara umum, CSS ini berfungsi untuk mengatur tampilan halaman website yang berbasis HTML atau bahasa markup lainnya. Namun, masih ada fungsi CSS lainnya, yaitu:

1. Mempercepat Loading Halaman Web

Jika kamu mengatur tampilan website dengan CSS, kecepatan loading website dapat meningkat. Karena kamu bisa menuliskan satu rangkaian kode untuk halaman website sekaligus, jumlah kode dapat diminimalkan. Dengan begitu, beban disaat proses loading website lebih kecil.

2. Memudahkan Pengelolaan Kode

Dengan CSS, kamu tidak perlu merubah kode di halaman apabila mau mengganti tampilan website. Sebagai contoh, kamu ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS yang terkait latar belakang, perubahan tersebut akan diterapkan di semua halaman.

Baca Juga :  Cara Cek Kecepatan VPS Linux via Speedtest [Ubuntu, Debian, CentOS]

3. Menawarkan Lebih Banyak Variasi Tampilan

HTML dapat mengatur tampilan halaman website, namun terbatas. CSS menawarkan lebih banyak style tampilan, hingga kamu bisa lebih bebas membuat antarmuka website. Contohnya, kamu bisa menggunakan CSS untuk membuat tombol menggunakan warna yang kamu inginkan.

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

Fungsi CSS yang tidak kalah menarik yaitu tampilan website optimal di beberapa ukuran layar. Baik itu di laptop ataupun di smartphone. Mengapa begitu?

CSS mempunyai berbagai property untuk mengatur tampilan konten sesuai dengan kebutuhan layar, misalnya dengan max-width. Saat menggunakan property tersebut mengubah ukuran elemen HTML sesuai dengan ukuran layar yang digunakan untuk menampilkan website.

CSS bekerja saat browser memuat halaman website. Untuk menerapkan tampilan HTML yang sudah ditentukan dengan kode CSS, prosesnya ada beberapa langkah.

Mulanya, browser akan memuat file CSS dan HTML (jika kodenya ditulis untuk external CSS). Lalu, browser mengubah keduanya jadi document object model (DOM). Ini merupakan komponen yang mewakili file HTML & CSS dalam memori perangkat pengunjung website.

Setelah HTML dan CSS ini diubah menjadi DOM, browser akan melakukan rendering, yaitu proses di mana browser menerapkan pengaturan kode CSS pada elemen HTML. Hasilnya yaitu halaman website yang tampil di layar perangkat kamu.

5+ Contoh CSS

Berikut ini merupakan contoh penerapan CSS yang mudah:

1. Menentukan Format Paragraf

Salah satu contoh CSS yaitu untuk mengatur format paragraf. Contohnya ingin semua paragraf dalam halaman website berukuran 120% berwarna abu tua, kamu cukup menambahkan kode di seperti ini:

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

Kamu juga bisa mengubah warna link dengan CSS. Untuk catatan, warna link yang ditentukan dengan CSS ada 4, yaitu:

  • Normal: warna link yang belum pernah di buka & tidak di klik
  • Visited: warna link yang sudah pernah di buka
  • Hover: warna ketika kamu meletakkan kursor di atas link
  • Active: warna link ketika kamu klik
Baca Juga :  cPanel vs Webmin: Duel Control Panel Hosting Terbaik

Untuk menentukan keempat warna tersebut, gunakan kode di bawah ini dan ketikkan warna yang kamu inginkan setelah color:.

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

3. Menentukan Huruf Kapital/Kecil

Ingin agar paragraf berisi huruf kecil saja? kamu tinggal mengganti “Paragraf Kamu” di kode berikut ini dengan teks yang di inginkan:

<p class="smallcaps">Paragraf Kamu.</p>

4. Membuat Kotak Teks

CSS juga memungkinkan kamu membuat kotak teks. Umumnya, kotak teks ini di gunakan untuk menonjolkan informasi penting. Untuk melakukannya, gunakan contoh CSS berikut ini:

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

Kode itu akan menambahkan kotak dengan border ukuran 5px dan warna ungu di teks yang kamu tandai dengan class important. Untuk menandai teks dengan class trsebut, tambahkan kode berikut ini:

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

Link akan terlihat lebih mencolok apabila di letakkan dalam tombol. Untuk membuatnya dengan CSS, gunakan kode di berikut ini:

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

Supaya kamu tahu apa saja fungsi dari bagian-bagian kode itu, simak penjelasan berikut ini:

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

6. Meng-highlight Baris dalam Tabel

Jika ingin baris dalam sebuah tabel mempunyai warna berbeda ketika di tunjuk dengan kursor, kamu bisa menambahkan contoh CSS di bawah ini:

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

Setelah background-color: Kamu cukup mengganti #ddd dengan kode warna CSS. Cek daftar kode warna CSS jika kamu belum tahu.

Baca Juga :  Cara Melihat Name Server di cPanel Hosting [Gampang Banget]

Setelah background-color: kamu cukup mengganti #ddd dengan kode warna CSS. Yaitu dengan cara cek daftar kode warna CSS apabila kamu belum tahu.