Tutorial CSS List, Display, Position, Overflow, dan Float

CSS List, Display, Position, Overflow, dan Float

Assalamu'alaikum W. W.
A. Pendahuluan

Halo, pada kesempatan kali ini saya akan menjelaskan tentang CSS, dalam pengaturan list, display, posisi - posisi, Overflow, dan Float.
1.Pengertian
  Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen / artibut dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah sebuah bahasa pemograman.
  CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2.Latar Belakang

Ingin mengetahui bagaimana cara membuat tampilan dalam sebuah website dengan baik.
3.Maksud dan Tujuan
Paham dan dapat mengggunakan CSS, dan dapat membuat tampilan dalam sebuah website.
B. Alat dan Bahan

-PC
-Text Editor
-Web Browser
C. Jangka Waktu Pelaksanaan
-
D. Penjelasan
List
Dalam HTML terdapat dua list utama

• List tidak berurutan <ul>, biasanyan ditandai dengan titik.
• List berurutan <ol> biasanya ditandai dengan huruf / angka.

Di dalam CSS, kalian dapat ,mengatur list untuk :

1. Different List Item , di sini kita mengatur list menjadi berbeda bentuk, dengan menggunakan list-style-type, kita dapat mengatur menjadi circe/bulat , square/kotak, upper-roman/huruf Romawi besar, dan masih banyak lagi.
2. Image List Item, di sini kita dapat mengganti list menjadi sebuah gambar, semisal kita mengganti titik menjadi gambar panah yang sudah kita punya.Untuk mengganti list menjadi gambar kita menggunakan list-item-image.
3. Position List Item, di sini kita dapat mengatur posisi list, semisal kita akan mengatur menjadi lebih menjorok ke dalam. Untuk merubah posisi kita menggunakan list--style-position.
4. Remove Default Setting, di sini kita dapat menghapus list yang ada yaitu dengan menggunakan list-style-type namun valuenya diganti menjadi none.
5. List Shorthand property , di sini kita dapat mengatur script list menjadi lebih singkat. Untuk meningkar scip kia hanya perlu menuliskan " list-style : " setelah itu kita tinggal menuliskan nilai dari list-style-type, list-style-position, list-style--image.

Contoh penggunaan list di CSS :

Display
 Elemen block-level
Elemen block selalu dimulai pada baris baru dan menghabiskan width yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Elemen Inline
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan width sebanyak yang diperlukan.

• <span>
• <a>
• <img>

Display : none
Display : none Biasanya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakannya kembali.
Override The Default Display Value
Seperti disebutkan, setiap elemen memiliki nilai tampilan default. Namun, Anda bisa mengunah itu.
Mengubah elemen inline menjadi elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara yang spesifik, dan tetap mengikuti standar web.
Contoh penggunaan :

Position
Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen. (static, relative, fixed, absolute or sticky).
Ada lima nilai posisi yang berbeda :

• static / statis
• relative / relatif
• fixed / tetap
• absolute / mutlak
• sticky / menempel

1. Position Static
Elemen HTML yang telah di atur secara static akan diposisikan secara default, dan tidak akan terpengaruh oleh properti atas, bawah, kanan, dan kiri. Elemen HTML yang di atur secara static tidak di atur secara khusus namun akan mengikuti arus normal halaman.
2. Position Relative
Unsur dengan position: relative; akan diposisikan relatif terhadap posisi normalnya.
Menetapkan properti atas, kanan, bawah, dan kiri dari elemen yang diposisikan relatif tinggi akan menyebabkannya disesuaikan dari posisi normalnya. Konten lainnya tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.
3. Position Fixed
Unsur dengan position: fixed; akan diposisikan relative terhadap area pandang, yang berarti akan selalu berada di tempat meski halamn discroll ke bawah maupun atas. Properti atas, bawah, kanan, dan kiri digunakan untuk menentukan posisi elemen.
4. Position Absolute
Unsur dengan position: absolute; diposisikan relatif terhadap div yang menjadi luarnya dan terdekat (bukan posisi relatif terhadap area pandang, seperti fixed).
Namun; Jika elemen yang diposisikan absolute tidak memiliki div yang diluarnya yang diposisikan, ia menggunakan badan dokumen, dan bergerak bersamaan dengan ketika halaman di scroll.
5. Position Stcky
Unsur dengan position: sticky; diposisikan berdasarkan posisi gulir pengguna.
Elemen stycky akan beralih antara relatif dan tetap, tergantung pada posisi scroll. Ini diposisikan relatif sampai posisi offset tertentu terpenuhi di area pandang - lalu "menempel" pada tempatnya (seperti posisi: tetap).
Contoh penggunaan :

Overflow
Properti CSS overflow mengontrol apa yang terjadi pada konten yang melebihi ukuran areanya, untuk disesuaikan dengan ukuran areanya.
CSS Overflow
Properti overflow menentukan apakah akan menyalin konten atau menambahkan scrollbar saat konten elemen terlalu besar agar sesuai dengan area yang ditentukan.
Properti overflow memiliki value berikut:

•      visible - (Default) Isi konten tidak terpotong. namun akan ke luar kotak elemen
•      hidden - Isi konten dipotong, dan sisa konten akantidak terlihat.
•      scroll - Isi konten akan terpotong, tapi akan muncul scrollbar untuk melihat konten lainnya
•      auto - Jika overflow terpotong, scrollbar akan otomatis ditambahkan untuk melihat konten lainnya.

 Di sini juga ada overflow-x dan overflow-y untuk mengatur dimana scroll berada vertical / horizontal.
Contoh penggunaan :

Float
Properti float CSS menentukan bagaimana elemen harus ditempatkan. Properti CSS yang jelas menentukan elemen apa yang bisa melayang di samping elemen dan di sisi mana.
Properti float :
Properti float digunakan untuk penentuan posisi dan tata letak pada halaman web.
Properti float dapat memiliki salah satu dari value berikut:

•      left - Elemen float di sebelah kiri.
•      right - Elemen float di sebelah kanan.
•      none - Unsur tidak melayang (akan ditampilkan tepat di tempat yang terjadi pada teks). Ini adalah default
•      inherit - Unsur mewarisi nilai float dari induknya

Clear Properti:
Clear Properti menentukan elemen apa yang bisa melayang di samping elemen kosong dan di sisi mana.
Clear properti dapat memiliki salah satu dari value berikut:

•      none - Memungkinkan konten mengambang di kedua sisi. Ini adalah default
•      left - Tidak ada konten mengambang yang diperbolehkan di sisi kiri
•      right - Tidak ada konten mengambang yang diperbolehkan di sisi kanan
•      both - Tidak ada konten mengambang yang diperbolehkan di kiri atau kanan
•      inherit - Unsur mewarisi nilai jelas dari induknya

Cara yang paling umum untuk menggunakan Clear properti adalah setelah Anda menggunakan float pada sebuah konten.

Contoh penggunaan :

E. Kesimpulan 
>Penggunaan list yang baik dapat membuat  website menjadi lebih mudah digunakan dan efektif.
>Pengaturan Display yang baik dapat membuat halaman website lebih menarik.
>Pengaturan posisi yang baik dan tepat dapat membuat halaman website lebih mudah diporasikan.
>Pengaturan overflow yang baik dan tepat dapat membuat halaman website lebih mudah digunaka
>Pengaturan float yang tepat dapat membuat halaman website lebih mudah dioprasikan.
>Dalam membuat website kita akan membutuhkan align untuk mengatur posisi suatu elemen atau teks.
F. Referensi
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3schools.com/css/css_list.asp
https://www.w3schools.com/css/css_display_visibility.asp
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/css_overflow.asp
https://www.w3schools.com/css/css_float.asp

Wassalamu'alaikum W. W.

Share this post