BAB VIII
PROPERTI DALAM CSS
8.1 Color dan Background
Properti ini menggambarkan warna (color) dan latar belakang (background) dari suatu
elemen. Kita dapat menentukan warna latar (background color) dan gambar latar belakang
(background image). Posisi dari gambar (image), bagaimana jika berulang-ulang, dan apakah
tetap atau relatif terhadap canvas juga dapat di tentukan.
1. Color
Syntax: color: <value>
Properti color digunakan untuk menentukan warna dari elemen HTML. Contoh:
Contoh di atas memberikan warna pada elemen h1, h2, h3.
2. Background Color
Syntax: background-color: <value>
Possible Values: <color> | transparent
Properti background color digunakan untuk menentukan background color (warna latar
belakang dokumen). Contoh:
3. Background Image
Syntax: background-image: <value>
Properti background-image digunakan untuk memberikan background-body image dari
suatu elemen. Contoh:
4. Background Repeat
Syntax: background-repeat: <value>
Possible Values: repeat | repeat-x | repeat-y | no-repeat
Properti background-repeat menetukan bagaimana suatu background image yang telah
didefinisikan ditampilkan berulang-ulang, repeat-x value akan mengulang image secara
horizontal sedangkan repeat-y value akan mengulang image secara vertikal. Contoh:
Contoh di atas akan menampilkan background-image berulang-ulang (tiled) secara
horisontal dengan background color kuning.
Contoh di atas akan menampilkan background-image berulang-ulang (tiled) secara
vertikal dengan background color putih.
5. Background
Syntax: background: <value>
Possible Values: <background-color> || <background-image>
|| <background-repeat>
Properti ini memiliki value yang mungkin seperti background-color, background-image,
background-repeat. Contoh definisi background sebagai berikut:
6. Properti Background lainnya
8.2 Teks dan Font
Properti text (teks) memungkinkan kita mengatur tampilan dari teks. Dengan properti
text ini kita dapat mengubah warna teks, menambah atau mengurangi spasi antar karakter
dalam teks, alignment teks, dekorasi teks, tabulasi baris pertama sebuah teks dan lain-lain.
1. Text Direction
Syntax: direction: <value>
Possible Values: rtl | ltr
Properti ini mendefinisikan direction dari text. Contoh:
2. text-align
Syntax: text-align: <value>
Possible Values: left | right | center | justify
Properti ini medefinsikan alignment text. Contoh:
3. text-decoration
Syntax: text-decoration: <value>
Possible Value: none | [ underline || overline
|| line-through || blink ]
Properti ini memberikan dekorasi sebuah text. Contoh:
Contoh di atas menyebabkan text yang ada di antara tag <A> dan </A> bergaris bawah.
4. text-indent
Syntax: text-indent: <value>
Possible Value: <length> | <percentage>
Properti ini mendefinisikan indentation /tabulasi . Contoh:
P { text-indent: 10% }
5. Properti text
Berikut properti text berdasarkan CSS1 dan CSS2
6. font-family
Syntax: font-family: <value>
Possible Value: [[<family-name> | <generic-family>],] *
[<family-name> | <generic-family>]
Contoh:
7. font-style
Syntax: font-style: <value>
Possible Value: normal | italic | oblique
Contoh:
Pada contoh tadi, semua text yang berada di dalam tag h1,h2 , dan h3 akan memiliki
style italic , dan emphasized text yang berada dalam tag <h1> akan memiliki style normal.
8. font-size
Syntax: font-size: <value>
Possible Value: <absolute-size> | <relative-size> | <length>
|<percentage>
Contoh:
8.3 Border
1. border-style
Syntax: border-style: <value>
Possible Value: none | dotted | dashed | solid
| double | groove | ridge | inset | outset
Properti border-style mendefinisikan style dari keempat border (border-left, border-top,
border-right, and border-bottom).
Contoh:
2. border-top
Syntax: border-top: <value>
Possible Value: <border-top-width> || <border-style> || <color>
Contoh:
Contoh di atas akan mendefinisikan width, style, dan color dari border top elemen
tag<h1>.
3. border-right
Syntax: border-right:<value>
Contoh:
Contoh di atas akan mendefinisikan width, style, dan color dari border right elemen tag
<h1>.
4. border-bottom
Syntax: border-bottom:<value>
Possible Value: <border-right-width> || <border-style>
|| <color>
Contoh:
Contoh di atas akan mendefinisikan width, style, dan color dari border bottom elemen
tag <h1>.
5. border-left
Syntax: border-left:<value>
Possible Value: <border-right-width> || <border-style>
|| <color>
Contoh:
Contoh di atas akan mendefinisikan width, style, dan color dari border left elemen tag
<h1>.
8.4 Margin
1. margin-top
Syntax: margin-top:<value>
Possible Value: <length> | <percentage> | auto
Properti ini mendefinisikan top margin suatu elemen.
Contoh:
2. margin-right
Syntax: margin-right:<value>
Possible Value: <length> | <percentage> | auto
Properti ini mendefinisikan right margin suatu elemen.
Contoh:
3. margin-bottom
Syntax: margin-bottom:<value>
Possible Value: <length> | <percentage> | auto
Properti ini mendefinisikan bottom margin suatu elemen. Contoh:
4. margin-left
Syntax: margin-left:<value>
Possible Value: <length> | <percentage> | auto
Properti ini mendefinisikan left margin suatu elemen.
Contoh:
5. margin
Syntax: margin:<value>
Possible Value: [ <length> | <percentage> | auto ]{1,4}
Properti margin mendefinisikan margin-top, margin-right, margin-bottom' dan margin-
left suatu elemen.
Contoh:
8.5 Padding
1. padding-top
Syntax: padding-top:<value>
Possible Value: <length> | <percentage>
Properti ini akan mendefinisikan top padding suatu elemen.
Contoh:
2. padding-right
Syntax: padding-right:<value>
Possible Value: <length> | <percentage>
Properti ini akan mendefinisikan right padding suatu elemen.
Contoh:
3. padding-bottom
Syntax: padding-bottom:<value>
Possible Value: <length> | <percentage>
Properti ini akan mendefinisikan bottom padding suatu elemen.
Contoh:
4. padding-left
Syntax: padding-left:<value>
Value: <length> | <percentage>
Properti ini akan mendefinisikan left padding suatu elemen.
Contoh:
5. padding
Syntax: padding:<value>
Possible Value: <length> | <percentage>
Properti padding mendefinisikan padding-top, padding-right, padding-bottom dan
padding-left suatu elemen . Properti ini akan mendefinisikan padding suatu elemen.
Contoh:
.png)
