◜⁠✧。⁠゚☆APA ITU CCS ?☆゚。⁠⁠✧◜



◜⁠✧。⁠゚☆APA ITU CCS ?☆゚。⁠⁠✧◜




CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain dan mengatur tampilan halaman web. Dengan CSS, kamu dapat mengontrol berbagai aspek visual dari elemen-elemen HTML, seperti tata letak (layout), warna, ukuran, font, jarak antar elemen, dan banyak lagi.

CSS bekerja dengan cara "memisahkan" konten (HTML) dan presentasi (penampilan) halaman web. Ini memungkinkan kamu untuk membuat desain yang konsisten dan mudah diubah di seluruh situs hanya dengan mengedit satu file CSS, tanpa perlu mengubah setiap halaman HTML secara terpisah.

Contoh penggunaan CSS:


Pada contoh di atas, CSS digunakan untuk menentukan warna teks h1 menjadi biru dan ukuran fontnya 36 piksel, serta memberikan jarak bawah 20 piksel dan tinggi baris 1.5 untuk elemen p.

CSS bisa di-apply dengan cara:

  1. Inline CSS – Menulis kode CSS langsung di dalam atribut HTML.
  2. Internal CSS – Menulis kode CSS di dalam tag <style> di bagian <head> HTML.
  3. External CSS – Menyimpan kode CSS di file terpisah (misalnya, style.css) dan menautkannya ke HTML menggunakan tag <link>.
CSS memainkan peran penting dalam pengembangan web modern karena memungkinkan pemisahan struktur dan desain, yang membuat pengelolaan dan pemeliharaan website menjadi lebih mudah.

Lanjut man-teman fungsi dari CSS :

1. Mengatur Layout Halaman Web
CSS memungkinkan kamu untuk menentukan bagaimana elemen-elemen di halaman web ditempatkan dan diatur. Misalnya, kamu bisa menentukan posisi elemen, ukuran kolom, jarak antar elemen, atau bahkan menyusun elemen dalam grid atau flexbox.
Contoh:
  • Menggunakan properti display, position, flex, grid, dll.
2. Menentukan Warna dan Gaya Teks
Dengan CSS, kamu dapat mengubah warna teks, latar belakang, jenis font, ukuran font, tinggi baris, dan elemen teks lainnya. Ini memungkinkan kamu untuk membuat halaman web yang lebih estetis dan mudah dibaca.
Contoh:
  • Menggunakan properti color, font-family, font-size, line-height, text-align, dll.
3. Mengatur Margin, Padding, dan Jarak antar Elemen
CSS memungkinkan kamu untuk menyesuaikan jarak antar elemen menggunakan properti seperti margin (jarak luar) dan padding (jarak dalam). Ini membantu menciptakan tata letak yang rapi dan terstruktur.
Contoh:
  • Menggunakan properti margin, padding, border-spacing, dll.
4. Mendesain Tampilan Responsif (Responsiveness)
CSS memungkinkan desain web agar dapat menyesuaikan diri dengan berbagai ukuran layar, baik itu desktop, tablet, maupun ponsel. Dengan menggunakan media query, pengembang dapat mengubah tampilan halaman web sesuai dengan perangkat yang digunakan.
Contoh:
  • Menggunakan media query untuk mengubah ukuran kolom atau menyembunyikan elemen pada perangkat tertentu.
5. Menambahkan Efek Visual dan Animasi
CSS juga memungkinkan kamu menambahkan efek-efek visual seperti transisi, animasi, atau perubahan gaya ketika pengguna berinteraksi dengan elemen tertentu, seperti hover pada tombol atau gambar.
Contoh:
  • Menggunakan properti transition, animation, transform, dll.
6. Menyusun Desain Halaman Web Secara Konsisten
Dengan CSS, kamu dapat mendefinisikan gaya yang konsisten di seluruh halaman atau situs web. Misalnya, kamu bisa mendefinisikan warna latar belakang, ukuran font, dan gaya link di satu tempat (file CSS), dan perubahan itu akan diterapkan ke seluruh halaman yang menggunakan file tersebut.

7. Memisahkan Konten dari Tampilan
CSS membantu memisahkan struktur konten (HTML) dan desain tampilan (CSS). Hal ini membuat pemeliharaan situs lebih mudah, karena perubahan desain tidak mempengaruhi konten, dan perubahan konten tidak mempengaruhi desain.

8. Meningkatkan Keterbacaan dan Aksesibilitas
Dengan mengatur ukuran font, warna, kontras, dan ruang putih, CSS membantu meningkatkan keterbacaan dan aksesibilitas halaman web. Ini penting agar situs web mudah digunakan oleh semua pengguna, termasuk mereka yang memiliki gangguan penglihatan.

9. Menyediakan Kontrol Terhadap Media dan Layout yang Berbeda
CSS juga mendukung penggunaan berbagai media (seperti gambar, audio, atau video) dan layout yang berbeda, serta memungkinkan pengaturan dan kontrol tampilan media tersebut dalam halaman web.

Contoh Sederhana CSS:



 Semangat buat kalian yang lagi diterkam tugas!


Komentar