Belajar CSS Part 12 - Text

Text Color

Properti color digunakan untuk mengatur warna teks. Warna bisa ditentukan dengan menggunakan:

nama - menentukan warna menggunakan nama warna, seperti "blue" untuk warna biru.
RGB - menentukan warna menggunakan nilai RGB, seperti "rgb (0,0,255)"
Hex - menentukan warna menggunakan nilai hex, seperti "#0000ff"

Contoh

body {
    color: blue;
}

h1 {
    color: green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<p> Ini adalah paragraf biasa. Perhatikan bahwa teks ini berwarna biru. Warna teks default untuk halaman diatur dalam selector body pada CSS. </ P>

</body>
</html>

Hasilnya:

Text Alignment

Properti text-align digunakan untuk mengatur perataan, jajaran atau keselarasan teks secara horizontal. Dengan menggunakan properti text-align, kita bisa mengatur perataan teks, seperti rata kiri, kanan, tengah, atau rata kiri-kanan.

Contoh berikut menunjukkan teks rata tengah, dan juga teks rata kiri dan kanan (perataan kiri adalah default jika arah teks dari kiri ke kanan, dan perataan kanan adalah default jika arah teks dari kanan ke kiri).

Contoh

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Heading 1 (rata tengah)</h1>
<h2>Heading 2 (rata kiri)</h2>
<h3>Heading 3 (rata kanan)</h3>

<p>Ketiga heading di atas memiliki perataan teks, yaitu rata tengah, rata, kiri, dan rata kanan</p>

</body>
</html>

Hasilnya:

Ketika properti text-align diatur ke "justify", setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan rata (seperti di majalah dan koran):

Contoh

div {
    border: 1px solid black;
    padding: 10px;
    width: 200px;
    height: 300px;
    text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Contoh penggunaan text-align: justify;</h1>

<p>Apabila text-align diatur ke "justify", setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan rata (seperti di majalah dan koran)</p>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

Hasilnya:

Text Decoration

Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks. Value text-decoration biasanya digunakan untuk menghilangkan atau menghapus garis bawah dari link.

Contoh

a {
    text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Ini adalah sebuah link tanpa garis bawah (underline): <a href="https://king-octahasan.blogspot.com">king-octahasan</a></p>

</body>
</html>

Hasilnya:

Fungsi lain dari properti text-decoration adalah digunakan untuk menghias teks.

Contoh

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>

</body>
</html>

Hasilnya:

Catatan: Hal ini tidak dianjurkan untuk menggarisbawahi teks yang bukan link, karena bisa membingungkan pembaca teks tersebut.

Text Transformation

Properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Hal ini dapat memudahkan kita untuk mengubah semua huruf menjadi huruf besar atau huruf kecil, ataupun digunakan hanya pada huruf pertama dari setiap kata.

Contoh

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="uppercase">Ini adalah sebuah teks</p>
<p class="lowercase">Ini adalah sebuah teks</p>
<p class="capitalize">Ini adalah sebuah teks</p>

</body>
</html>

Hasilnya:

Teks Indentation

Properti text-indent digunakan untuk menentukan indentasi baris pertama dari teks.

Contoh

p {
    text-indent: 50px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Hasilnya:

Letter Spacing

Properti letter-spacing digunakan untuk menentukan ruang antara karakter dalam teks.

Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara karakter.

Contoh

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

</body>
</html>

Hasilnya:

Line Height

Properti line-height digunakan untuk menentukan ruang antara baris.

Contoh

p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>
Ini adalah sebuah paragraf dengan line-height default.<br>
Ketinggian baris default di sebagian besar browser adalah sekitar 110% hingga 120%.<br>
</p>

<p class="small">
Ini adalah sebuah paragraf dengan sebuah line-height kecil.<br>
Ini adalah sebuah paragraf dengan sebuah line-height kecil.<br>
</p>

<p class="big">
Ini adalah sebuah paragraf dengan sebuah line-height besar.<br>
Ini adalah sebuah paragraf dengan sebuah line-height besar.<br>
</p>

</body>
</html>

Hasilnya:

Text Direction

Properti direction digunakan untuk mengubah arah teks dari sebuah elemen.

Contoh

p.contoh1 {
    direction: rtl;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Ini adalah text direction default.</p>
<p class="contoh1"><bdo dir="rtl">Ini adalah text direction dari kanan-ke-kiri.</bdo></p>

</body>
</html>

Hasilnya:

Word Spacing

Properti word-spacing digunakan untuk menentukan ruang antara kata-kata dalam sebuah teks.

Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara kata-kata.

Contoh

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

</body>
</html>

Hasilnya:

Text Shadow

Properti text-shadow digunakan untuk menambahkan bayangan pada teks.

Contoh berikut menentukan posisi bayangan horizontal (3px), posisi bayangan vertikal (2px) dan warna bayangan (biru):

Contoh

h1 {
    text-shadow: 3px 2px red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Efek text-shadow</h1>
<p><b>Catatan:</b> Internet Explorer 9 (dan versi sebelumnya) tidak mendukung properti text-shadow.</p>

</body>
</html>

Hasilnya: