💻 Project IT code.org Leson 11 :Css Classes

by 25muhamadrayhan@gmail.com · 20 January 2026

apa itu CSS Classes

Di gambar itu ada contoh dari Sample Website nya , kita langsung lanjut aja ke level 2 di level dua diperlihatkan code yg harus di Beru leble atau Classes

=> contoh

gambar awal saat kalian baru masuk ke code.org :

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

SEKIAN PENJELASAN NYA TERIMAKASIH 😁

You may also like