CSS (Cascading Style Sheets) merupakan sebagai pengatur html, atau tidak bisa lepas dari html karena memang keduanya sama – sama penting yang mana html sebagai struktur nya dan css sebagai pengatur html nya. Entah untuk mengatur posisi nya, warna nya, ukuran nya dan lain – lain, semuanya di perlukan untuk membuat tampilan template website yang di inginkan. Tentunya harus tahu semua fungsi – fungsi yang di miliki css contoh misalkan ingin merubah ukuran font, merubah font family ataupun merubah huruf kecil menjadi huruf besar semua. Dan pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Font-variant dan List-style-type Dengan CSS, dimana pada latihan kali ini kita akan merubah huruf kecil menjadi huruf besar semua dan kita akan belajar tentang macam – macam properti yang ada di dalam fungsi List-style-type. Berikut ini adalah screen shoot yang nanti kita akan buat
Menjadi besar semua
Kemudian macam – macam List-style-type
Baik, mari kita mulai belajar tentang Cara Menggunakan Font-variant dan List-style-type Dengan CSS. Seperti biasa teman – teman siapkan text editornya dan buat file dengan nama index.html lalu isikan script html nya di bawah ini
<!DOCTYPE html> <html> <head> </head> <body> <p>merubah huruf kecil menjadi huruf besar semua</p> </body> </html>
Kemudian kita akan merubahnya menjadi huruf besar semua, teman – teman ketikkan css nya di dalam tag head seperti gambar di bawah ini
Lalu save dan jalankan pada browser nya, maka huruf akan berubah menjadi besar semua. Langkah berikutnya kita implementasikan macam – macam type List-style-type, teman – teman tambahkan terlebih dahulu tag – tag html nya di bawah tag p
Nah kalian ketikkan html nya seperti gambar di atas ini, jika sudah baru kita akan tembahkan css nya. Teman – teman tambahkan juga script css nya di dalam tag style
Maka akan menghasilkan output seperti gambar di bawah ini
Bagaimana, sangat mudah bukan..??
Untuk melihat demo nya teman – teman bisa klik pada link ini
Oke, sekian dulu pada artikel berikut ini tentang Cara Menggunakan Font-variant dan List-style-type Dengan CSS kita berjumpa kembali di artikel yang akan datang. Semoga menginspirasi dan lebih mudah dalam mempelajari fungsi – fungsi yang ada di css.
Terima Kasih dan Sampai Jumpa.