CSS : Property Pada CSS
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
Berikut ini propertynya :
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
Berikut ini propertynya :
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
Berikut ini propertynya :
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
Berikut ini propertynya :
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
Berikut ini propertynya :
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
Berikut ini propertynya :
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
NB :
Untuk mengedit file HTML maupun CSS anda bisa menggunakan software antara lain
:
Notepad ( bawaan Windows )
Notepad ++
CoffeCup
Macromedia Dreamweaver 8
dll
MATERI CSS
Materi ke-1 : Fungsi HTML dan CSS pada WEB
Materi ke-2 : Aturan penulisan CSS
Materi ke-3 : Cara menggabungkan HTML dan CSS
Materi ke-4 : Property pada CSS
Materi ke-5 : Tips Mahir Menguasai CSS
Materi ke-6 : Membuat Desaign Layout
Materi ke-7 : Membuat Menu Navigasi
Materi ke-8 : Mengedit Konten
Materi ke-9 : Mengedit Kolom Right
Materi ke-10 : Mengedit Footer
Materi ke-11 : Menggabungkan Seluruh Materi