Dasar-dasar CSS #3

Dasar-dasar CSS #3
Di Posting Oleh : Admin
Kategori : Tutorial Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog
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 &nbsp; 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">
<!--
.color{color:#CCCCCC;}
.font-family{font-family:Arial Tahoma Verdana;}
.font-size{font-size:24px;}
.font-weight{font-weight:bold;}
.text-transform{text-transform:uppercase;}
.text-align{text-align:center;}
.line-height{line-height:1.5em;}
.text-decoration{text-decoration:blink;}
.text-indent{text-indent:12px;}
.white-space{white-space:pre;}
.letter-spacing{letter-spacing:1.5px;}
.word-spacing{word-spacing:2px;}
-->
</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).
Belajar CSS
Sekian pembahasan kali ini. Apabila ada kekurangan mohon maaf. Terima kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Habisnya Era Media Cetak, dan Selamat Datang Era Media Elektronik?

Saya berjalan-jalan di sebuah toko buku dan bertanya "Dimana ya Majalah FourFourTwo?". Seorang perempuan menjawab "FourFourTwo sudah tidak terbit lagi". Saya pun terkaget. Majalah seperti itu sudah tidak terbit lagi? Seminggu sebelumnya saya hendak membeli tabloid Soccer, dan saya bertanya kepada si penjual. "Soccer?" Kata si penjual: "Succer udah nggak terbit lagi mas". Saya terkejut. Setahu saya Tabloid Socecer mempunyai basis penggemar yang masif dan pelanggan yang lumayan banyak, kok bisa-bisanya berhenti terbit? Karena penasaran setelah kejadian FourFourTwo saya buka mbah google. Ternyata benar, kedua media yang membahas sepakbola (ya, saya memang penggemar sepakbola) tersebut sudah berhenti terbit. Kalau Fourfourtwo berubah menjadi portal berita online (cek di http://fourfourtwo.com), situs Duniasoccer (http://duniasoccer.com) malah sudah tutup. Memang ini salah saya juga, saking sibuknya di dunia nyata, mungkin sampai tidak tahu bahwa kedu...
Baca selengkapnya

Review Hotel.co.id Situs Cari Hotel Murah Terbaik Di Indonesia

Gambar
Cari info mengenai hotel murah dan terbaik penting untuk yang kerap melancong dan tidak ada rumah rekan atau keluarga untuk tempat bermalam sesaat. Untuk dipahami, sekarang ini cari hotel paling dekat sangat gampang karena ada hotel.co.id situs cari hotel murah terbaik. Saat kamu sedang melancong dan harus tinggal beberapa saat pada sebuah wilayah yang didatangi sudah tentu yang dicari ialah hotel untuk tempat bermalam. Tapi, saat sebelum berkunjung sebuah hotel untuk bermalam, kemungkinan kamu dapat cari info berkaitan hotel yang hendak kamu datangi untuk bermalam. Info yang diperlukan minimal berkenaan harga dan kwalitasnya. Lalu, bagaimanakah cara ketahui info berkaitan mengenai hotel yang hendak kamu datangi? Adakah service yang sediakan info mengenai hotel selengkapnya? Sudah pasti ada, namanya ialah Hotel.co.id Nach, apa kamu ingin tahu seperti apakah feature dan kelebihan basis ini sebagai situs pencarian hotel paling murah dan terbaik . Untuk ketahui jawabnya, baca info secara ...
Baca selengkapnya

Logika Matematika - Part 4

Agak lama updatenya ya? Dan sayajuga mengucapkan selamat kepada Timna Jerman yang berhasil menjuarai Piala Dunia 2014 (buset udah telat banget) Untuk melihat eidsi yang sebelumnya: Logika Matematika - Part 1 Logika Matematika - Part 2 Logika Matematika - Part 3 Pada edisi keempat sekaligus terakhir ini akan dibahas meengenai penarikan kesimpulan. Ada 3 cara penarikan kesimpulan dalam logika matematika, yaitu: 1. Modus Ponens Jika diketahui premis p → q dan diketahui premis p, maka kesimpulannya adalah q Contoh: Diketahui: Jika hari ini hari senin maka disekolah ada upacara bendera. Dan juga diketahui: Hari ini hari senin. Maka kesimpulannya: Disekolah ada upacara bendera. 2. Modus Tollens Jika diketahui premis p → q dan diketahui premis ~q (ingkaran q), maka kesimpulannya adalah ~p Ini sesuai dengan sifat kontraposisi yang senilai dengan implikasi (Lihat Part 2) Contoh: Diketahui: Jika hari ini cerah maka jalanan akan macet. Dan juga diketahui: Jalanan tidak macet. Maka kesimpulannya: ...
Baca selengkapnya