CSS Background, Border, Margin, Padding (La)

CSS Bacground

Css Background digunakan untuk membuat efek-efek pada background suatu elemen.
Properti dari background adalah :

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background color
background-color digunakan untuk menggambarkan warna dari suatu elemen.
Ada 3 cara untuk mendklarasikan warnanya :

• Menggunakan nama warna yang sudah ada ( "green" )
• Menggunakan warna Heksa ( "#ff0000" )
• Menggunakan warna RGB ( "rgb(255,0,0)" )

contoh cara menuliskan syntax :

Background Image

background-color digunakan untuk menambahakan image dibackground

contoh menuliskan syntax : background-image : url("namagambar.extensi");

Background image-repeat

background-repeat digunakan untuk membuat pengulangan gambar secara horizontal atau vertikal atau tidak mengulang sama sekali.

• repeat-x : mengulang secara horizontal
• repeat-y : mengulang secara vertikal
• no-repeat : tidak mengulang

contoh menuliskan syntax :

Background Position, Background attachment : fixed

backgroud position digunakan untuk menentukan letak image, sedangkan background-attachment untuk membuat gambar tidak dapat discroll atau letaknya tetap.

contoh menuliskan syntax :

CSS Border

Css border adalah garis tepi pada suatu elemen. Macam-macam properti border antara lain : 

• border-style
• border-width
• border-color

Berikut adalah value dari border style dan penulisan syntax :

 

border-width adalah ukuran dari border yang akan dibuat semakin besar nilainya semakin tebal bordernya, sedangkan border-color digunakan untuk memberi pewarnaan pada border.

Kita juga dapat mengcustom bordernya menggunakan border-top, border-right, border-bottom, atau border-left.
Selain itu ada cara pendek untuk menuliskan syntax css border (shorthand) : 

border : solid 5px #23cee5;

CSS Margin

Css margin digunakan untuk memberi jarak pada elemen pada bagian luar.

properti css margin antara lain : 

• margin-top
• margin-right
• margin-bottom
• margin-left

Value css margin dapat berupa :

• auto - browser akan menghitung secara otomatis ukuran margin
• panjang - menyatakan ukuran menggunakan px, cm, em, dll.
• % - menyatakan ukuran menggunakan persen
• inherit - diturunkan dari elemen induk   

CSS Padding
Hampir sama seperti Margin, css Padding juga memberikan jarak pada elemen namun jarak yang diberikan adalah dibagian dalam elemen. Properti css padding antara lain :

• padding-top
• padding-right
• padding-bottom
• padding-left

value css padding yaitu :   

• panjang - menyatakan ukuran menggunakan px, cm, em, dll.
• % - menyatakan ukuran menggunakan persen
• inherit - diturunkan dari elemen induk    

Penulisannya pun sama seperti margin 

padding : 25px 50px;

Nah daritadi kan aku nulisin margin sama padding formatnya gini nih ( margin : 50px 25px; ). Maksudnya adalah 50px untuk bagian vertikal yaitu top dan bottom sedangkan 25px untuk bagian horizontal yaitu right dan left. Gitu deh..

Sekian dulu buat minggu ini!! see youuu  

References : W3Schools

-lindandrynn