CSS

 CSS

CSS merupakan kode-kode yang dipakai untuk mendesain laman HTML. Bila diibaratkan dengan bahasa awam, HTML dapat dikatakan sebagai handphone dan CSS adalah casing yang akan membuat handphone terlihat semakin cantik.

    CSS berfungsi untuk membantu para web designer agar dapat mengubah dan menambahkan, baik teks, gambar, hingga latar belakang sebuah halaman HTML. Biasanya, keberadaan CSS dapat langsung terlihat dengan adanya perbedaan pada warna teks. CSS memberi perintah teks berwarna biru dengan tag <span> dengan tambahan tag class=” nama warna”. Dengan demikian, setiap tag <span> muncul, teks yang mengikutinya pun akan berwarna sesuai warna yang diinginkan dan seterusnya.

Fungsi CSS

Berikut adalah beberapa keuntungan dari menggunakan CSS untuk situs web, antara lain:

1. Mempercepat Proses Loading Halaman Web
   Dengan menggunakan satu rangkaian kode CSS yang dapat diterapkan pada beberapa halaman website sekaligus, jumlah kode yang dibutuhkan dapat diminimalkan. Hal ini mengurangi beban saat loading website, sehingga waktu yang dibutuhkan untuk memuat halaman web menjadi lebih cepat.

2. Menyediakan Beragam Variasi Tampilan
   HTML memang dapat mengatur tampilan situs web, namun kemampuannya terbatas. CSS, di sisi lain, menawarkan berbagai macam gaya tampilan untuk halaman web, memungkinkan desain yang lebih kreatif dan beragam.

3. Membuat Tampilan Website Lebih Rapi
   CSS memungkinkan tampilan halaman website yang lebih rapi dan optimal di berbagai ukuran layar, baik itu desktop maupun smartphone. Hal ini berarti pemilik website tidak perlu repot mengatur tampilan agar sesuai dengan berbagai perangkat pengunjung.

Kelebihan CSS ini, seperti kemampuan untuk mengatur ukuran elemen HTML agar sesuai dengan ukuran layar menggunakan properti seperti max-width, menjadikan tampilan konten lebih responsif terhadap berbagai ukuran layar. Tanpa CSS, tampilan website akan terlihat monoton dan membutuhkan waktu yang lebih lama untuk dimuat.

Jenis Jenis

1. Inline Style CSS  

   Kode CSS jenis ini dituliskan langsung di dalam file HTML dan diaplikasikan pada elemen tertentu menggunakan atribut style pada tag HTML. Inline Style CSS hanya mempengaruhi satu baris kode HTML dan diterapkan langsung pada elemen yang bersangkutan.

2. Internal CSS

   Kode CSS ini ditempatkan di bagian header dari file HTML. Meskipun Internal CSS dapat mempermudah pengelolaan gaya di dalam satu halaman, penggunaannya kadang-kadang dapat memperlambat proses loading halaman web.

3. External CSS

   Kode CSS ini berada di luar dokumen HTML dan disimpan dalam file terpisah dengan ekstensi .css. External CSS digunakan untuk menyesuaikan tampilan berbagai halaman situs web secara konsisten atau untuk beberapa halaman sekaligus, sehingga lebih mudah dalam mengelola tampilan keseluruhan situs.

Kelebihan

1. Konsistensi dan Gaya Global

   CSS memungkinkan penampilan yang seragam di seluruh halaman web. Dengan satu file CSS eksternal, Anda bisa menjaga keseragaman gaya, mengurangi duplikasi kode, dan memudahkan pembaruan gaya secara global.

2. Pemeliharaan dan Pembaruan yang Efisien

   Memisahkan konten dan gaya dengan CSS memudahkan pemeliharaan halaman web. Anda bisa mengubah font, warna, atau tata letak dengan mengedit beberapa baris kode di satu file CSS, tanpa harus mengubah setiap elemen HTML, sehingga pemeliharaan lebih praktis.

3. Menghemat Waktu dan Mempercepat Waktu Loading

   Menggunakan file CSS eksternal memungkinkan browser menyimpan gaya dalam cache, mempercepat waktu loading halaman dan memberikan pengalaman pengguna yang lebih baik, terutama bagi pengunjung yang kembali.

4. Pilihan Desain yang Lebih Luas dan Responsif

   CSS memungkinkan berbagai opsi desain dan mendukung desain responsif yang menyesuaikan dengan berbagai ukuran layar, memastikan situs web Anda tampak baik di semua perangkat.

5. Ramah SEO

   CSS dengan kode yang bersih dan terstruktur mempermudah mesin pencari untuk memahami situs Anda, meningkatkan peringkat dan visibilitas di hasil pencarian.

6. Aksesibilitas dan Halaman Ramah Cetak

   CSS meningkatkan aksesibilitas web dan memungkinkan pembuatan versi halaman yang ramah untuk dicetak, memudahkan pengguna untuk mencetak artikel atau detail produk, terutama bagi situs e-commerce atau blog.

7. Kompatibilitas Perangkat dan Platform

   CSS memastikan tampilan situs web konsisten di berbagai perangkat dan platform, membuatnya lebih mudah diakses oleh beragam pengguna.

8. Minifikasi CSS dan Kecepatan Muat Halaman

   Mengurangi ukuran file CSS membantu mempercepat waktu muat halaman, penting untuk mempertahankan pengunjung dan memberikan pengalaman browsing yang lancar.

9. Gaya Berjenjang dan Penggunaan Kelas/ID

   CSS memungkinkan gaya berjenjang, pewarisan, dan penggunaan kelas atau ID untuk penataan yang fleksibel dan kontrol tata letak yang efisien.

10. Animasi dan Efek CSS

    CSS mendukung animasi dan efek visual yang meningkatkan pengalaman pengguna tanpa memerlukan skrip kompleks, membuat situs lebih menarik dan interaktif.

Kekurangan

1. Masalah Kompatibilitas Antar-Browser Tampilan CSS bisa berbeda di berbagai browser, menyebabkan ketidakkonsistenan dalam tampilan situs web. Pengembang sering harus menulis kode khusus untuk tiap browser atau menggunakan awalan vendor untuk memastikan semuanya tampak sesuai.

1. Kurva Pembelajaran CSS bisa cukup rumit untuk dipelajari, terutama bagi pemula. Anda harus memahami penyeleksi, properti, nilai, dan model kotak, yang mungkin membingungkan pada awalnya.

2. Masalah Keamanan CSS tidak memiliki fitur keamanan bawaan dan dapat menjadi sumber kerentanan, seperti serangan Cross-Site Scripting (XSS). Pengembang harus berhati-hati dan memastikan CSS yang diinput pengguna telah dibersihkan dan divalidasi untuk mencegah risiko keamanan.

3. Kontrol Tata Letak Terbatas untuk Desain Kompleks Mengatur tata letak web yang rumit dengan CSS bisa jadi sulit. Untuk mencapai desain tertentu, seperti kolom dengan tinggi yang sama, sering kali memerlukan solusi atau menggunakan teknologi lain seperti Flexbox atau Grid.

4. Ukuran File dan Kinerja File CSS yang besar atau tidak dioptimalkan dapat memperlambat waktu muat halaman web. Penting untuk menjaga CSS seminimal dan seoptimal mungkin agar situs tetap berkinerja baik.

5. Konflik Gaya dan Kekhususan Berlebihan Karena CSS bersifat “cascading”, gaya dapat bertumpuk dan saling menimpa, menyebabkan konflik yang tidak terduga. Mengelola konflik-konflik ini bisa menjadi tantangan.

6. Tantangan Pemeliharaan Saat situs web tumbuh, pemeliharaan dan pengaturan ulang CSS bisa menjadi rumit dan memakan waktu. Penting untuk menggunakan praktik terbaik dan konvensi penamaan yang baik agar gaya tetap mudah dikelola.

Cara Kerja 

CSS bekerja saat browser memuat halaman web. Proses penerapan pengaturan tampilan HTML yang ditentukan dengan CSS melibatkan beberapa langkah:

1. Memuat File HTML dan CSS
   Browser pertama-tama memuat file HTML dan file CSS (jika menggunakan external CSS). Kedua file ini berisi struktur dan gaya tampilan halaman web.

2. Membentuk Document Object Model (DOM)
   Browser kemudian mengubah HTML dan CSS yang dimuat menjadi Document Object Model (DOM). DOM adalah representasi struktural dari dokumen HTML dan CSS dalam memori komputer atau perangkat pengunjung.

3. Proses Rendering
   Setelah membentuk DOM, browser melanjutkan ke proses rendering. Dalam tahap ini, browser menerapkan pengaturan gaya dari kode CSS ke elemen-elemen HTML sesuai dengan struktur DOM yang telah dibuat. Hasilnya adalah tampilan halaman web yang sesuai dengan desain yang telah ditentukan, yang kemudian ditampilkan di layar perangkat pengguna.

Proses ini memungkinkan browser untuk menerapkan pengaturan tampilan secara efisien dan dinamis berdasarkan kode CSS yang ditentukan.

Contoh penerapan CSS yang mudah:

• Mengatur Format Paragraf Anda dapat menggunakan CSS untuk mengubah format paragraf. Misalnya, jika Anda ingin semua paragraf di halaman web memiliki ukuran teks 120% dan berwarna abu-abu tua, tambahkan kode berikut:

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

• Mengubah Warna TautanCSS memungkinkan Anda untuk mengubah warna tautan. Ada empat jenis warna tautan yang dapat diatur:

Normal: Warna tautan yang belum pernah dikunjungi.

Visited: Warna tautan yang sudah pernah dikunjungi.

Hover: Warna ketika kursor diletakkan di atas tautan.

Active: Warna saat tautan diklik.

 

Untuk mengatur warna-warna tersebut, gunakan kode berikut dan ganti color dengan warna yang diinginkan:

a:link {

  color: gray;

}

a:visited {

  color: green;

}

a:hover {

  color: purple;

}

a:active {

  color: teal;

}

• Mengatur Huruf Kapital atau Kecil Jika Anda ingin sebuah paragraf hanya berisi huruf kecil, Anda dapat menggunakan kode berikut, mengganti "Paragraf Anda" dengan teks yang diinginkan:

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

• Membuat Kotak Teks CSS memungkinkan Anda untuk membuat kotak teks, biasanya untuk menonjolkan informasi penting. Gunakan kode berikut untuk menambahkan kotak dengan garis tepi berukuran 5px dan berwarna ungu:

p.important {

  border-style: solid;

  border-width: 5px;

  border-color: purple;

}

 Untuk menerapkannya pada teks tertentu, gunakan:

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

• Membuat Tombol untuk Tautan Untuk membuat tautan yang terlihat seperti tombol, gunakan kode berikut: 

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;

}

• Penjelasan kode:

  • a:link, a:visited, a:hover, a:active memastikan tombol tetap tampil baik dalam berbagai kondisi (diklik, dikunjungi, atau ditunjuk dengan kursor).
  • background-color menentukan warna latar belakang tombol.
  • padding mengatur ukuran ruang di dalam tombol.
  • text-align mengatur posisi teks di dalam tombol.
  • text-decoration mengatur ada atau tidaknya garis bawah pada teks.
  • display: inline-block memungkinkan pengaturan tinggi dan lebar tombol.

• Meng-highlight Baris dalam Tabel
  Untuk memberikan warna berbeda pada baris tabel saat ditunjuk dengan kursor, tambahkan kode berikut:  

tr:hover {

  background-color: #ddd;

} 

Gantilah #ddd dengan kode warna CSS lain jika Anda ingin menggunakan warna yang berbeda. Anda dapat mencari kode warna CSS yang diinginkan jika belum tahu. 

source:

• https://www.biznetgio.com/news/apa-itu-css
• https://ellow.io/advantages-and-disadvantages-of-css/
• https://www.niagahoster.co.id/blog/pengertian-css/