Friday, May 27, 2016

CSS : Property Pada CSS

CSS : Property Pada CSS

Berikut ini adalah komponen property yang digunakan pada CSS :

Property Text Style

Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web. Adapun komponen Text Style atau yang berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berikut ini :
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

Property Text Layout ini berfungsi untuk mengatur bagaimana efek dari suatu layout suatu tulisan pada halaman website.

Property ini lebih berfokus pada penempatan dan tampilan yang ditempatkan pada halaman web anda.

Anda bisa mengombinasikan antara tampilan page layout dan text layout supaya tampilan website anda lebih elegant dan sesuai dengan keinginan anda tentunya dan itu yang jelas tidak bisa anda dapatkan pada HTML.

Berikut ini propertynya :
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

Property ini adalah untuk mengatur elemen yang mempunyai garis dengan berbagai variasi lebar,warna serta gaya suatu tampilan.

Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda style.
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

Property Margin ini untuk mengatur ruang atau jarak batasan antar elemen, misalnya antara elemen atas dan bawah, atau antara kiri dan bawah dll.

Berikut ini propertynya :
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

Property padding adalah untuk mengatur ruang antara elemen dan konten.
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

Property Page Layout adalah untuk mendesign suatu layout pada halaman web, ini property penting yang harus anda kuasai karena dengan menguasai property ini maka anda bisa membuat suatu halaman web yang bagus dan tentunya harus didukung akan kreatifitas seseorang.
Pada HTML tidak mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini anda juga bisa merubah pada themes atau template pada script CMS yang da sekarang ini.
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

Property ini berguna untuk mengatur tampilan background atau halaman belakang suatu web serta pengaturan suatu background yang lainnya misalnya background dari font.
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

Property ini untuk mengatur suatu elemen dalam web.
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

Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang ditujukan untuk pengguna .
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
Sekarang bagian kamu untuk mencoba serta banyak praktek , karena dalam CSS andaharus banyak la tihan dan banyak mengexplore, supaya anda paham betul fungsifunsi dari elemen-elemen CC Rule.

NB :
Untuk mengedit file HTML maupun CSS anda bisa menggunakan software antara lain
:
Notepad ( bawaan Windows )
Notepad ++
CoffeCup
Macromedia Dreamweaver 8
dll










Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

Cobalah untuk memilih Pelajaran Pemrograman dan belajar dari Materi Pertama
EmoticonEmoticon


TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.

https://smallseotools.com/