PENGERTIAN CSS, FUNGSI, DAN CONTOHNYA

APASIH CSS?

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.

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

CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website. 

Apa Fungsi CSS?

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

1. Mempercepat Loading Halaman Web

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

2. Memudahkan Pengelolaan Kode

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

3. Menawarkan Lebih Banyak Variasi Tampilan

HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website, tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan, atau membuat menu dropdown CSS.

4+ Contoh CSS

Berikut ini adalah beberapa contoh penerapan CSS yang mudah:

1. Menentukan Format Paragraf

Salah satu contoh CSS adalah untuk mengatur format paragraf. Misalkan ingin agar semua paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu tua, Anda cukup menambahkan kode di bawah ini:

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

2. Mengubah Warna Link

Anda juga bisa mengubah warna link dengan CSS. Sebagai catatan, warna link yang ditentukan dengan CSS ada empat, yaitu:

• Normal: warna link yang belum pernah dibuka dan tidak diklik
• Visited: warna link yang sudah pernah dibuka
• Hover: warna ketika Anda meletakkan kursor di atas link
• Active: warna link ketika Anda klik

Untuk menentukan keempat warna itu, gunakan kode di bawah ini dan ketikkan warna yang Anda 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 sebuah paragraf berisi huruf kecil saja? Anda tinggal mengganti “Paragraf Anda” di kode berikut ini dengan teks yang diinginkan:

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