Apa Itu CSS ?

CSS adalah salah satu bahasa yang wajib anda ketahui saat belajar membuat website. Tanpanya, tampilan website akan kurang menarik, dan perlu upaya lebih untuk melakukan perubahan pada elemen tampilan.

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

CSS diguanakan 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 dengan mengatur format halaman website. Kenapa demikian ?

Apabila hanya menggunakan HTML ketika membangun website dengan beberapa halaman, Anda harus menulis tag untuk sebuah elemen HTML disemua halaman tersebut.

Dengan adanya CSS, Anda cukup menulis kode satu kali untuk sebuah elemen HTML untuk diterapkan ke semua halaman. Nantinya, ketika akan melakukan perubahan, Anda juga cukup melakukan perubahan pada satu kode tadi.

CSS sering dianggap sebagai bahasa pemrograman. Padahal CSS lebih tepat disebut sebagai bahasa style sheet yang umumnya digunakan bersama dengan JavaScript.

Apa Fungsi CSS ?

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

1. Mempercepat Loading Halaman Website 

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

3. Menawarkan Lebih Banyak Variasi Tampilan 

HTML bisa 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. Membuat Tampilan Rapi di Semua Ukuran Layar 

Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website optimal di berbagai ukuran layar. Baik itu laptop maupun di smartphone. Mengapa demikian ?

CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen HTMl sesuai ukuran yang diguakan untuk menampilkan website.

Jenis Jenis CSS

Jenis jenis CSS dibagi menjadi tiga berdasarkan penempata kodenya yaitu :

1. Inline CSS

InlineCSS adalah kode CSS yang dituliskan didalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.

Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun jenis CSS ini tepat digunakan ketika Anda ingin embuat elemen HTML dengan format khusus di sebuah halaman.

2. Internal CSS

Internal CSS dituliskan dibagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman.

Internal CSS sangat membantu ketika anda ingi membuat halaman website yang tampilanya berbeda dari halaman lain.

3. External CSS

Sesuai namanya, external CSS adalah kode CSS yang diletakan diluar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang ada tentukan. Jadi, external CSS berguna ketika anda ingin mengatur tampilan beberapa halaman sekaligus

Bagaimana Cara Kerja CSS ?

CSS bekerja ketika browser memuat halaman website. Untuk menerapkan pengaturan tampilan HTML yang telah ditentukan dengan kode CSS, prosesnya meliputi beberapa langkah.

Mulanya, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external CSS). Kemudia, browser mengubah keduanya menjadi document object model (DOM). Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat pengunjung website.

Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering proses dimana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. HAsilnya adalah halaman website yang tampil di layar perangkat Anda.