Mengenal Syntax CSS

Mengetahui CSS saya harus tahu dari pada Syntax2 CSS di bawah ini adalah hasil Copas saya untuk saya pelajari

width, adalah syntax yang berfungsi untuk merubah lebar sebuah bidang
cara penulisan: width: 200px;
maka width memerintahkan bahwa lebar dari bidang tersebut adalah 200 dalam ukuran pixel

height, adalah syntax yang berfungsi untuk merubah tinggi sebuah bidang
cara penulisan: height: 200px;
maka height memerintahkan bahwa tinggi dari bidang tersebut adalah 200 dalam ukuran pixel

float, adalah syntax yang berfungsi untuk merubah posisi sebuah bidang yang akan terlihat (left, right)
cara penulisan: float: left;
maka float memerintahkan bahwa posisi dari bidang tersebut berada disebelah kanan

display, adalah syntax yang berfungsi untuk menetapkan gaya tampilan sebuah bidang
cara penulisan:
display: none; (memerintahkan tampilan bidang tidak telihat)
display: inline; (memerintahkan tampilan sebuah bidang mengikuti bidang sebelumnya yang berada dalam satu garis atau didalam sebuh bidang tunggal)
display: block; (memerintahkan tampilan bidang berdiri sendiri)

margin, adalah syntax yang berfungsi untuk merubah jarak luar antara bidang satu dengan bidang yang lain.
cara penulisan: margin: 10px;
memerintahkan jarak margin: margin-top, margin-right, margin-bottom, margin-left dari sebuah bidang ukuran sama sebesar 10 dalam ukuran pixel
untuk memerintahkan atau merubah jarak margin sebuah bidang yang nilainya berbeda
cara penulisan:
margin-top: 10px; (memerintahkan jarak keluar bagian atas sebasar 10 dalam ukuran pixel)
margin-right: 15px; (memerintahkan jarak keluar bagian kiri sebasar 15 dalam ukuran pixel)
margin-bottom: 20px; (memerintahkan jarak keluar bagian bawah sebasar 20 dalam ukuran pixel)
margin-left: 25px; (memerintahkan jarak keluar bagian kanan sebasar 25 dalam ukuran pixel)
untuk lebih mempersingkat anda bisa menulis satu syntax memerintah beberapa syntax sekaligus
cara penulisan: margin:10px 15px 20px 25px;
keterangan:
memerintahkan jarak margin-top sebesar 10 dalam ukuran pixel
memerintahkan jarak margin-right sebesar 15 dalam ukuran pixel
memerintahkan jarak margin-bottom sebesar 20 dalam ukuran pixel
memerintahkan jarak margin-left sebesar 25 dalam ukuran pixel

apabila disalah satu bagian bidang tidak ingin diberi margin anda cukup mewakili dengan nilai 0 (null)
contoh: anda hanya ingin memberi jarak luar sebuah bidang bagin atas (top) dan bagian kanan (left) saja dengan ukuran sama sebesar 10 dalam ukuran pixel
cara penulisan: margin:10px 0px 0px 10px;
keterangan:
memerintahkan jarak margin-top sebesar 10 dalam ukuran pixel
memerintahkan jarak margin-right sebesar 0 (null tidak ada nilai untuk jarak luar)
memerintahkan jarak margin-bottom sebesar 0 (null tidak ada nilai untuk jarak luar)
memerintahkan jarak margin-left sebesar 10 dalam ukuran pixel

padding, adalah syntax yang berfungsi untuk merubah jarak lapisan dalam atara bidang dengan isi bidang yang ada didalam bidang tersebut (dengan merubah padding dari sebuah bidang maka akan merubah nilai width dan height dari bidang tersebut)
cara penulisan: padding: 10px;
cara penulisan lain untuk pedding sama seperti penulisan margin. bedanya padding dengan margin adalah padding merupakan jarak lapisan dalam yang berpengaruh terhadap nilai lebar dan tinggi sebuah bidang contoh: apabila sebuah bidang nilai width: 200px; kemudian diberi pedding: 10px; maka nilai width berubah menjadi 220px (padding-left:10px; + width:200px; + padding-right:10px dijumlahkan menjadi 220px).

border, adalah syntax yang berfungsi untuk membuat garis batas pinggir sebuah bidang (dengan membuat border pada sebuah bidang akan berpengaruh terhadap nilai width dan height bidang tersebut).
cara penulisan: border: 1px solid #000000;

penjelasan:
1px merupakan ukuran border (bisa dirubah sesuai dengan keinginan)
solid merupakan style tampilan border (ada beberapa style untuk border antaranya yang sering digunakan adalah: solid, dashed, double)
#000000 merupakan warna border berwarna hitam (warna bisa anda rubah sesuai dengan kekinginan, untuk mendapatkan kode warna bisa anda dapatkan pada tool generator color disini)

cara penulisan lain, apabila anda hanya ingin mebuat border di bagian tertentu pada sebuah bidang, berikut syntax yang anda gunakan:
border-top: 1px solid #000000; (memerintahkan untuk memberi border pada bagian atas (top) bidang saja)
border-right: 1px solid #000000; (memerintahkan untuk memberi border pada bagian kiri (right) bidang saja)
border-bottom: 1px solid #000000; (memerintahkan untuk memberi border pada bagian bawah (bottom) bidang saja)
border-left: 1px solid #000000; (memerintahkan untuk memberi border pada bagian kanan (left) bidang saja)

color, adalah syntax yang berfungsi untuk merubah tampilan warna tulisan
cara penulisan: color: #000000;
#000000 merupakan kodewarna hitam, ganti kode warna tersebut sesuai dengan keinginan anda (untuk mendapatkan kode warna bisa anda dapatkan pada tool generator color disini)

font-size,adalah syntax yang berfungsi untuk merubah ukuran tulisan
cara penulisan: font-size: 12px;
maka font-size memerintahkan bahwa ukuran tulisan dalam bidang tersebut adalah 12 dalam ukuran pixel

font-family, adalah syntax yang berfungsi untuk merubah model tulisan
cara penulisan: font-family: Arial, Times, Georgia;
maka font-family memerintahkan bahwa style tulisan dalam bidang tersebut adalah Arial, untuk dua style tulisan (Times, Georgia) dibelakangnya merupakan style alternatif apa bila font Arial pada sebuah komputer tidak terdeteksi maka akan diganti dengan font Times. begitu seterusanya. (sebuah komputer disini adalah komputer yang dimiliki oleh visitor/pengunjung situs anda)
by :
http://www.idnilman.com/2011/05/belajar-edit-template-mengenal-syntax.html

Artikel Yang Berhubungan