CSS ( Cascading Style Sheets )
Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk
memperindah halaman website (situs), dengan CSS kita dapat dengan mudah
mengubah keseluruhan warna dan tampilan yang ada disitus kita sekaligus
memformat ulang situs kita.
CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk
digunakan diweb browser.
KeuntunganCSS:
- Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan
sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk
diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita.
- User yang berbeda dapat mempunyai style-sheet yang berbeda pula.
- Ukuran dan kompleksitas document code dapat diperkecil.
Sebuah style sheet terdiri dari beberapa aturan ( rules ). Masing-masing aturan
terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi ( declaration
block ). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh
titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai
(value).
Contoh:
<STYLE TYPE=“text/css”>
I, U { color:red }
B { color:green; text-decoration:underline; font-family:Arial }
</STYLE>
Font Properties
Font Family
Syntax:
font-family: [[<family-name> | <generic-family>],]* [<family-name> | <genericfamily>]
Possible Values:
<family-name>
· Any font family name may be used
<generic-family>
· serif(e.g., Times)
· sans-serif(e.g., Arialor Helvetica)
· cursive(e.g., Zapf-Chancery)
· monospace(e.g., Courier)
Font Style
Syntax: font-style: <value>
Possible Values: normal | italic| oblique
Font Variant
Syntax: font-variant: <value>
Possible Values: normal | small-caps
Font Weight
Syntax: font-weight: <value>
Possible Values: normal | bold| bolder| lighter | 100 | 200 | 300 | 400 | 500 | 600| 700|
800| 900
Font Size
Syntax:
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
· <absolute-size>
· xx-small | x-small | small | medium | large | x-large | xx-large
· <relative-size>
· larger | smaller
· <length>
· <percentage>(in relation to parent element)
Font
Syntax:
font: <value>
Possible Values: [ <font-style>|| <font-variant>|| <font-weight>]? <font-size>[/<lineheight>]?
<font-family>
Color & Background Properties
Color
Syntax: color:<color>
Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB. 16
keyword diambil dari palette Windows VGA : aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Ada empat cara dalam menuliskan warna menggunakan kode RGB:
· #rrggbb(e.g., #00cc00)
· #rgb(e.g., #0c0)
· rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0))
· rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g.,
rgb(0%,80%,0%))
Semua contoh diatas digunakan untuk menuliskan warna yang sama.
Untuk menghindari konflik dengan style sheets pengguna, properti background dan
color sebaiknya ditulis bersamaan.
Background Color
Syntax: background-color: <value>
Possible Values: <color>| transparent
Background
Syntax: background: <value>
Possible Values: <background-color>|| <background-image>|| <backgroundrepeat>||
<background-attachment>|| <background-position>
Text Properties
Text Alignment
Syntax: text-align: <value>
Possible Values: left | right | center| justify
Box Properties
Bottom Border Width
Syntax: border-bottom-width: <value>
Possible Values: thin | medium | thick | <length>
Width
Syntax: width: <value>
Possible Values: <length>| <percentage>| auto
Height
Syntax: height: <value>
Possible Values: <length>| auto
Border Style
Syntax: border-style: <value>
Possible Values: [ none | dotted | dashed | solid | double | groove | ridge | inset |
outset]{1,4}
.
Classification Properties
Display
Syntax: display: <value>
Possible Values: block | inline | list-item | none
Properti Display digunakan untuk mendefinisikan sebuah elemen dengan salah satu
dari nilai berikut ini :
· block (a line break before and after the element)
· inline (no line break before andafter the element)
· list-item (same as block except a list-item marker is added)
ga_pra_27@yahoo.co.id 13
· none (no display)
Whitespace
Syntax: white-space: <value>
Possible Values: normal | pre | nowrap
Properti white-space property will determine how spaces within the element are
treated. This property takes one of three values :
· normal(collapses multiple spaces into one)
· pre(does not collapse multiple spaces)
· nowrap(does not allow line wrapping without a <BR>tag)
