Assalamu'alaikum wr.wb.
Kesempatan kali ini saya akan sharing tentang CSS background, CSS border, CSS padding, CSS margin, CSS Height & Lenght, CSS . Langsung saja masuk ke materinya.
A. Latar Belakang
Penggunaan background bertujuan untuk menentukan efek latar belakang untuk elemen.
Penggunaan border bertujuan untuk menentukan gaya, lebar, dan warna perbatasan suatu elemen.
Penggunaan padding bertujuan untuk menghasilkan ruang di sekitar konten. padding membersihkan area di sekitar konten (dalam perbatasan) dari elemen. Ada properti CSS untuk pengaturan padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Penggunaan margin bertujuan untuk menghasilkan ruang di sekitar elemen. margin sifat mengatur ukuran ruang putih di luar perbatasan. Ada properti CSS untuk pengaturan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Height dan width properti yang digunakan untuk mengatur tinggi dan lebar pada suatu elemen.
Box Model digunakan untuk desain dan tata letak. Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML.
OutLine digunakan untuk menentukan gaya, warna, dan lebar garis. Garis adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "menonjol".
Text-align properti digunakan untuk mengatur alignment horizontal teks. Sebuah teks dapat kiri atau kanan sejajar, berpusat, atau dibenarkan.
Font CSS mendefinisikan font keluarga, keberanian, ukuran, dan gaya teks.
Icon digunakan untuk menambahkan ikon ke halaman HTML Untuk menambahkan nama ikon kelas yang ditentukan untuk setiap elemen inline HTML (seperti <i> atau <span>).
B. Alat dan Bahan
- OS linux mint
- Sublime Text
- Laptop
C. Tujuan
Untuk mempercantik tampilan web yang kita akan buat.
D. Tahap Pelaksanaan
- Pembuatan tampilan yang menggunakan css di dalamnya.
- Keterangan :
- Penulisan dari css selalu dibawah head. Penulisan dari css harus menggunakan sintaks dasar <style></style>
- Membuat background pada tampilan web menggunakan css terletak pada line ke 5 pada body. Untuk memasukkan gambar saat ini kita menggunakan url. Bisa juga menggunakan sintaks <img src>.
- Membuat posisi/letak dari gambar yang kita masukkan untuk background terletak pada line ke 8.
- Membuat outline terdapat pada line ke 14 untuk membuat tampilan garis berwarna.
- Menambahkan panjang, lebar dan warna menggunakan div terdapat di line ke 27 serta penerapan class dan pemanggilan classnya terletak di line ke 51.
- Menambahkan margin pada div terdapat di line ke 21 sampai 24. Dengan bagian yang berbeda-beda.
- Menambahkan font pada css terdapat pada line ke 37 sampai 39. Font terbagi 3 yaitu family, style dan size.
- Membuat box model terdapat pada line ke 32 sampai 40. Jika class div dipanggil akan membentuk seperti bingkai. Pemanggilannya terdapat di line ke 54.
 |
| Hasil dari coding diatas menghasilkan seperti gambar diatas. |
- Pembuatan icon biasa dan icon dengan boostrap
- Buka SublimeText lalu masukkan coding dibawah ini untuk membuat icon biasa dan icon dengan boostraps.
- Keterangan :
- Membuat icon biasa terdapat diline ke 11 sampai line 14
- Membuat icon biasa dengan tambahan size terdapat di line ke 17 dan line 18 juga menggunakan color.
- Membuat icon dengan bootsrap terdapat diline ke 22 sampai line 24
- Membuat icon dengan bootsrap dengan tambahan size terdapat di line ke 20 dan line 21.
 |
| Hasil dari coding diatas. |
E. Kesimpulan
Dari sharing diatas dapat disimpulkan bahwa pembuatan css mudah akan tetapi membutuhkan ketelitian dan kreativitas untuk mengembangkan desain dari tampilan web yang lebih interaktif dengan user.
F. Referensi
- http://www.w3schools.com
Sekian dan Terimakasih.
SMK Bisa!!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar