Anda di halaman 1dari 66

"CSS"

Review Pelajaran Sebelumnya


• Jelaskan apa yang dimaksud inline, internal dan eksternal CSS!
• Jelaskan perbedaan atribut id dan class!
• Jekaskan fungsi type selector pada CSS!
• Jelaskan fungsi class selector pada CSS?
• Jelaskan fungsi id selector pada CSS?
• Apa perbedaan descendant anda child selector?
Inline dan Blok
Elemen Block dan Inline
• Jenis display dari sebuah elemen HTML adalah salah satu dari 2 jenis,
yaitu block atau inline.
• Elemen yang berjenis block secara default selalu ditampilkan di baris
baru dan mengambil space lebar sebuah dokumen HTML. Hal ini
berarti, jika ada elemen lain, maka akan ditampilkan di bawah elemen
block tadi (tidak mungkin berada di samping kanan).
• Elemen yang berjenis inline secara default selalu ditamplkan pada
baris yang sama dengan elemen sebelumnya.
Elemen Block dan Inline (2)
Elemen Block
• Salah satu elemen block yang bersifat general adalah div. Elemen div
tidak memiliki arti khusus, akan tetapi sering digunakan sebagai
elemen container.
• Elemen lain yang memiliki sifat block antara lain h1-h6, form, hr, li, ol,
ul, p, table, dll.
Elemen Inline
• Salah satu elemen inline yang bersifat general adalah span. Sama
seperti elemen div, elemen span tidak memiliki arti khusus, akan
tetapi sering digunakan untuk sebagai container dari elemen teks.
• Elemen lain yang memiliki sifat inline antara lain a, button, i, input,
select, textarea, strong, sub, sup, dll.
Mini Project 1:
Buatlah halaman
home.html menggunakan
div seperti berikut:
(lihat halaman berikut)
CSS Float
• Properti float digunakan untuk memposisikan elemen block di
sebelah kiri atau di sebelah kanan.
• Sebagaimana kita tahu, bahwa tidak ada elemen block yang
sejajar dalam baris yang sama. Untuk memaksa elemen block berada
dalam baris yang sama, anda bisa menggunakan properti float.
• Pada mini project 1, div yang berwarna biru seharusnya
menggunakan properti float.
Jawaban Mini Project 1
Overflow Hidden
Overflow : Hidden
• Properti overflow menentukan apa yang akan terjadi jika content
melebihi batas dari sebuah elemen.
• Nilai hidden berarti menghilangkan content yang berada di luar batas
dari elemen tersebut.
Overflow : Hidden
• Coba anda ketik code berikut
dan jalankan
Overflow : Hidden
• Jika dijalankan maka hasilnya adalah seperti ini
Overflow : Hidden
• Sekarang coba anda hilangkan properti background pada class left,
maka hasilnya ada seperti ini.

• Dari sini bisa kita lihat bahwa background dari right melewati batas
dari elemen tersebut sehingga melebar ke kiri.
• Untuk memperbaikinya, kita dapat menggunakan properti
overflow:hidden pada class right.
Overflow : Hidden
• Ini adalah hasil setelah ditambahkan property overflow:hidden pada
class right.

• Anda juga dapat menambahkan properti tersebut pada class left.


Mini Project 2:
Modifikasi halaman home.html menjadi
seperti berikut: jika menu sidebar di
hover warna background berubah
(lihat halaman berikut)
Margin dan Padding
CSS Margin
• Margin digunakan untuk membuat jarak di luar border dari sebuah
elemen HTML.
• Untuk mendefinisikan margin, anda bisa menggunakan properti:
- margin-top: batas atas
- margin-left: batas kiri
- margin-right: batas kanan
- margin-bottom: batas bawah
• Misal div {margin-left: 10px; margin-top: 20px}
• Margin hanya berlaku untuk elemen blok
Margin Shorthand
• Selain menggunakan properti di atas, anda bisa juga menggunakan
properti margin. Misal:
- margin: 25px 50px 75px 100px;
Artinya margin-top:25px, margin-right: 50px, margin-bottom: 75px
dan margin-left:100px.
- margin: 25px 75px 100px;
Artinya margin-top:25px, margin-right: 75px, margin-bottom:
75px dan margin-left:100px.
Margin Shorthand (2)
- margin: 25px 50px;
Artinya margin-top:25px, margin-right: 50px, margin-bottom: 25px
dan margin-left:50px.
- margin: 25px;
Artinya margin-top:25px, margin-right: 25px, margin-bottom:
25px dan margin-left:25px.
CSS Padding
• Padding digunakan untuk membuat jarak antara konten dan
border dari sebuah elemen HTML.
• Untuk mendefinisikan padding, anda bisa menggunakan properti:
- padding-top: batas atas
- padding-left: batas kiri
- padding-right: batas kanan
- padding-bottom: batas bawah
• Misal div {padding-left: 10px; padding-top: 20px}
Padding Shorthand
• Selain menggunakan properti di atas, anda bisa juga menggunakan
properti padding. Misal:
- padding: 25px 50px 75px 100px;
Artinya padding-top:25px, padding-right: 50px, padding-bottom:
75px dan padding-left:100px.
- padding: 25px 75px 100px;
Artinya padding-top:25px, padding-right: 75px, padding-bottom:
75px dan padding-left:100px.
Padding Shorthand (2)
- padding: 25px 50px;
Artinya padding-top:25px, padding-right: 50px, padding-bottom:
25px dan padding-left:50px.
- padding: 25px;
Artinya padding-top:25px, padding-right: 25px, padding-bottom:
25px dan padding-left:25px.
Margin vs Padding
Pada Mini Project 2, anda
bisa mengkombinasikan margin dan
padding untuk membentuk
tampilan sidebar.
CSS Hover
• Anda bisa menggunakan CSS selector hover untuk merubah style
elemen saat elemen tersebut sedang ditunjuk oleh mouse.
• Untuk menggunakan selector hover anda bisa memakai selector
:hover. Misal a:hover. Berarti style akan dirubah saat mouse
menunjuk pada elemen a.
Pada Mini Project 2, anda bisa css
hover untuk membuat menu
highlight saat menu item ditunjuk
mouse
Mini Project 3:
Modifikasi halaman project1, project2
dan project3, jika menu project di klik
maka akan muncul pada div content
(lihat halaman berikut)
Centering Horizontal
Center Horizontal
• Pada inline elemen, anda dapat dengan mudah mengatur aligment
menjadi center dengan menggunakan properti text-alignment:center.
• Akan tetapi untuk block elemen tidak berlaku hal tersebut.
• Untuk mengatur alignment center pada elemen block menggunakan
trik khusus.
Center Horizontal
• Coba ketik code berikut:
Center Horizontal
• Jika dijalankan hasilnya adalah sebagai berikut:
Center Horizontal
• Untuk membuat sebuah div menjadi center, anda bisa menambahkan
property margin: 0 auto;
Centering Vertical
Center Vertical
• Untuk membuat vertical aligment sebuah elemen, maka kita harus
melihat parent dari elemen tersebut. Apabila parent dari elemen
tersebut adalah elemen inline, kita cukup menambahkan properti
berikut: vertical-aligmen:middle;
• Perhatikan code berikut:
Center Vertical
• Jika dijalankan hasilnya adalah sebagai berikut:
Center Vertical
• Untuk membuat gambar center secara vertical, kita dapat
memberikan propoerti vertical-alignment:middle pada gambar
tersebut
Center Vertical
• Hasilnya adalah sebagai berikut:

• Cara di atas berlaku jika parent-nya adalah sebuah elemen inline.


Akan tetapi jika parent dari elemen tersebut adalah elemen blok
maka tidak berlaku demikian.
Center Vertical
• Silahkan ketik kode berikut:
Center Vertical
• Jika dijalankan hasilnya adalah sebagai berikut:
Center Vertical
• Untuk membuat text tersebut center secara vertical, terdapat
beberapa cara:
• 1. Mengatur margin/padding top sehingga text tersebut center
• 2. Mengatur line-height sehingga text tersebut center
Center Vertical
• Silahkan ketik kode berikut:
Center Vertical
• Hasilnya adalah sebagai berikut:
Border Radius
Border Radius
• Untuk membuat sudut melengkung, anda bisa menggunakan properti
border-radius.
• Silahkan ketik kode berikut:
Border Radius
• Jika kode di atas dijalankan maka hasilnya adalah sebagai berikut:
Border Radius
• Silahkan ketik kode berikut:
Border Radius
• Jika kode di atas dijalankan, maka hasilnya adalah
Border Radius
• Untuk membuat lengkungan hanya pada sudut-sudut tertentu, anda
bisa menggunakan properti:
• 1. border-radius-top-left: sudut kiri atas
• 2. border-radius-top-right: sudut kanan atas
• 3. border-radius-bottom-left: sudut kiri bawah
• 4. border-radius-bottom-right: sudut kanan bawah
Inline-block
Inline-Block
• Terkadang dibutuhkan membuat sebuah elemen inline memiliki sifat
seperti elemen blok.
• Misal anda ingin memberikan margin pada elemen inline.
Sebagaimana kita tahu, bahwa margin hanya akan berfungsi pada
elemen blok.
• Untuk itu anda bisa menggunakan properti display:inline-block
Inline-Block
• Silahkan ketik kode berikut
Inline-Block
• Jika dijalankan, maka hasilnya adalah sebagai berikut:
Mini Project 4:
Modifikasi footer menjadi terlihat
seperti ini
(lihat halaman berikut)
Font Awesome
• Font Awesome merupakan library vector icon yang popular
dikalangan web developer.
• Versi free dari Font Awesome terdiri dari hampir 1400 icon.
• Ada dua cara untuk menggunakan font awesome:
1. Mendownload dari website fontawesome.com
2. Menggunakan CDN sebagai berikut:
Font Awesome (2)
• Untuk menggunakan Font Awesome sangat mudah, anda hanya perlu
menambahkan class dengan format berikut:
<i class="fa fa-namaicon"></i>
• Perhatikan contoh berikut:

• Untuk icon lengkap, anda bisa melihat di website


https://fontawesome.com/icons?d=gallery
Font Awesome (3)
• Karena Font Awesome adalah vector, anda juga memberikan warna
dan ukuran sesuai keinginan anda melalui atribut style.
• Untuk mengubah ukuran, anda bisa menggunakan properti font-
size.

• Untuk mengubah warna, anda bisa menggunakan properti color.


Pada Mini Project 4, anda bisa
menggunakan Font Awesome untuk
menampilkan icon sosial media
Mini Project 5:
Buat halaman login.html seperti berikut
(lihat halaman berikut)
Tugas Week 4
• 1. Kerjakan Mini Project 4
• 2. Kerjakan Mini Project 5
• 3. Buat sebuah artikel dan posting di blog pribadi dengan tema "Elemen
Inline dan Blok"
• 4. Kumpulkan tambahan 10 email teman dan kerabat anda yang memiliki
fashion di dunia IT dan tambahkan ke dalam List di mailchimp
• 5. Kirimkan ke semua list email anda berisi ajakan untuk membaca artikel
anda

Kumpulkan di s.id/WBTugas4