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 anda untuk mencoba serta banyak praktek , karena dalam CSS anda harus banyak latihan dan banyak mengexplore, supaya anda paham betul fungsifunsi dari elemen-elemen CC Rule.

Dalam ebook ini saya juga melampirkan contoh website yang menggunakan CSS dan anda bisa meng”oprek” dan belajar bagaimana CSS dan HTML itu bekerja.

NB :

Untuk mengedit file HTML maupun CSS anda bisa menggunakan software antara lain