Blog Pintasku: Belajar Styling Text Dalam CSS

Pada Tutorial Belajar CSS kali ini kita akan Belajar Styling Text Dalam CSS, Penggunaan styling text ini sering sekali digunakan ketika membuat sebuah halaman web. dimana nantinya styling ini akan membuat tulisan kita lebih bergaya dan bisa lebih enak di lihat.

Styling Text Dalam CSS ini berupa, pewarnaan text, mengatur tata letak tulisan baik itu mau rata tengah, rata kiri, atau rata kanan, dan lain lain.

1. Membuat Text Berwarna

Untuk membuat sebuah text berwarna di dalam CSS kita hanya perlu menggunakan property color, dan sebuah value (nilai) yang berisikan warna tersebut. Nahh untuk memberikan nilai warna di dalam CSS itu memiliki cara tersendiri, untuk lebih jelasnya silahkan baca Tutorial sebelumnya mengenai Memahami Penulisan Warna Dalam CSS

Berikut ini adalah contoh Pewarnaan Text Di Dalam CSS.

body {
    color: blue;
}

h1 {
    color: #00ff00;
}

p {
    color: rgb(255,0,0);
}

2. Membuat Perataan Tulisan

Nahh untuk membuat tulisan rata kiri, tengah, dan kanan itu kalau bahasa kerennya itu Text Aligment. dimana property yang digunakan itu align dan memiliki 3 jenis value, yaitu :

left
right
center

Supaya bisa lebih mengerti berikut adalah contoh penggunaan Property Align di dalam sebuah halaman HTML.

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

p.tanggal {
    text-align: right;
}

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

<h1>Belajar Text Alignment</h1>
<p class="tanggal">April, 2015</p>
<p class="main">Pada Tutorial Kali ini belajar Tentang Styling Text</p>

</body>
</html>

3. Dekorasi Tulisan ( Text Decoration )

Text Decoration ini berfungsi untuk membuat efek seperti tulisan tercoret, bergaris bawah, bergaris atas dan bahkan bisa membuat tulisan yang awalnya berdekorasi menjadi tidak. Biasanya Property ini digunakan untuk link aktif. Berikut ini adalah contoh kode property untuk Text Decoration.

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
h4 {
    text-decoration: none;
}

4. Text Tranformation

Property Text Transformation ini digunakan untuk mengatur bentuk huruf, seperti tulisan menjadi huruf kapital, besar kecilnya sebuah tulisan.

Penggunaan Property Text Transformation ini sangatlah penting di dalam mengolah sebuah artikel karena penggunaan huruf besar dan kecil pada sebuah kalimat itu berpengaruh, Berikut ini adalah kode CSS property Text Transformation.

H1 {
    text-transform: uppercase;
}

p {
    text-transform: lowercase;
}
h2 {
    text-transform: capitalize;
}

5. Text Identation

Property Text Identation ini berfungsi untuk membuat jarak pada baris pertama sebuah paragraf, jika di dalam software pengolah kata kita sering menggunakan tombol Tab untuk membuat jarak indensitas ini. Nahh jika di dalam CSS kita menggunakan satuan jarak untuk mengaturnya, berikut ini adalah contoh kode CSSnya.

p {
    text-indent: 50px;
}

Tetapi jika di dalam sebuah dokumen HTML berikut ini contoh Kodenya.

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

<p>CSS merupakan kepanjangan dari Cascading Style Sheet yaitu salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.</p>

</body>
</html>

Nahh sekian Tutorial Belajar CSS mengenai Styling Text, semoga tutorial ini bisa membantu sobat dalam belajar CSS. Terimakasih.

Belajar Styling Text Dalam CSS

1. Membuat Text Berwarna

2. Membuat Perataan Tulisan

3. Dekorasi Tulisan ( Text Decoration )

4. Text Tranformation

5. Text Identation

No comments:

Post a Comment

Mengenai Saya