Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Mengenal dan Belajar CSS Text

Mengenal dan Belajar CSS Text - Pada pembahasan CSS text ini akan membicarakan beberapa properti CSS yang berkaitan dengan teks. Meliputi text color, text alignment, text decoration, text transformation, dan text indentation. Masing-masing akan kita bahas satu per satu. Jika kamu baru kenal CSS, ada baiknya untuk Mengenal Syntax Kode CSS terlebih dahulu.

Macam-macam Properti pada CSS Text


1. Text Color


Properti text-color ini digunakan untuk mengatur warna dari suatu text. Dalam bahasa CSS, warna didefinisikan dengan 3 cara penulisan; HEX value, RGB value, dan Color Name.

HEX value adalah cara mendefinisikan warna dalam CSS dengan kode warna yang diawali tanda pagar (#), misal untuk mendefinisikan warna hitam maka ditulis #000000. Sedangkan RGB value ini penulisan kode warna dengan rgb, misal untuk warna biru ditulis rgb(0,0,255). Kemudian Color name, cara mendefinisikan warna dengan langsung menuliskan nama warnanya dalam bahasa inggris, misal untuk warna merah ditulis "red".

Contoh Penerapan Text Color pada CSS


<!DOCTYPE html>
<html>
<head>
<style>
body {
    color: red;
}

h1 {
    color: #00ff00;
}

p.lagi {
    color: rgb(0,0,255);
}
</style>
</head>
<body>

<h1>Ini Heading 1 Berwarna Hijau</h1>
<p>Saya berwarna merah. Karena ini adalah area body. Kamu bisa mengganti dengan warna sesuai selera.</p>
<p class="lagi">Ini paragraf dengan class="lagi". Berwarna biru. </p>

</body>
</html>

Hasil dari kode tersebut adalah seperti berikut :

belajar css text

2. Text Alignment


Properti text-align digunakan untuk mengatur posisi horizontal suatu teks. Apakah teks akan dibuat rata kiri (left), rata kanan (right), rata tengah (center), atau sama rata (justify). Kita pasti sudah sangat familiar dengan text alignment ini yang biasa kita jumpai di Microsoft Word. Bagaimana penerapannya dalam CSS?

Contoh penggunaanya seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

p.tanggal {
    text-align: right;
}

p.konten {
    text-align: justify;
}
</style>
</head>
<body>

<h1>Contoh Penggunaan CSS text-align</h1>
<p class="tanggal">May, 2015</p>
<p class="konten">Paragraf ini contoh dari salah satu bentuk text-align. Paragraf ini menggunakan text-align justify, yang berarti sama rata kanan dan kiri. Kamu bisa merubah jenis text-align sesuai kebutuhan. Kanan, kiri, tengah, semuanya oke. Perhatikan hasilnya.</p>

</body>
</html>

maka hasilnya :

belajar css text

3. Text Decoration


Properti text-decoration ini berfungsi untuk menghiasi text. Ada tiga bentuk text-decoration yang sering kita jumpai, yaitu; overline (garis di atas teks), line through (garis di tengah teks seperti dicoret), dan underline (garis bawah). Akan tetapi, fungsi text-decoration ini lebih sering digunakan untuk menghapus underline dari suatu link.

Contoh penggunaannya dalam CSS seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
a {
    text-decoration: none;
}
</style>
</head>
<body>

<h1>Aku adalah heading 1</h1>
<h2>Aku adalah heading 2</h2>
<h3>Aku adalah heading 3</h3>
<p>Ini link: <a href="http://sinahu-coding.blogspot.com">Sinahu Coding</a></p>

</body>
</html>

maka hasilnya :

belajar css text

4. Text Transformation


Sedangkan properti text-transform ini digunakan untuk mengatur besar kecilnya suatu huruf. Ini juga pasti sudah familiar kita kenal dalam word, ada uppercase, lowercase, dan capitalize. Uppercase untuk menampilkan huruf menjadi kapital semua, lowercase untuk menampilkan huruf menjadi kecil semua, dan capitalize untuk mengatur huruf kapital di setiap awal kata.

contoh penggunaannya :


<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">huruf gede semua</p>
<p class="lowercase">huruf kecil semua</p>
<p class="capitalize">huruf gede di awal kata</p>

</body>
</html>

dan hasilnya seperti ini :

belajar css text

5. Text Indentation


Kemudian yang terakhir adalah text-indent. Digunakan untuk mengatur jarak baris pertama pada suatu paragraf. Text indent ini kalau dalam Microsoft Word terletak pada panel yang bentuknya seperti penggaris yang bisa kita geser sesuai keinginan. Pada CSS, kita menentukkan jaraknya dalam ukuran pixel.

Perhatikan contoh penggunaannya berikut ini :


<!DOCTYPE html>
<html>
<head>
<style>
p {
    text-indent: 50px;
}
</style>
</head>
<body>

<p>Ini contoh paragraf dengan besar text-indent 50px. Artinya, setiap baris awal paragraf baru akan dimulai dengan jarak 50 pixel. Kamu bisa merubah besar kecilnya jarak sesuai selera dengan mengganti angka 50 tadi. Inilah yang disebut dengan text-indent. Semoga bermanfaat.</p>

</body>
</html>

maka hasilnya :

belajar css text


Nah, itulah pembahasan sinahu coding kali ini seputar belajar CSS text. Semoga mudah dipahami dan mudah dipraktekkan. Jika ada yang masih tidak jelas, jangan sungkan untuk mendiskusikannya di kolom komentar.



0 Komentar untuk "Mengenal dan Belajar CSS Text"

Back To Top