CSS - Zidni Ilma (2023102003)

 

CSS, atau Cascading Style Sheets, adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan format dari dokumen yang ditulis dalam bahasa markup seperti HTML.

Pada awalnya CSS dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk mengatasi keterbatasan HTML dalam mendesain tampilan halaman web. Sebelum adanya CSS, semua pengaturan gaya harus dilakukan langsung di dalam markup HTML, yang membuat proses pengeditan menjadi rumit dan tidak efisien. Dengan CSS, pengembang dapat menulis satu set aturan gaya yang dapat diterapkan ke banyak halaman, sehingga mempercepat proses pengembangan dan meningkatkan konsistensi desain.

Dalam pembuatan website, CSS berfungsi dalam:

1.      Mempercepat Loading Halaman Web: Dengan menggunakan CSS, pengembang dapat menuliskan satu set aturan gaya yang dapat diterapkan ke banyak halaman sekaligus. Ini mengurangi jumlah kode yang perlu dimuat, sehingga mempercepat waktu loading halaman.

2.      Memudahkan Pengelolaan Kode: CSS memungkinkan pengelolaan gaya secara terpusat. Jika ada perubahan yang perlu dilakukan, seperti mengubah warna latar belakang, pengembang hanya perlu mengedit satu file CSS, dan perubahan tersebut akan otomatis diterapkan di seluruh halaman yang menggunakan file tersebut.

3.      Variasi Tampilan yang Lebih Banyak: CSS memberikan fleksibilitas dalam mendesain tampilan situs web. Dengan CSS, pengembang dapat menciptakan berbagai variasi gaya untuk elemen-elemen di halaman, seperti tombol, menu, dan teks, sehingga antarmuka pengguna menjadi lebih menarik14.

4.      Tampilan Responsif: CSS mendukung desain responsif, yang memungkinkan tampilan situs web beradaptasi dengan berbagai ukuran layar perangkat. Ini penting untuk memastikan pengalaman pengguna yang baik di desktop, tablet, dan smartphone.

5.      Meningkatkan Estetika Visual: Dengan berbagai properti dan nilai yang tersedia dalam CSS, pengembang dapat menciptakan desain yang lebih estetik dan menarik bagi pengunjung, termasuk pengaturan font, warna, margin, padding, dan elemen visual lainnya.

Penggunaan CSS sangat beragam sehingga perlu diperhatikan bahwa CSS memiliki nilai plus dan minusnya yang antara lain:

Kelebihan CSS

  1. Pemisahan Konten dan Presentasi: CSS memisahkan konten (HTML) dari gaya (CSS), memungkinkan perubahan pada tampilan tanpa harus mengubah struktur HTML.
  2. Fleksibilitas dan Efisiensi: Desainer dapat dengan mudah mengubah tampilan situs secara keseluruhan dengan mengedit satu file CSS, yang menghemat waktu dan usaha.
  3. Desain Responsif: CSS memungkinkan pembuatan desain yang responsif, sehingga tampilan situs dapat menyesuaikan dengan berbagai ukuran layar perangkat.
  4. Dukungan untuk Animasi: CSS mendukung animasi dan transisi, meningkatkan interaktivitas tanpa memerlukan JavaScript tambahan.
  5. Kecepatan Loading Halaman: Penggunaan CSS eksternal dapat mempercepat waktu loading halaman karena mengurangi ukuran file HTML.

Kekurangan CSS

  1. Kompatibilitas Browser: Tidak semua fitur CSS didukung secara konsisten di semua browser, yang dapat menyebabkan tampilan yang berbeda pada platform yang berbeda.
  2. Kurangnya Fitur Pengelolaan Variabel: CSS memiliki dukungan terbatas untuk variabel, membuat manajemen gaya yang kompleks menjadi kurang efisien.
  3. Kompleksitas dalam Proyek Besar: Dalam proyek besar, pengelolaan kode CSS bisa menjadi rumit dan sulit untuk dipelajari, terutama bagi pemula.
  4. Masalah Keamanan: CSS memiliki keterbatasan dalam hal keamanan, karena tidak dirancang untuk menangani logika bisnis atau kontrol akses.
  5. Keterbatasan dalam Penanganan Logika: CSS tidak dapat menangani logika pemrograman, sehingga sering kali perlu dikombinasikan dengan JavaScript untuk fungsionalitas lebih lanjut.

Cara Menambahkan CSS ke HTML dapat menggunakan tiga cara yaitu:

1. Inline CSS

CSS ditulis langsung pada atribut elemen HTML menggunakan atribut style.

Contoh:


2. Internal CSS

CSS ditulis dalam elemen <style> di dalam bagian <head> dari dokumen HTML.

Contoh:



3. Eksternal CSS

CSS ditulis dalam file terpisah dengan ekstensi .css, lalu dihubungkan ke file HTML menggunakan elemen <link> di bagian <head>.

contoh:


Jika di HTML menggunakan <!-- --> maka di CSS kita dapat menggunakan /* */ untuk menambahkan komentar. contoh:

ID Dan Class

  1. ID
ID di HTML
ID di CSS
        2. Class
Input Multiple Class di HTML
Styling Class di CSS
Tampilan di browser

Akses ke GitHub: https://github.com/Zidniiii/Web-Progamming-semester-3/tree/e7e367aa091fcff1cd52665eeeaccf5fbc24756f/CSS




 

Comments

Post a Comment

Popular posts from this blog

Entitias HTML - Zidni Ilma (2023102003)

Image
 ENTITITAS HTML Pernah penasaran bagaimana karakter-karakter spesial seperti tanda kutip, tanda lebih besar, atau simbol mata uang bisa muncul dengan rapi di halaman web? Rahasianya terletak pada entitas HTML. Dengan menggunakan entitas, kita bisa memastikan tampilan halaman web kita selalu sempurna sesuai yag kita inginkan. Entitas HTML sendiri adalah representasi kode khusus yang digunakan untuk mewakili karakter-karakter yang memiliki makna khusus dalam bahasa HTML. Dengan menggunakan entitas, kita dapat memastikan bahwa karakter-karakter tersebut ditampilkan dengan benar di halaman web, tanpa mengganggu struktur HTML itu sendiri. Fungsi Entititas dalam HTML: Mencegah Kesalahan Interpretasi, Karakter-karakter seperti < dan > memiliki makna khusus dalam HTML (sebagai tag pembuka dan penutup). Jika kita menggunakan karakter-karakter ini secara langsung tanpa entitas, browser akan menganggapnya sebagai bagian dari struktur HTML, bukan sebagai ...
Read more

Input dalam Formulir HTML - Zidni Ilma (2023102003)

Image
Formating Formulir HTML dengan menggunakan Input Dalam pengembangan web, formulir HTML adalah komponen penting dalam pembuatan halaman web interaktif. Elemen ini memungkinkan pengguna memasukkan informasi yang diperlukan, seperti nama atau alamat email, yang kemudian dapat dikirimkan dan diproses oleh server. Elemen penting dalam form adalah input. Elemen input memungkinkan pengguna untuk memasukkan berbagai jenis data, mulai dari teks sederhana hingga file. Elemen input memiliki banyak macamnya, antara lain: 1.      Input Color Input warna dalam form HTML memungkinkan pengguna untuk memilih warna secara visual dari sebuah palet warna. Fitur ini sangat berguna dalam aplikasi yang membutuhkan personalisasi tampilan, seperti desain tema, pemilihan warna latar belakang, atau penyesuaian warna teks. Untuk membuat input warna, kita menggunakan elemen input dengan tipe color. Berikut sintaks dasarnya. Contoh: Ketika halaman ini dibuka, akan muncul sebuah kotak ...
Read more

Image Map - Zidni Ilma (2023102003)

Image
 IMAGE MAP DI HTML Image map dalam HTML berfungsi sebagai navigasi ketika suatu area dalam gambar diklik. Area-area ini terhubung ke halaman web yang berbeda, sehingga ketika pengguna mengklik area tertentu, mereka akan diarahkan ke halaman web yang telah ditetapkan sebelumnya. Contoh: Kode di atas membuat sebuah area berbentuk poligon pada gambar : "Porsche 911 GT3 RS.jpeg"  Ketika area ini diklik, pengguna akan diarahkan ke gambar: "Porsche 911 GT3 RS Moodboard.jpeg". Penjelasan: <img src="Porsche 911 GT3 RS.jpeg" usemap="#image-map">: src="Porsche 911 GT3 RS.jpeg": Menentukan gambar yang akan digunakan sebagai dasar peta. usemap="#image-map": Menghubungkan gambar dengan peta yang akan didefinisikan. <map name="image-map">: Mendefinisikan sebuah peta dengan nama "image-map". Pemilihan area menggunakan bentuk poligon melalui https://www.ima...
Read more