andra's life notes: Cascade Style Sheet (CSS)

CSS adalah salah satu fasilitas script yang diberikan untuk disisipkan pada HTML sehingga pengaturan/pendesainan tampilan Web menjadi lebih baik.

Cara penulisan CSS

1. Inline Style Sheet

Bentuk ini adalah bentuk yang mendefinisikan CSS langsung pada tag HTML ybs. Cara penulisannya dengan menambahkan atribut STYLE dalam HTML.

2. Embedded Style Sheet

Dengan bentuk ini, CSS didefinisikan terlebih dahulu dalam tag Style … /Style diatas tag Body atau bisa juga di dalam tag Head

3. Linked Style Sheet

Dalam bentuk ini pendefinisian tag Style dipisahkan menjadi file lain, sehingga dapat digunakan dalam file-file HTML yang membutuhkan CSS tsb.

Selectors

Beberapa pengertian yang penting untuk difahami adalah :

· Style adalah definisi dari font, color, dll

· Masing-masing style mempunyai nama khusus, yaitu sebuah selector

· Pada halaman HTML kita dapat me-refer selector untuk mengaktifkan style

Terdapat tiga macam selectors :

Digunakan untuk mendefinisikan style yang diasosiasikan kepada tag HTML

Digunakan untuk mendefinisikan style yang dapat digunakan tanpa mendefinisikan kembali tag HTML

Kita juga dapat menggunakan tag SPAN dan DIV untuk memanggil class yang telah didefinisikan sebelumnya.

Digunakan untuk mendefinisikan style yang berkaitan dengan objek dengan ID yang unik, biasanya digunakan untuk disain

CSS Text

Untuk mendefinisikan style dari text, CSS menyediakan beberapa opsi :

Font Property

Property	Values	Example
font-family	font name generic font	font-family:arial font-family:arial, helvetica
font-style	normal italic oblique	font-style:normal font-style:italic font-style:oblique
font-variant	normal small-caps	font-variant:normal font-variant:small-caps
font-weight	normal bold bolder lighter 100-900	font-weight:normal font-weight:bold font-weight:bolder font-weight:lighter font-weight:250
font-size	normal length length absolute absolute absolute absolute absolute absolute absolute relative relative percentage	font-size:normal font-size:14px font-size:14pt font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large font-size:smaller font-size:larger font-size:75%

Contoh penggunaan :

B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}

Text Property

Property	Values	Example
line-height	normal number length percentage	line-height:normal line-height:1.5 line-height:22px line-height:150%
text-decoration	none underline overline line-through blink	text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink
text-transform	none capitalize uppercase lowercase	text-transform:none text-transform:capitalize text-transform:uppercase text-transform:lowercase
text-align	left right center justify	text-align:left text-align:right text-align:center text-align:justify
text-indent	length percentage	text-indent:20px; text-indent:10%
white-space	normal pre	white-space:normal white-space:pre

CSS Colors

Property	Values
color	< color >
background-color	transparent
background-image	none url(< URL >)
background-repeat	repeat repeat-x repeat-y no-repeat
background-attachment	scroll fixed
background-position	< percentage > < length > top center bottom left right
background	< background-color > < background-image > < background-repeat > < background-attachment > < background-position >

CSS Links

Property	Values
A:link A:visited A:active A:hover	< style > < style > < style > < style >

CSS List

Property	Values
list-style type	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none
list-style image	none url(< url >)
list-style position	outside inside
list-style	< list-style type > < list style position > < list-style image >

CSS Cursors

andra's life notes