Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets)

Cara Kerja CSS – CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs web. Seiring dengan HTML, CSS adalah dasar untuk desain web. Tanpa itu, situs web akan tetap berupa teks biasa dengan latar belakang putih.

Sebelum pengembangan CSS pada tahun 1996 oleh World Wide Web Consortium (W3C), halaman web sangat terbatas baik bentuk maupun fungsinya. Browser awal menyajikan halaman sebagai hypertext – teks biasa, gambar, dan tautan ke halaman hypertext lainnya. Tidak ada tata letak sama sekali untuk dibicarakan, hanya paragraf yang melintasi halaman dalam satu kolom.

CSS memungkinkan beberapa inovasi pada tata letak halaman web, seperti kemampuan untuk :

1. Tentukan font selain default untuk browser
2. Tentukan warna dan ukuran teks dan tautan
3. Terapkan warna ke latar belakang
4. Berisi elemen halaman web dalam kotak dan mengapungkan kotak itu ke posisi tertentu di halaman.

Mereka menempatkan “gaya” dalam lembar gaya, dan untuk pertama kalinya, halaman Web dapat dirancang. Browser komersial pertama yang membaca dan menggunakan CSS adalah Microsoft Internet Explorer 3 pada tahun 1998.

Sampai hari ini, dukungan untuk fungsi CSS tertentu bervariasi dari Browser ke Browser. W3C, yang masih mengawasi dan menciptakan standar Web, baru-baru ini merilis standar baru untuk CSS – CSS3. Dengan CSS3, pengembang berharap semua browser utama akan membaca dan menampilkan setiap fungsi CSS dengan cara yang sama.

Bagaimana cara kerja CSS?

Untuk memahami dasar-dasar cara kerja CSS, Anda harus terlebih dahulu memahami sedikit tentang HTML modern. Pengembang web menata halaman sesuai dengan “model kotak / box model”. Halaman Web adalah serangkaian kotak, masing-masing berisi elemen diskrit. Kotak-kotak ini bersarang, satu di dalam yang lain.

Misalnya, header halaman adalah sebuah kotak, dan berisi beberapa kotak kecil yang terdiri dari semua elemen yang membentuk header : logo, navigasi, tombol media sosial, tombol keranjang belanja, dll.

Dengan menggunakan CSS, pengembang menetapkan gaya ke ” header”. Dalam contoh ini, mari kita asumsikan bahwa pengembang membuat teks di dalam header berwarna ungu, font Arial dan tinggi lima belas poin.

Di sinilah bagian “cascading” dari cascading style sheets berperan. Gaya font yang diterapkan ke header cascade ke semua elemen yang ada di dalam header. Elemen yang berisi teks seperti navigasi, tautan, atau ajakan bertindak semuanya akan berwarna ungu, Arial, dan tinggi lima belas poin.

Itulah pengertian, fungsi dan cara kerja css dalam sebuah situs website.