Read     Properti-properti yang digunakan pada CSS

Properti-properti yang digunakan pada CSS

Properti - properti yang digunakan pada css beserta dengan fungsi nya, jika ada yang kurang / kurang lengkap nanti akan ditambahkan. 

Di post sebelum nya kita sudah membahas mengenai cara menggunakan css dengan penjelasan dan cara menggunakan nya. Jika belum membaca, silahkan baca disini

Langsung praktekkan saja sob!

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 1px solid #000; 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;
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
dan

 

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.

Oke sob , langsung dipraktekkan ya! 

sumber

Top