apa itu CSS Classes
CSS Classes adalah adalah sebuah code yang memberikan lable ke sebuah kode HTML supaya tampilannya bisa diatur lewat CSS
Contoh:
Pada saat awal masuk web code.org akan ada tampilan contoh seperti ini:
Di gambar tersebut ada sebuah contoh Sample website.lanjut ke No.2 akan diperlihatkan sebuah code yang harus diberi lable atau classes
Di sini kalian disuruh Mendisain Sebuah foto air terjun yang paling atas. cara mendisain gambar ukuran air terjun, kalian bisa menggunakan CSS Classes.cara melihat contoh codenya ada di bantuan & petunjuk yang ada di atas di sebelah instruksi,Jika sudah lalu pilih opsi tulisan Classes lalu akan ada tampilan seperti ini
Di sini kalian bisa menggunakan contoh di HTML,cara penggunana Classes ini tidak hanya di paragraf doang di code <img> ,<h1>,<h2>DLL itu bisa asalkan tidak salah menamai Classesnya kecuali <head>.
lalu kalian pindah ke style.css,kalian disini disuruh mendisain sebuah foto air terjun yang paling atas menjadi beda dari yang lainnnya,jika kalian menemukan kodingan ini:
kalian bisa mengatur ketinggian dan kelebaran gambarnya ataupun menambah kodingannya, Jika mengikuti kodingan yang ada di atas gambarnya akan menjadi seperti ini:
lanjut ke No.3,jika sudah lanjut ke No.3 akan ada tampilan seperti ini
disini kita disuruh menghias keempat gambar hantu dari game Pac man dan menghiasi warna paragraf dan juga font atau bentuk huruf tetapi menghiasinya dengan berbeda dari hantu Pac man yang lainnya dengan cara memberi kode Class ke dalam kodingan HTML,jika kalian ingin mengetahui cara memasang kode Class nya ada di instruski jika kalian scroll ke bawah akan ada Tulisan Seperti ini
kalian bisa melihat cara pemasang Kode Classes ke HTML dan CSS,lalu kalian bisa menghiasi nya sendiri
Contoh
Contoh untuk Ghost yang namannya Clyde
- 1.Untuk HTML
- 2.Untuk CSS
Tampilannya akan seperti ini:
Lanjut ke No.4 tampilan nya akan seperti ini
tugas disini hampir sama kaya No.3 tapi ini harus diubah semuanya yang ada di CSS
- Color
- Font
- Border style
- Border color
- Background color
semuannya harus diubah terserah mau seperti apa
Contoh
jika ingin mengikuti kode CSS ini
tampilannya akan seperti ini
Terima kasih 😀