PENGERTIAN FUNGSI DAN CONTOH CSS

PENGERTIAN FUNGSI DAN CONTOH CSS

A.PENGERTIAN CSS

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak elemen-elemen yang terdapat dalam dokumen HTML. Dengan CSS, kita bisa mengendalikan gaya visual halaman web seperti warna, font, jarak antar elemen, dan banyak lagi, tanpa mengubah konten HTML itu sendiri. Berikut adalah penjelasan CSS secara detail:

  • CSS adalah singkatan dari Cascading Style Sheets:
    • Cascading: Mengacu pada cara prioritas atau hierarki yang diterapkan pada gaya, di mana beberapa aturan gaya bisa digabungkan dan berbenturan. Urutan penerapan gaya diprioritaskan berdasarkan urutan spesifik yang disebut "cascade" atau kaskade.
    • Style Sheets: Lembar gaya yang menentukan tampilan visual elemen-elemen HTML dalam halaman web.
  • CSS diciptakan untuk memisahkan konten (HTML) dari presentasi atau tampilan (CSS). Dengan CSS, kita bisa mengelola tampilan di satu tempat dan menerapkannya pada beberapa halaman HTML.

B.FUNGSI CSS

CSS (Cascading Style Sheets) memiliki banyak fungsi yang memungkinkan pengembang untuk mengendalikan berbagai aspek visual dari halaman web. Berikut adalah penjelasan fungsi CSS secara detail:

1. Membedakan Konten dan Tampilan

  • CSS berfungsi untuk memisahkan struktur konten (HTML) dari tampilan visual (CSS), sehingga mempermudah pengelolaan dan pemeliharaan.
  • Dengan cara ini, HTML fokus pada penyusunan elemen dan konten, sedangkan CSS mengendalikan bagaimana elemen-elemen tersebut akan terlihat.

2. Mengatur Warna dan Teks

  • CSS memungkinkan pengaturan warna latar belakang, warna teks, ukuran font, jenis font, dan efek lain pada teks.
  • Beberapa properti yang sering digunakan untuk fungsi ini antara lain:
    • color: Mengatur warna teks.
    • background-color: Mengatur warna latar belakang elemen.
    • font-size: Mengatur ukuran font.
    • font-family: Mengatur jenis font.
    • text-align: Mengatur perataan teks (kiri, tengah, kanan).








3. Mengubah Ukuran Font dan Teks

CSS memungkinkan Anda mengubah ukuran, jenis, dan gaya font menggunakan properti seperti font-size, font-family, font-weight, dan text-align. Ini memberi fleksibilitas dalam mengatur tampilan teks agar lebih menarik dan mudah dibaca.

Contoh:

4. Membuat Efek dan Animasi

CSS mendukung animasi sederhana yang membuat halaman web lebih interaktif dan dinamis. Dengan properti transition, transform, dan animation, Anda dapat menambahkan efek transisi, memutar elemen, atau membuat animasi sederhana.

Contoh:

5. Mempertahankan Konsistensi Tampilan

Dengan CSS, Anda bisa menggunakan kelas atau ID yang sama pada banyak elemen, sehingga mempermudah penerapan gaya yang seragam. Ini mengurangi redundansi kode dan memastikan tampilan tetap konsisten di seluruh halaman.

Contoh:


6. Mendukung Responsivitas

CSS mendukung desain responsif melalui penggunaan media queries (@media). Anda bisa mengatur tampilan berbeda untuk perangkat dengan ukuran layar yang berbeda-beda, seperti mobile, tablet, dan desktop.

Contoh:

7. Mengatur Z-Index dan Layering

Dengan properti z-index, CSS memungkinkan Anda mengatur urutan tumpukan elemen. Ini berguna saat Anda memiliki elemen yang tumpang tindih, seperti pop-up atau modal.

Contoh:

8. Meminimalkan Penggunaan Gambar untuk Tampilan Visual

CSS dapat digunakan untuk membuat berbagai bentuk, seperti lingkaran, persegi panjang, dan lainnya, sehingga tidak perlu menggunakan gambar. Ini meningkatkan performa karena mengurangi jumlah aset yang harus diunduh.

Contoh:

9. Menggunakan Variabel CSS

CSS memungkinkan Anda untuk mendefinisikan variabel menggunakan :root, yang membuat pengelolaan warna atau gaya yang sering digunakan menjadi lebih mudah.

Contoh:



C.CONTOH CSS

Berikut adalah contoh sederhana CSS untuk menata tampilan halaman web. Contoh ini mencakup beberapa elemen dasar seperti body, header, navigasi, konten utama, dan footer.

1. HTML Struktur

Struktur HTML yang akan kita gaya dengan CSS.





2. CSS (style.css)

Berikut adalah contoh kode CSS untuk memberikan gaya pada halaman di atas.
















Penjelasan Kode CSS

  • Gaya Dasar (*): Menghapus margin dan padding default dari semua elemen, dan mengatur box-sizing agar padding dan border tidak memengaruhi lebar elemen.

  • Body: Mengatur font, warna teks, dan warna latar belakang seluruh halaman.

  • Header: Mengatur latar belakang header, warna teks, dan padding.

  • Navigasi: Membuat daftar menu menjadi horizontal dengan menggunakan display: inline dan mengatur jarak antar tautan. Tautan juga diberi warna dan efek hover.

  • Konten Utama: Mengatur padding, margin, warna latar belakang, dan bayangan pada kotak konten utama agar lebih menarik.

  • Footer: Mengatur latar belakang footer, warna teks, dan posisi agar berada di bagian bawah halaman.






Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat VLAN Trunk di Mikrotik

Gambar
                                           Cara Membuat VLAN Trunk di Mikrotik Kita mulai dari setting VLAN Mikrotik Gedung 1 : Login ke Mikrotik gedung 1 melalui Winbox. Jika belum punya, silakan  Download Winbox Mikrotik  dulu. Membuat interface VLAN di Mikrotik dengan masuk ke menu  Interfaces  –> Klik icon  +  pilih  VLAN  –> masukkan data berikut : Name  : nama VLAN misal  VLAN 10 HRD VLAN ID  : 10 Interface  : ether1 OK Cara Membuat VLAN di Mikrotik Ulangi langkah tersebut untuk membuat interface VLAN lain nya, sehingga semua VLAN yang dibutuhkan sudah muncul seperti gambar berikut : Cara Membuat VLAN Trunk di Mikrotik Oke, sampai disini kita sudah bisa membuat interface VLAN di Mikrotik dan menjadikan interface ether1 sebagai Trunk yang akan melewatkan 3 VLAN ke Mikrotik di Gedung Sebelah. Cara Konfigurasi ...
Baca selengkapnya

CARA MENGHUBUNGKAN 2 PC DENGAN 1 MIKROTIK

Gambar
 CARA MENGHUBUNGKAN 2 PC MENGGUNAKAN 1 MIKROTIK Untuk menghubungkan dua (2) PC menggunakan satu (1) perangkat Mikrotik, kita membutuhkan beberapa alat dan perangkat jaringan. Berikut adalah perangkat utama yang digunakan untuk membangun koneksi antara dua (2) PC dengan menggunakan satu (1) Mikrotik: 1.komputer/laptop 2. Mikrotik router 3.Kabel Ethernet ( UTP Cable) Langkah-langkah untuk menghubungkan 2 PC melalui Mikrotik: 1. Langkah pertama lakukan penginstalan Winbox pada PC / Komputer terlebih dahulu. 2.Setelah proses penginstalan selesai (sebelum masuk ke Winbox) tancapkan kabel ethernet tersebut ke Mikrotik dengan benar. Jadi disini kita membutuhkan 2 kabel Ethernet yaitu untuk (Ether 2 ke PC 1) lalu (Ether 3 ke PC 2). 3.Langkah selanjutnya kita buka Winbox 4. Setelah masuk ke tampilan pada Winbox  buka menu IP > Addresses . y>OK . 5. Lalu klik (+) > Masukkan IP contoh: 192.168.10.1/24 atau terserah kalian jika ingin menggunakan IP lain. Jika sudah klik interfac...
Baca selengkapnya

CARA MENGHUBUNGKAN 2 PC DENGAN 1 MIKROTIK DENGAN IP DYNAMIC

Gambar
CARA MENGHUBUNGKAN 2 PC DENGAN 1 MIKROTIK MENGGUNAKAN IP DYNAMIC Cara setting mikrotik dengan menggunakan 2 buah PC. Berikut adalah alat bahan yang dibutuhkan dan langkah langkah selama melakukan setting mikrotik. Alat dan Bahan: 1. Komputer / Laptop 2 . Mikrotik 3. Kabel LAN Langkah Langkah: 1. Langkah awal adalah  download Winbox, dan menghubungkan Winbox tersebut dengan mikrotik dengan susunan ether 2 ke PC yang sudah di instal Winbox dan ether 3 ke pc 2 dan login ke Winbox tersebut. 2 . Masuk ke IP>Address 3. klik (+) masukkan IP sesuai perintah yang sudah ditunjukkan untuk ether 2 dan kilk Apply>OK 4. Selanjutnya klik (+) dan masukkan IP lagi untuk ether 3 dan klik Apply>OK 5.  Selanjutnya kita pergi ke Control Panel>Network and Internet   6. Kemudian klik Network and Internet Sharing Center 7. Pada pojok kiri, klik bagian Change Adapter Setting>Ethernet 8. Setelah itu muncul tampilan seperti ini, klik Properties 9. Lalu klik Internet Protocol Ve...
Baca selengkapnya