Dasar-dasar CSS #3

Senin, 12 April 2010

Dasar-dasar CSS #3

Belajar CSS | Muhammad Rizki Fadillah's Blog

Sudah lama dasar-dasar CSS dan konsultasi matematika absen. Tapi yang saya akan bicarakan hari ini bukanlah konsultasi matematika, melainkan dasar-dasar CSS. Saya akan membahas tentang properti yang digunakan untuk memformat suatu teks. Sebelum membaca yang ini, saya harap anda sudah membaca dasar-dasar CSS edisi 1 dan edisi 2.

Maksudnya memformat suatu teks yaitu misalnya membuat teksnya berwarna biru atau membuat teksnya tebal. Ada beberapa properti. Yaitu:

1. color: warna dari teks. Bisa diisi dengan kode hex dari warna yang diinginkan atau memakai kata-kata (dalam bahasa inggris)
2. font-family: jenis huruf. Misalnya: Arial, Verdana, dll. atau dapat diisi dengan font generik. Contoh: Arial, Tahoma, Verdana; Trebuchet, Arial, Sans-serif, Verdana; dll.
3. font-size: ukuran huruf. Bisa diisi dengan angka dalam piksel, nilai: xx-small, x-small, small, medium, large, x-large, xx-large; atau menggunakan nilai smaller (lebih kecil) atau larger (lebih besar).
4. font-weight: ketebalan huruf. Nilainya: normal, bold, bolder, light, lighter.
5. text-transform: pengaturan huruf kapital pada teks. Nilainya: uppercase (huruf kapital semua), lowercase (huruf kecil semua), capitalize (huruf kapital pada awal setiap kata), atau none.
6. text-align: posisi perataan teks. Nilainya: left (rata kiri), center (rata tengah), right (rata kanan), atau justify (rata kiri-kanan).
7. line-height: tinggi baris. Nilainya: angka (dalam piksel atau em).
8. text-decoration: dekorasi teks. Nilainya: blink (tulisan berkedip), underline (bergaris bawah), line-through (teks tercoret), overline (garis diatas teks), atau none. Atau bisa juga digabung. Misal untuk membuat teks dengaan bergaris bawah dan berkedip maka tulisannya: underline blink.
9. text-indent: jarak teks dari garis terluar pada baris pertama. Nilainya diisi dengan angka (dalam piksel)
10. white-space: properti untuk mengatur tampilan spasi. Maksudnya, pada kode HTML biasa, kita tidak bisa menuliskan spasi lebih dari satu kali. Misalnya kita ketikkan Teks contoh. (dengan 5 spasi) maka yang tampil hanya Teks contoh. (dengan 1 spasi). Kita bisa mengakalinya dengan menggunakan tag <pre> dan </pre> atau menggunakan kode   sebagai pengganti spasi. Nah, anda juga bisa menggunakan properti ini. Nilainya: pre (untuk menampilkan spasi) atau normal.
11. letter-spacing: jarak antarhuruf. Nilainya dapat diisi dengan angka (dalam satuan piksel).
12. word-spacing: jarak antarkata. Nilainya sama dengan letter-spacing, dapat diisi dengan angka dalam satuan piksel.

Buka Notepad lalu ketikkan seperti berikut.

<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">

</style>
</head>
<body>
<div class="color">
Warnanya akan berwarna abu-abu
</div>
<div class="font-family">
Hurufnya akan menggunakan font "Arial, Tahoma dan Verdana"
</div>
<div class="font-size">
Huruf ini akan berukuran 24 piksel
</div>
<div class="font-weight">
Hurufnya akan menjadi tebal
</div>
<div class="text-transform">
Teksnya akan menjadi huruf kapital semua
</div>
<div class="text-align">
Teksnya akan menjadi rata tengah.<br/>
Lihat kan???
</div>
<div class="line-height">
Coba apa yang terjadi jika saya menggunakan properti line-height ini.<br/>
Oh... ternyata pada masing-masing baris akan diberi jarak sela sebesar 1,5 em.
</div>
<div class="text-decoration">
Teks ini akan berkedip-kedip bikin pusing mata. Hehehe...
</div>
<div class="text-indent">
Pada teks ini akan mempunyai text indent sebesar 12 piksel.
</div>
<div class="white-space">
Di Kode HTML kita tidak bisa memberikan spasi lebih dari satu kali.<br/>
kecuali dengan menggunakan properti white-space ini. Hehehe...
</div>
<div class="letter-spacing">
Spasi antarhuruf pada teks ini akan berjarak 1,5 piksel
</div>
<div class="word-spacing">
Spasi antarkata pada teks ini akan berjarak 2 piksel
</div>
</body>
</html>

Lalu simpan dengan nama apa saja, asalkan berekstensi .html (misal: belajarcss.html). Lalu pilih bagian Save as type, lalu ganti dengan All Files. Lalu klik Save.

Lalu buka file yang telah anda buat. Kira-kira hasilnya seperti ini (klik gambar untuk melihat lebih jelas).

Sekian pembahasan kali ini. Apabila ada kekurangan mohon maaf. Terima kasih.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

8 komentar:

I. mengatakan...: kk, bisa tolong ga, aku pingin ngebuat supaya blog ku bisa kaya facebook, misal pas aku buka dari opera mini, buka www.facebook.com trus masuknya ke m.facebook.com. Tapi pas dibuka dari komputer kan tetep ke www.facebook.com. Aku coba buka di http://detectmobilebrowsers.mobi/ trus uda ngikutin function generator nya, cuman yang aku bingung, caranya masukin ke blog aku gimana? disitu ditulis "Use this function to detect mobile handsets as set by the conditions above" cuma aku ga ngerti. bisa dikasih tau ga langkah2nya yang detail biar bisa dimasukkin dan bisa aktif ??? soalnya aku masih amatiran dan ga terlalu ngerti. kirim e-mail juga gpp ko, di tesdulu@mail.com

makasih kk; 12 April 2010 pukul 16.23
Rizki mengatakan...: @I., nggak ngerti. Nggak pernah coba sih... maaf yah...; 12 April 2010 pukul 21.43
belajar internet mengatakan...: mantap gan,,,perlu banyak belajar dari sini nih !!!
thanks infonya; 13 April 2010 pukul 09.14
Muhammad Chandra mengatakan...: mantab sob; 13 April 2010 pukul 21.36
Beben Koben mengatakan...: wah...sdh mulai membahas CSS3 juga nih
sip sip; 14 April 2010 pukul 19.06
Rizki mengatakan...: @beben, bukan dasar-dasar CSS 3. Tapi dasar-dasar CSS bagian 3. CSS-nya sih masih css yg biasa.; 15 April 2010 pukul 07.06
tony mengatakan...: thx bwt pencerahannya gan; 27 Juli 2010 pukul 20.19
poker mengatakan...: poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya; 15 September 2016 pukul 22.53

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.

Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]

:-))

:-)

:-D

(lol)

:-p

(woot)

;-)

:-o

X-(

:-(

:'-(

:-&

(K)

(angry)

(annoyed)

(wave) | (bye)

B-)

(cozy)

(sick)

(goodluck)

(griltongue)

(mmm)

(hungry)

(music)

(tears)

(tongue)

(unsure)

(highfive)

(dance)

(blush)

(bigeyes)

(funkydance)

(idiot)

(lonely)

(scenic)

(hassle)

(panic)

(okok)

(yahoo)

(cry)

(doh)

(brokenheart)

(drinking)

(girlkiss)

(rofl)

(money)

(rock)

(nottalking)

(party)

(sleeping)

(thinking)

(bringit)

(worship)

(applause)

8-)

(gym)

(heart)

(devil)

(lmao)

(banana_cool)

(banana_rock)

(evilgrin)

(headspin)

(heart_beat)

(ninja)

(haha)

(evilsmirk)

(eyeroll)

(muhaha)

(taser) | (rammi)

(banana_ninja)

(beer)

(coffee)

(fish_hit)

(muscle)

(smileydance)

(fireworks)

(goal)

(bzzz)

(dance_bzz)

(Русский)

(code)

(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)