CSS : Property Pada CSS

Property Text Style

1. color
Property ini mengontrol warna dari text penulisannya
Selektor {color:#000000}
Value bisa warna Hexadesimal bisa hanya tulisan misalnya untuk kuning menggunakan Yellow.

2. font-weight
Property ini mengontrol tebal dari text penulisannya
Selektor { font-weight:100}
Value bisa anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya atau bisa anda tulis dengan kata ‘Bold’ atau yang lain.

3. font-family
Property ini untuk mengatur font yang anda pakai
Selektor{font-family:Arial, Helvetica, sans-serif}
Untuk jenis font sebaiknya menggunakan standard bawaan Windows,jika ingin terbaca oleh seluruh user.

4. font-size
Property ini untuk mengatur ukuran font yang akan dipakai
Selektor{ font-size:12px}
Untuk ukuran font anda bisa menggunakan ukuran… px,…em atau small,medium,large dll.

5. font-variant
Property ini untuk mengatur font yang akan muncul apakah menggunakan
huruf kecil atau small caps
Selektor{ font-variant:small-caps} atau anda bisa menggunakan normal.

6. font-style
Property ini untuk mengatur style font yang akan digunakan pada text
Selektor{ font-style:italic} pilihan value lain normal, oblique

7. text-decoration
Property ini untuk mengatur style font lanjutan dari font style. Selektor{text-decoration:underline} atau value lain : line through, none,
blink, overline

8. text-transform
Property ini untuk mengatur capital font
Selektor{ text-transform:lowercase} value lain: uppercase, capitalize

Property Text Layout

1. letter-spacing
Property ini untuk mengontrol jarak space antar karakter
Selektor{letter-spacing:normal} untuk value normal maka akan diatur oleh browser sebagai justify text.

2. word-spacing
Property ini untuk mengontrol jarak space antar text atau kata
Selektor{ word-spacing:normal}

3. line-height
Property ini untuk mengatur jarak line atau garis
Selektor{ line-height:normal} value lain : …em, …px atau persentase …%

4. text-indent
Property ini untuk mengatur dari baris pertama yang masuk biasanya untuk awal paragraph.
Selektor{ text-indent:50px}

5. text-align
Property ini untuk mengatur posisi dari text
Selektor{ text-align:justify} Value lain : left, right, center

6. vertical-align
Property ini untuk mengontrol jarak space antar text atau kata
Selektor{ vertical-align:top} value lain: text-top,text-bottom, bottom, middle,
baseline, sub, super.

7. direction
Property ini untuk mengatur dan menentukan arah dari suatu tulisan pada website
Selektor{ direction:ltr} Value lain : rtl
Keterangan : ltr =Tulisan yang terbaca dari kiri ke kanan
rtl =Tulisan yang terbaca dari kanan ke kiri

8. unicode-bidi
Property ini untuk mengontrol dan mengarahkan pada tulisan unicode
Selektor{ unicode-bidi:bidi-override} Value lain : normal, embed

Property Border

1. border
Property ini untuk mengatur border secara keseluruhan
Selektor{border:normal} Value lain : thin, thick, dashed, dotted, double,
grove, hidden, inset, none , outset, ridge, solid

2. border-width
Property ini untuk mengatur lebar border secara keseluruhan
Selektor{ border-width:thin} Value lain : thick, medium

3. border-top-width
Property ini untuk mengatur lebar border top
Selektor{ border-top-width:thin} Value lain : thick, medium

4. border-right-width
Property ini untuk mengatur lebar border right
Selektor{ border-right-width:thin} Value lain : thick, medium

5. border-bottom-width
Property ini untuk mengatur lebar border bottom
Selektor{ border-bottom-width:thin} Value lain : thick, medium

6. border-left-width
Property ini untuk mengatur lebar border left
Selektor{ border-left-width:normal} Value lain : thick, medium

7. border-color
Property ini untuk mengatur warna dari border
Selektor{ border-color:#333333} Value lain : anda bisa gunakan warna
hexadecimal yang awalnya dimulai dengan tanda #

8. border-style
Property ini untuk mengatur style dari border
Selektor{ border-style:normal} Value lain : thin, thick, dashed, dotted,
double, grove, hidden, inset, none , outset, ridge, solid

9. border-top
Property ini untuk mengatur border top
Selektor{ border-top:normal} Value lain : thin, thick, dashed, dotted, double,
grove, hidden, inset, none , outset, ridge, solid

10. border-right
Property ini untuk mengatur border right
Selektor{ border-right:normal} Value lain : thin, thick, dashed, dotted,
double, grove, hidden, inset, none , outset, ridge, solid

11. border-bottom
Property ini untuk mengatur border bottom
Selektor{ border-bottom:normal} Value lain : thin, thick, dashed, dotted,
double, grove, hidden, inset, none , outset, ridge, solid

12. border-left
Property ini untuk mengatur border left
Selektor{ border-left:normal} Value lain : thin, thick, dashed, dotted, double,
grove, hidden, inset, none , outset, ridge, solid

Property Margin

1. margin
Property ini untuk mengatur jarak meliputi secara keseluruhan antar elemen
Selektor{ margin:auto} Value lain bisa ukuran …px,…em atau persentase
misalnya 25%

2. margin-top
Property ini untuk mengatur jarak top dengan elemen
Selektor{ margin-top:auto} Value lain bisa ukuran …px,…em atau persentase
misalnya 25%

3. margin-left
Property ini untuk mengatur jarak left dengan elemen
Selektor{ margin-left:auto} Value lain bisa ukuran …px,…em atau persentase
misalnya 25%

4. margin-right
Property ini untuk mengatur jarak right dengan elemen
Selektor{ margin-right:auto} Value lain bisa ukuran …px,…em atau
persentase misalnya 25%

5. margin-bottom
Property ini untuk mengatur jarak bottom dengan elemen
Selektor{ margin-bottom:auto} Value lain bisa ukuran …px,…em atau
persentase misalnya 25%

Property Padding

1. padding
Property ini untuk mengatur ruang elemen dengan konten secara global
Selektor{ padding:7px} Value lain bisa ukuran …px,…em atau persentase
misalnya 25%

2. padding-top
Property ini untuk mengatur ruang elemen top dengan konten
Selektor{ padding-top:7px} Value lain bisa ukuran …px,…em atau persentase
misalnya 25%

3. padding-left
Property ini untuk mengatur ruang elemen left dengan konten
Selektor{ padding-left:7px} Value lain bisa ukuran …px,…em atau persentase
misalnya 25%

4. padding-right
Property ini untuk mengatur ruang elemen right dengan konten
Selektor{ padding-right:7px} Value lain bisa ukuran …px,…em atau
persentase misalnya 25%

5. padding-bottom
Property ini untuk mengatur ruang elemen bottom dengan konten
Selektor{ padding-bottom:7px} Value lain bisa ukuran …px,…em atau
persentase misalnya 25%

Property Page Layout

1. position
Property ini untuk menentukan dimana elemen akan ditempatkan juga
untuk menempatkan elemen induk.
Selektor{ position:absolute} Value lain : fixed,relative, static, top, bottom,
left, right

2. top
Property ini untuk menentukan bagian atas dari suatu elemen ditempatkan.
Selektor{ top:absolute} Value lain : fixed,relative, static,auto

3. left
Property ini untuk menentukan bagian kiri dari suatu elemen ditempatkan.
Selektor{ left:absolute} Value lain : fixed,relative, static,auto

4. bottom
Property ini untuk menentukan bagian bawah dari suatu elemen
ditempatkan.
Selektor{ bottom:absolute} Value lain : fixed,relative, static,auto

5. right
Property ini untuk menentukan bagian kanan dari suatu elemen
ditempatkan.
Selektor{ right:absolute} Value lain : fixed,relative, static,auto

6. width
Property ini untuk menentukan lebar dari suatu elemen
Selektor{width:50%} value lain: …px,…em,auto

7. min-width
Property ini untuk menentukan lebar minimal dari suatu elemen
Selektor{ min-width:50%} value lain: …px,…em,auto,none

8. max-width
Property ini untuk menentukan lebar maximal dari suatu elemen
Selektor{ max-width:50%} value lain: …px,…em,auto,none

9. height
Property ini untuk menentukan tinggi dari suatu elemen
Selektor{ height:50%} value lain: …px,…em,auto,none

10. min-height
Property ini untuk menentukan tinggi minimal dari suatu elemen
Selektor{ min-height:50%} value lain: …px,…em,auto,none

11. max-height
Property ini untuk menentukan tinggi maximal dari suatu elemen
Selektor{ max-height:50%} value lain: …px,…em,auto,none

12. z-index
Property ini untuk mengatur beberpa elemen yang terjadi overlap
Selektor{z-index:auto} value lain mengunakan bilangan bulat ( integer)

13. visibility
Property ini untuk mengatur elemen apakah ditampilkan pada browser atau
tidak.
Selektor{ visibility:hidden} Value lain : visible, collapse

14. overflow
Property ini untuk mengatur menampilkan konten yang tidak bisa
ditampung oleh elemen
Selektor{ overflow:auto} Value Lain : hidden, scroll, visible

15. float
Property ini membuat efek elemen yang keluar dari flow dan ditempatkan
disisi kiri atau kanan suatu elemen
Selektor(float:left} Value lain : None, right

16. clear
Property ini digunakan bersama dengan float dan disini ditentukan apakah
elemen bisa menerima suatu float atau tidak.
Selektor{ clear:both} Value lain : left, right, none

17. clip
Property ini untuk mengatur cupilkan kecil suatu elemen untuk ditampilkan.
Selektor{ clip:rect('top', 'right', 'bottom', 'left')} Value lain : both

Property Background

1. background
Property ini untuk mengatur background secara luas
Selektor{ background:bottom} Untuk value lain bisa : url, none, center, left,
right, top, no-reapet, reapet, reapet-x, reapet-y, fixed, scroll
Untuk contoh penggunaaan value url :
Selektor(background:url(http://rudydevianto.com/background.png)
fixed no-reapet top left}

2. background-color
Property ini untuk mengatur warna dari background
Selektor {background-color:#000033} Value lain anda bisa gunakan
pewarnaan hexadecimal.

3. background-image
Property ini untuk mengatur background gambar dari suatu table , halaman
atau elemen yang lain
Selektor(background:url(http://rudydevianto.com/logo.png)} atau value
none untuk tidak menampilkan gambar.

4. background-attachment
Property ini untuk mengatur suatu gambar apakah jika mouse di scroll
gambar ikut scroll atau tetap
Selektor{ background-attachment:scroll} Value lain : fixed

5. background-repeat
Property ini untuk membuat perintah pada image yang ada pada
background untuk perulangan karena disebabkan gambar yang ukuran kecil
Selektor{ background-repeat:repeat} Value lain: no repeat, reapet-x,
reapeat-y

6. background-position
Property ini untuk mengatur posisi dari gambar background pada halaman.
Selektor{ background-position:top} Value lain : left, right, bottom, center

Property Type Elemen

1. display
Property ini untuk mengatur sebagaimana elemen akan terpasang pada
halaman website
Selektor{ display:block} Value lain : compact, inline, inline-table, list-item,
marker, none, run-in, table, table-caption, table-cell, table-column, tablecolumn-group, table-footer-group, table-header-group,table-row, table-rowgroup

2. white-space
Property ini dapat digunakan jika anda menggunakan elemen block dan
untuk menentukan apa yang akan browser lakukan kepada white-space (
spasi )
Selektor{ white-space:normal} Value lain : normal, nowrap, pre

3. list-style-type
Property ini digunakan untuk menentukan suatu Style List Item ( Bullet )
Selektor{ list-style-type:armenian} value lain : cirle, cjk-ideographic, decimal,
decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha,
lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upperalpha, upper-latin, upper-roman

4. list-style-image
Property ini untuk membuat bullet dari gambar
Selektor{ list-style-image:url(http://rudydevianto.com/bullet.gif)}

5. list-style-position
Property ini untuk mengatur posisi bullet
Selektor{ list-style-position:inside} Value lain : outside

6. list-style
Property ini untuk mengatur style dari list ( bullet ) secara global
Selektor{ list-style-type:armenian} value lain : url, inside, outside, cirle, cjkideographic, decimal, decimal-leading-zero, disc, georgian, hebrew,
hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lowerroman, none, square, upper-alpha, upper-latin, upper-roman

7. border-collapse
Property ini untuk mengatur border table
Selektor{border-collapse:collapse} Value lain : separate

8. border-spacing
Property ini untuk mengatur space pada border
Selektor{border-spacing:0}

9. caption-side
Property ini untuk mengatur posisi dari caption
Selektor{caption-side:bottom} Value lain : top, left, center, right

10. empty-cells
Property ini untuk menampilkan atau menyembunyikan cell pada table
Selektor{empty-cells:hide} Value lain : show

11. table-layout
Property ini untuk mengatur layout suatu table apakah menyesuaikan atau
tetap .
Selektor{table-layout:auto} Value lain : fixed

Property Interface

1. cursor
Property ini untuk mengatur tampilan cursor yang kan dipakai user pada
browser
Selektor{cursor:auto} Value lain : url , crosshair, default, e-resize, help,
move, ne-resize, n-resize, nw-resize, pointer, se-resize, sw-resize, text, wait,
w-resize

2. outline
Property ini mengatur garis tepi dari elemen secara global
Selektor{outline:#333333} untuk warna bisa menggunakan warna
hexadecimal lain atau value lain : dashed, dotted, double, groove, hidden,
inset, none, outside, ridge, solid, medium, thin, thick

3. outline-color
Properti ini mengatur warna dari garis tepi suatu elemen
Selektor{outline:#333333} untuk warna bisa menggunakan warna
hexadecimal lain

4. outline-style
Property ini untuk mengatur style dari garis tepi suatu elemen
Selektor{outline:dashed} value lain : dotted, double, groove, hidden, inset,
none, outside, ridge, solid, medium, thin, thick

5. outline-width
Property ini untuk mengatur sebeapa lebar garis tepi suatu elemen
Selektor{ outline-width:medium} Value lain : thick, thin