CSS LAYOUTING
CSS yang berguna untuk mengatur tata letak elemen-elemen HTML.
1. Display
Tag pada HTML digunakan untuk memberikan maksud/arti pada
sebuah konten (p untuk paragraf, h1 untuk heading utama dll)
Tag <div> dan <span> tidak memiliki arti apapun, keduanyan
digunakan untuk mengelompokkan tag-tag HTML dan
memberikan informasi terhadap tag-tag tersebut
Setiap tag pada HTML memiliki nilai default untuk property
display. Tetapi kita juga dapat mengubah perilaku dari tag
tersebut dengan mengganti valuenya (tidak disarankan) lakukan
dengan CSS display layouting display.
Value dari Display ada 4
o Inline
Elemen HTML yang secara default tidak
menambahkan baris baru ketika dibuat
Lebar dan tinggi elemnya sebesar konten yang ada
di dalamnya
Kita tidak dapat mengatur tinggi lebar dari elemen
inline
Margin dan padding hanya mempengaruhi elemen
secara horizontal, tidak vertikal
Elemen inline : b, strong, I, em. A. span, sub, sup,
button, input, label, select, textarea.
o Inline-block
Tidak ada elemen yang secara default memiliki
properti display, kecuali inline-block yang dapat
dirubah oleh user
Kita harus ubah secara manua properti tersebut
Perilaku dasarnya sama dengan elemen inline
Perbedaanya: elemen inline-block dapat kita atur
tinggi dan lebarnya
Pada tag HTML yang ingin diberi inline-block, pada
selector CSSnya dituliskan atribut: display: elemen-
block;
o Block
Elemen HTML yang secara default menambahkan
baris baru ketika dibuat
Jika tidak diatur lebarnya, makan lebar default dari
elemen block akan memenuhi lebar dari
browser/parentnya
Kita dapat mengatur tinggi dan lebar dari elemen
block
Di dalam elemen block kita dapat menyimpan tag
dengan elemen inline, inline-block, atau bahkan
elemen block lagi
Contoh elmen block: h1-h6, p, ol, ul, li, form, hr, div
o None
Digunakan untuk menghilangkan sebuah elemen,
selektor{display: none;} akan mewnghilangkan
selektor yang kita pilih.
2. Dimensi
Dimiensi hanya terdiri dari width dan height dengan satuan px,
% atau in/cm/mm/pt,pc
3. Overflow
Visible : value default
Auto : secara automatis menambahkan scroll jika konten sudah
tidak cukup lagi. Selektor{overflow:auto;} . scrolll akan hilang
jika kinten sedikit.
Hidden : konten hilang/tidak bisa diakses jika melebihi dimensi
yang telah ditentukan
Scroll : mirip auto tetap scrall tetap ada walaupun konten sedikit.
4. Box model
Konsep dasar
Setiap elemen di halaman berada di dalam sebuah box
Kita bisa mengatur ukuran dan posisi kotak tersebut
Kita bisa memberi warna/gambar sebagai background kotak
tersebut
CSS box model mendefinisikan box yang dihasilkan oleh sebuah
elemen, lalu menampilkannya sesuai dengan format visualnya
CSS box model terdiri dari margin, border, padding dan content
CSS box Model
Margin : area transparan disekitar kotak (diluar boredr)
BordEr : batas keliling content dan padding
Padding: area trasparan didalam kotak (antara content dan
border)
Content : konten/isi sebenarnya didalam box, bisa berupa text
atau gambar
Margin
Overlapping Margin : menggabungkan 2 buah margin, jiak
vertikal jarak yang dipilih adalah margin yang paling besar,
namun pada Horizontal margin yang dipilih adalah penjumlahan
keduanya yang bersinggungan.
Negatif Margin : akan bergerak berlawanan dan membawa
elemen lain didekatnya ikut bergerak
Auto : membuat element berada auto atau ditengah-tengah dari
parentnya (margin left dan right harus keduanya diisi auto.
Shorthand: cara menyingkat penulisan margin,
o Margin: 50px; ( 50px untukk keepat sisi
o Margin: 50px; auto (50px atas bawah dan auto kanan kiri)
o Margin: 30px 50px 40px; (atas 30px, kiri-kanan 50px,
bawah 40px)
o Margin: 10px 20px 30px 40 px (dimulai dari atas dibaca
searah jarum jam: atas 10, kanan 20, bawah 30 dan kiri
40)
Border :
terdapat 3 nilai didalamnya , width, style (solid, dothed, dashed,
double)dan color
Contoh: border: 5px solid black;
nilai border dapat ditulis sekali untuk 4 sisinya, atau bisa lebih
spesifik dengan menulis kanan, kiri, atas atau bawahnya untuk
memberikan border yang berbeda
width dari border juga sama dengan padding menambah
unurkan dari boxnya
Padding
Penulisan sama dengan margin, namun tidak memiliki nilai
negatif dan auto
Ukuran padding mempengaruhi ukuran box
Box sizing
Ukuran dari box ditentukan dari width/height+ padding +
border jika berbeda2 setiap elemen maka ukurun box akan
berbeda. Untuk membuat semua ukuran box menjadi sama
dengan yang diinstrukikan oleh parentnya maka perlu
ditambahkan koding box-sizing: border-box; pada parentnya
5. Float
Merupakan property pada CSS untuk mengatur psoisi sebuah elemen.
Sebuah elemen dapat dipaksa untuk berada di sebelah kiri atau kanan
dari parent/pembungkusnya dengan menggunakan properti ini.
Kapan menggunakan float:
Text wrapping : membuat teks mengelilingi gambar/elemen lain
Image gallery: membuat serangkaian gambar menjadi galeri
Multi-collumn layout : membuat halaman memiliki beberapa
kolom
dll
Perilaku elemen ada 2:
Normal flow
Out of flow
Value Float ada 3:
None
Right
Left
Saat membuat semua elemen menjadi float maka parentnya kan
colaps karena menganggap isi elemnya keluar (out of flow) untuk
memperbaikinya bisa dilakukan dengan clearfix agar pembungkusnya
kembali ke ukuran sebelumnya: dengan search micro clearfix di
google, kemudian copy sintax cssnya dan copykan di stye css kita di
bagian terakhir. Kemudian tambahlan class cf di bagian parentnya.
Clear float :
Saat content keluar dari containernya, perlu diberikan CF untuk
menjaga agar content tersebut masih tampak dalam containernya saat
content tersebut diberikan float. Caranya:
Menggunakan properti overflow (auto)
Menggunakan div (kosong) pada HTML dan properti clear pada
CSS ( clear itu berfungsi membersihkan atau menghentikan float)
: valuenya ada right, left dan both sesuai dengan float yang
digunakan.
Menggunakan teknik micro clearfix (searh microclearfix di web
nicholas galager, tinggal copy dan paste syntaxnya dibagian
akhir CSS kita)
6. Position
Meletakan elemen pada posisi dimensi tertentu:
Static (default)
Non Ststic (dapat akses properti, top, left, right dan bottom)
o Relatif
Relatif terhadap posisinya semula dan meninggalkan
ruang kosong di posisi awalnya dan ruang ini tetap
ada, sehingga elemen lain tetap diposisinya.
Jika diberi properti left-right, top-bottom maka
perpindahan elemen tersebut relatif dari posisi
semulanya. Sehingga jika diberikan top 0 dan left 0
maka elemen tersebut tetap berada di posisi semula.
saat elelmen tersebut berpindah dia tidak akan
mempengaruhi elemen lain berbeda dengan properti
margin
o Absolut
Ruang yang ditempati sebelumnya dianggap tidak
ada sehingga elemen lain dibawahnya akan
berpindah keatas.
Ketika kita menggerakkan elemen dengan posisi
absolut, elemen akan bergerak relatif terhadap posisi
dari element parentnya selama elemen parentya
memiliki posisi yang non static juga.
o Fixed
Sama dengan absolut, tetapi berada diposisi tetap
dari windows browsernya,tidak terikat oleh
parentnya meskipun dengan posisi yang nonstatik
juga.
7. Z-index
Menentukan posisi suatu elemen berada paling atas jika diberikan nilai
yang blebih besar, atau berada dibawah jika diberikan nilai minus.