Salah satu tingkat dasar dari CSS (Cascading Style Sheet) adalah mengetahui cara mengunakannya untuk Background, Text, Fonts, Links, Lists, dan Tables. Di artikel kali ini mari kita bahas satu persatu cara penggunaan style css tersebut
Style untuk Background
Properti CSS untuk background digunakan utuk membuat efek background (latar belakang) dari sebuah elemen HTML. Properti yang digunakan untuk membuat efek pada background adalah :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Properti background-color mendefinisikan warna dari sebuah elemen HTML. Untuk membuat warna background dari sebuah halaman web maka properti ini digunakan pada selector body HTML. contoh penggunaanya adalah sebagai berikut :
1
| body {background-color:#000000;} |
Warna background dapat digunakan dengan :
- nama dari warna dalam english seperti "black", "blue" dan sebagainya
- nilai dari RGB (Red, Green, Blue) seperti (255,255,255)
- nilai Hex dari warna seferti "#000000", "#FFFFFF" dan sebagainya (saya biasa menggunakan ini dan nilai warna saya ambil dari photshop)
Selain digunakan pada selector body, elemen html lainya juga bisa di beri properti ini. Di bawah ini merupakan contoh penggunaan background-color untuk beberapa elemen HTM
1
2
3
| h1 {background-color:#000000;}p {background-color:#000000;}div {background-color:#000000;} |
properti kedua dari background adalah background-image, properti ini menggunakan gambar untuk memberi background pada sebuah elemen. Penggunaan dari properti background-image adalah sebagai berikut :
1
| body {background-image:url('gambar.gif');} |
Pada opsi default gambar akan diulang terus sehingga background dengan gambar ini akan melatari isi dari elemen HTML. Jiga tidak ingin mengulang gambar background dan hanya ingin mengulang background secara horizontal atau vertical maka bisa kita gunakan properti background-repeat berikut contoh penggunaanya
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| /* Pengulangan gambar secara horizontal */body { background-image:url('gambar.gif'); background-repeat:repeat-x;} /* Pengulangan gambar secara vertical */body { background-image:url('gambar.png'); background-repeat:repeat-y;} /* Background tidak ada Pengulangan*/body { background-image:url('gambar.jpg'); background-repeat:no-repeat;} |
Jika ingin mengatur posisi background gambar untuk tetap berada di tempatnya atau bisa di scroll maka kita bisa menggunakan properti background-attachment. cara penggunaanya adalah dengan memberi nilai scroll, fixed, atau inherit pada background-attachment seperti contoh berikut
1
2
3
4
| body { background-image:url('gambar.png'); background-attachment:fixed;} |
Properti terakhir dari css background adalah background-position, properti ini digunakan untuk mengatur posisi gambar background apakah di atas sebelah kanan, di atas sebelah kiri, di bawah sebelah kanan, di bawah sebelah kiri dan lain sebagainya. Nilai untuk properti background-position adalah sebagai berikut : left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x% y%, xpos ypos, inherit. contoh penggunaanya adalah sebagai berikut
1
2
3
4
| body { background-image:url('gambar.png'); background-position:center top;} |
selain dengan penulisan kode pada contoh-contoh di atas untuk mempersingkat penulisan style background juga bisa seperti contoh di bawah
1
2
3
| body { body {background:#ffffff url('gambar.png') no-repeat right top;}} |
Style untuk Text
Properti CSS untuk Text dan nilai dari masing-masing properti CSS untuk text adalah sebagai berikut
| Deskripsi / Kegunaan Properti | Nilai Properti | |
|---|---|---|
| color | Mengatur warna dari text | Nilai untuk properti ini adalah warna seperti yang saya jelaskan diatas pada properti background-color |
| direction | Mengatur arah dari Text | ltr rtl |
| line-height | Mengatur jarak baris text | normal number length % |
| letter-spacing | Untuk menambah atau mengurangi jarak spasi dari karakter text | normal length |
| text-align | Mengatur alignment text dalam sebuah elemen HTML | left right center justify |
| text-decoration | Menambah dekorasi/hiasan text | none underline overline line-through blink |
| text-indent | Memberi jarak untuk baris kalimat pertama dari text yang ada dalam elemen HTML | length % |
| text-shadow | Digunakan untuk memberi bayangan pada text | none color length |
| vertical-align | Mengatur garis vertical dari suatu elemen | baseline sub super top text-top middle bottom text-bottom length % |
| white-space | Mengatur bagaimana space putih didalam elemen HTML ditampilkan | normal pre nowrap |
| word-spacing | Menambah atau mengurangi spasi antar kata | normal length |
Contoh penggunaan css pada text bisa di lihat di bawah
1
2
3
| h1 {color:#00ff00;}p.date {text-align:right;}a {text-decoration:none;} |
Bisa juga anda menggunakan beberapa variasi untuk mendekorasi tampilan heading paragraph seperti berikut:
1
2
3
4
| h1 {text-decoration:blink;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:overline;} |
- h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
- Color merupakan properti CSS
- blue adalah nilai dari properti CSS
- Setiap deklarasi atau statement CSS di buat didalam tanda kurawa { }
- Setiap properti diakhiri dengan tanda titik koma ;
Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */
1
2
3
| /* comment : membuat heading */h1 { color :blue; font-size:18px; } |
Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.
selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :
1
| <p id="parameter">ini paragraph</p> |
definisi id diatas pada CSS akan ditulis sebagai berikut :
1
2
3
4
5
6
| #parameter { text-align:center; color:red; font-size:12px; font-weight:bold;} |
Style untuk Font
Cara menuliskan style font pada CSS adalah sebagai berikut
1
2
3
4
5
6
7
| #parameter { font-size:12px; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}/*penulisan pendek */#parameter { font: normal medium bold "Trebuchet MS", Arial, Helvetica, sans-serif; } |
Properti CSS untuk font dan nilai dari masing-masing properti CSS untuk font adalah sebagai berikut
| Deskripsi / Kegunaan Properti | Nilai Properti | |
|---|---|---|
| font | Mengatur font untuk suatu elemen HTML atau keseluruhan elemen HTML | font-style font-variant font-weight font-size/line-height font-familycaption icon menu message-box small-caption status-bar inherit |
| font-family | Mendefinisikan font family (kelompok font) untuk text | family-name generic-familyinherit |
| font-size | Mengatur ukuran font | xx-small x-small small medium large x-large xx-large smaller larger length %inherit |
| font-style | Mengatur gaya dari font | normal italic oblique inherit |
| font-variant | Mengatur apakah text ingin di tampilkan secara small caps atau tidak | normal small-caps inherit |
| font-weight | Mengatur ukuran bobot dari font | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit |
Style untuk Links
Kita dapat menggunakan properti color, font, background dan sebagainmya untuk Style CSS Links. Kita bisa menggunakan varian style CSS berbeda tergantung pada situasi link tersebut misalkan gaya khusus pada saat di hover (link ditunjuk mouse), active (url link sama dengan halaman yang sedang di buka), visited (url link yang pernah dikunjungi) dan sebagainya.
dibawah ini beberapa contoh penggunaan Style CSS untuk Link
<a href="link-url"></a>
1
2
3
4
| a:link {color:#FF9900; text-decoration:none; } /* link belum di kunjungi */a:visited {color:#99FF00; text-decoration:underline; } /* link yang sudah di kunjungi*/a:hover {color:#FF0000; font-size: 20px; } /* link yang ditunjuk mouse */a:active {color:#000000; background-color:#FFF000; } /* link yang di pilih */ |
Style untuk List
Pada HTML ada dua cara dalam membuat list (daftar) yaitu dengan cara unordered lists (daftar yang ditandai dengan bulatan hitam kecil sebagai penomorannya) dan ordered lists (daftar yang ditandai dengan huruf dan angka sebagai penomorannya).
contoh penulisan list pada HTML adalah sebagai berikut
1
2
3
4
5
| <ul class="lingkaran"> <li>daftar ke-satu</li> <li>daftar ke-dua</li> <li>daftar seterusnya</li></ul> |
contoh menuliskan style untuk list pada CSS adalah sebagai berikut
1
2
3
4
| ul.lingkaran {list-style-type: circle;}ul.bulatan {list-style-type: square;}ol.hurufromawi {list-style-type: upper-roman;}ol.hurufkecil {list-style-type: lower-alpha;} |
Nilai untuk style List - unordered lists dapat dilihat pada table di bawah
| Nilai | Keterangan |
|---|---|
| none | Tidak ada penandaan |
| disc | ditandai dengan lingkar bulatan |
| circle | ditandai dengan lingkar bulatan hitam |
| square | ditandai dengan tanda persegi |
Nilai untuk style List - ordered lists dapat dilihat pada table di bawah
| Value | Description |
|---|---|
| armenian | ditandai dengan nomor Armenian |
| decimal | ditandai dengan nomor |
| decimal-leading-zero | ditandai dengan nomor dengan awalan 0 di depannya (01, 02, 03) |
| georgian | ditandai dengan nomo Georgia (an, ban, gan) |
| lower-alpha | ditandai dengan huruf abjad kecil (a, b, c, d, e) |
| lower-greek | ditandai dengan huruf yunani kecil (alpha, beta, gamma) |
| lower-latin | ditandai dengan huruf latin kecil (a, b, c, d, e) |
| lower-roman | ditandai dengan huruf romawi kecil(i, ii, iii, iv, v) |
| upper-alpha | ditandai dengan huruf abjad besar (A, B, C, D, E) |
| upper-latin | ditandai dengan huruf latin besar (A, B, C, D, E) |
| upper-roman | ditandai dengan huruf romawi besar (I, II, III, IV, V) |
Adapun property untuk Sttyle list pada CSS adalah sebagai berikut
| Keterangan | Nilai | |
|---|---|---|
| list-style | Mendeklarasikan pengaturan semua daftar properti | list-style-type list-style-position list-style-imageinherit |
| list-style-image | menggunakan image sebagai icon untuk penandaan | URL none inherit |
| list-style-position | menentukan posisi tanda pada daftar | inside outside inherit |
| list-style-type | Menentukan tanda yang akan digunakan pada daftar | none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit |
Style untuk Table
Untuk menentukan style border pada table dalam CSS kita bisa menggunakan property border, width, font dan lainnya. properti berikut ini beberapa contoh poperti yang bisa kita gunakan untuk table, tr, th, maupun td
1
2
3
4
5
6
7
8
9
10
11
12
| table.ex1 { border-collapse:collapse; width:100%;}table,th,td{ border: 1px solid black;}th,td{ height:50px; vertical-align:bottom; padding:5px;} |