Belajar CSS Part 7 List di Dalam CSS

Belajar CSS Part 7 List di Dalam CSS

Assalamualaikum Wr. Wb.

PENGERTIAN

List (Daftar) di dalam HTML sudah dijelaskan ada dua jenis utama dari daftar:

Daftar unordered (<ul>) - daftar item ditandai dengan bullet
Daftar memerintahkan (<ol>) - daftar item ditandai dengan angka atau huruf

Sifat daftar CSS memungkinkan Anda untuk:

Mengatur foto sebagai item daftar penanda
Menambahkan warna latar belakang untuk daftar dan daftar item
Mengatur tanda item untuk daftar

LATAR BELAKANG

Ingin mempelajari bagaimana mengatur style list di dalam CSS.

MAKSUD & TUJUAN

Memudahkan kita dalam memberikan style dalam daftar.

Dapat mengatur item tanda pada daftar.

ALAT & BAHAN

Text Editor
Browser

LANGKAH KERJA

Pada CSS List, list atau daftar ini memiliki beberapa konten, yang pertama yaitu

Perbedaan simbol daftar item

Simbol di dalam CSS list memiliki berbagai macam variasi ada kotak, lingkaran, angka, huruf, dll. Untuk lebih jelasnya lihat contoh berikut.

Nb: untuk mengganti style item pada daftar menggunakan syntax "list-style-type: tipe item"

Gambar di atas merupakan contoh dari item daftar yang berbeda di CSS list. Kemudian konten yang kedua

Item daftar dalam bentuk gambar

Pada CSS list kita bisa mengganti item daftar dengan menggunakan gambar yang kita suka. Contohnya sebagai berikut.

Nb : Untuk mengganti item pada CSS list bisa menggunakan syntax "list-style-image: url('alamat gambar')"

Gambar di atas merupakan contoh dari item daftar dengan menggunakan gambar. Jika gambarnya kebesaran bisa diatur sesuai kebutuhan anda. Konten selanjutnya yaitu

Posisi dari item daftar

Nb: Untuk mengubah posisi dari daftar tersebut bisa menggunakan syntax "list-style-position" attributenya bisa inside atau outside. Tapi secara default posisi daftar list itu secara outside.

Nah di atas merupakan hasilnya. Bisa dilihat sendiri perbedaannya. Kemudian konten selanjutnya yaitu

Memberikan warna pada daftar atau list.

Pada CSS list ini kita dapat mengubah background pada sebuah daftar agar datar tersebut terlihat lebih indah dan menarik. Untuk lebih jelasnya kita lihat contohnya.