Belajar CSS Lengkap

INTRO :

Tools : Text Editor, Web Browser

Display : 

DISPLAY :
------------------------------------------------------------------------------

- Box Model
- Float
- Posisioning

Pemahaman Dasar :
Display, Dimensi dan Over Flow

DISPLAY : Div dan Span
p untuk paragraf, H1 - 6 : Heading

Jika mempunyai website sederhana : jika menambahkan Div ( untuk pengelompokan ) maka tidak ada efeknya / tidak mempunyai arti. Div akan mempunyai efek jika dibuatkan style.

contoh
Div : Header, Navigasi, Main, Footer

SPAN : 
.main span { bacground-color: light-blue}

Value Default
DIV : display: block;
SPAN : display:inline;

inline-block : ( diubah secara manual oleh user )
display: inline-block;

Block : menambahkan baris baru ( dibawahnya )
jika tidak diatur lebarnya, maka akan memenuhi lebar browser

H1,H2, P { background-color: green; }
karena tidak diatur lebar, maka akan memenuhi web browser

none : 
digunakan untuk menghilangkan
{display:none;}

property Display : Block, Inline, Inline-block, none

Dimensi dan OverFlow
================================================== 

Mengatur ukuran ( dimensi CSS )
ukuran sebenernya cuma : width dan height
Satuan : pixel ( px ), Persen ( relatif ), ( in, mm, cm, pt, pc ( point, pica ) )

Pixel : absolute
Persen akan relatif ( menikuti ukuran pembungkusnya / partentnya )

.satu didalam satu dikasih class lagi

Jika dikasih lebih besar dari parentnya : maka akan keluar dari parentnya

Overflow tujuannya agar tidak keluar dari Parent / Pembungkusnya.

Visible / auto / hidden / scroll

CSS BOX MODEL :
=================================================

CCS Box model terdiri dari : Margin, border, padding dan konten itu sendiri

Margin : area transpoaran disekitar kotak ( diluar border )
padding : area transparan didalam kotak ( antara konten dan border )
border : batas disekeliling content dan padding
content : konten didalam box, bisa berupa text atau gambar, link dan sebagainya

Margin : Cara pakai, overlapping margin, negatif margin, auto, shorthand

MARGIN
==================================================
Praktik :
membuat div 1, 2 dan 3
kelas 1 dikasih lebr 200px dan tinggi px, bacground : hijau muda,
kelas 2 dikasih lebr 100px dan tinggi px, bacground : biru muda,
kelas 3 dikasih lebr 50px dan tinggi px, bacground : violet,

.1
Margin left: 100px
margin top : 50px
margin bottom : 150px

Overlapping Margin : menggbunghkan 2 buah margin kiri dan kanan.
Margin tidak saling manbahkan ( jika vertikal )

klarena kotak adalah block maka kebawah
maka bisa ditambahkan : Div { display: inline-block; }

Vertikal : mengambil yang paling besar
horisontal : menjumlahkan margin

Negatif Margin : akan bergeser keatas ( akan menabrak ) digunakan jika ingin menyembunyikan elemen

Nilai dari Auto : khusus untuk margin kiri dan kanan

Width
height
background color
martgin left: auto; dan right adalah auto\

SHORTTHAND :
marghin: 50px ( artinya ke 4 sisinya 50px ) ---> inpect, computed 50 50 50
margin : 50 auto ( atas bawah dan kiri kanan )
margin : atas, kiri dan kanan, bawah ;
margin : atas, kanan, bawah dan kiri

PADDING dan BORDER
=================================================================

div { width : 300px
heaight: 400px
backcolor
margin : 20px auto;
padding left:50px; ( nambah / menambhakan jarak

Padding tiudak bisa dikasih negatif, Padding tidak bisa dikasih Auto

Padding : mempengaruhi ukuran yang dibuat

BORDER : 
batas disekeliling padding dan margin 
Nilai : tebal, style, warna border}
border\: 5px soilid black;

sisi :
border-left
border-right

BOX-SIZING
untuk mengkalkulasi penambahan2 ukuran kotak

jika ingin menambah elemen maka ...........
box-sizing: border-box;

div {
width: 600px;
Heigh: 400px;
box-sizing: border-box

}

Terima kasih