PROPERTY DAN VALUE PADA CSS
Selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah (color, font-size, dll)
Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;) Property dan nilai diapit dalam kurung {}
property : atribut yang akan diubah (color, font-size, dll)
Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;) Property dan nilai diapit dalam kurung {}
Contoh property dan values pada background
Property | Values | Keterangan |
Background-image | Url | Alamat gambar yang sudah di aploud |
Background-repeat | Repeat | Gambar diulang dalam halaman |
Repeat-y | Gambar diulang dalam sumbu y | |
Repeat-x | Gambar diulang dalam sumbu x | |
no-Repeat | Gambar tidak diulang hanya muncul 1 gambar | |
Contoh property dan values pada font
Property | Values | Keterangan | |
font-family | Arial; | Jenis font adalah arial | |
Font-size | |||
small; | kecil | ||
medium; | menengah | ||
large; | besar | ||
12px; | besar 12 pixel (Bisa diganti 12pt) | ||
Font-style | |||
Normal; | Font normal | ||
Italic; | Font miring | ||
Font-weight | |||
Normal; | Ketebalan font normal | ||
Bold; | Font Tebal | ||
100-900 | Ketebalan font dengan nilai dari 100-900 | ||
Contoh Property Dan Value pada Text
Property | Values | Keterangan |
Text-decoration | ||
none; | Menampilkan text asli | |
Underline; | Menampilkan Text bergaris bawah | |
Overline; | Menampilkan text bergaris atas | |
line-through; | Menampilkan text tercoret | |
blink; | Menampilkan text berkedip | |
Text-transform | uppercase; | Menampilkan text huruf besar |
Text-align | left; | Text rata kiri |
right; | Text rata kanan | |
center; | Text rata tengah | |
justify; | Text rata kanan kiri |
Contoh Selector Pada Link
Selector | Keterangan |
a:link | Keadaan awal link |
a:hover | Keadaan link saat dikenai mouse |
a:active | Keadaan link saat di klik |
a:visited | Keadaan link setelah dikunjungi |
Contoh property dan value pada position
Property | Values | Keterangan |
Position | ||
Static; | Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen | |
Absolute; | Unsur diposisikan relatif terhadap posisi pertama (tidak statis) | |
Fixed; | Unsur diposisikan relatif terhadap jendela browser | |
Relative; | elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen | |
Inherit; | Nilai dari properti posisi diwariskan dari elemen induk |
Contoh Property dan Value pada Border
Property | Values | Keterangan |
Border | ||
ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom; | ||
1px solid #000; | ||
2px dotted #ff0000; | ||
3px double blue; | ||
5px groove #3300ff; | ||
5px ridge #3300ff; | ||
5px inset #3300ff; | ||
5px outset #3300ff; |
Contoh property dan value pada border-radius
Property | Values | Keterangan |
Border-radius | 10px; | Garis melemgkung disemua sisi dengan ukuran 10px |
border-top-left-radius | 2em 0.5em; | Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda |
border-top-right-radius | 3em 2.5em; | Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda |
border-bottom-right-radius | 1em 2em; | Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda |
border-bottom-left-radius | 2em 1em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda |
border-bottom-left-radius | 2em; | Garis melengkung pada sisi bawah dan kiri dengan ukuran sama |
Margin dan Padding
Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.
Padding adalah kode yang mengatur seleksi batas jarak dalam seperti memberi jarak pada header dengan batas tepi header misalnya padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.
Contoh property dan value pada margin dan padding
Property | Values | Keterangan |
margin | 10px 5px 0px 5px; | atas 5, kanan 5, bawah 0, kiri 10 |
margin-top | 10px; | karak atas 10px |
margin-right | 5px; | jarak kanan 5px |
margin-bottom | 2em; | jarak bawah 2em |
margin-left | 3em; | jarak kiri 3en |
padding | 2em; | atas, kanan, kiri dan bawah 2em |
Contoh property dan value pada display
Property | Values | Keterangan |
DISPLAY | None; | Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut |
Block; | Berfungsi untuk memberi blok baru atau baris baru seperti kode <br> dan <p> | |
Inline; | Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut | |
Inline-block; | jika layar tidak muat maka secara otomatis membuat baris baru. |
Sumber : Property dan Value Pada CSS
