-->

Iklan bawah header

Belajar CSS : Mengatur Format Text dengan CSS

Format text

Pada pembahasan mengenai mengatur format text dengan CSS ini akan dijelaskan tentang bagaimana penggunaan css dalam mengatur atau memodifikasi teks.

Terdapat beberapa property CSS yang bisa digunakan untuk memanipulasi dari format text, diantaranya adalah color, aligment, decoration, transformation, identation, letter-spacing, line-height, text-direction, word spacing dan text shadow.

Mengatur Format Text dengan CSS

Text Color

Property color digunakan untuk mengatur warna yang digunakan pada teks, beberapa satuan warna yang bisa digunakan untuk menentukan warnanya seperti :

  • Dengan menuliskan nama warnanya langsung, seperti "blue", "red"
  • Dengan menggunakan kode HEX, seperti "#ff0000"
  • Dengan menggunakan kode RGB, seperti "rgb(255.0.0)

Contohnya bisa kalian lihat dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Font Color</title>
<style type="text/css">
p.contoh1{
	color:red;
}
p.contoh2{
	color:green;
}
</style>
</head>
<body>
<p class="contoh1">Ini adalah Paragraf Satu</p>
<p class="contoh2">Ini adalah Paragraf Dua</p>
</body>
</html>
Text color

Text Alignment

text-align digunakan untuk mengatur posisi dari teks yang akan ditampilkan di browser, ada 4 value yang bisa digunakan yaitu right, left, center dan justify. Untuk contoh penggunaannya bisa kalian perhatikan pada contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<style>
h1.satu {
    text-align: left; 
}

h1.dua {
    text-align: center;
}

h1.tiga {
    text-align: right;
}
p{
	text-align: justify;
	width: 500px;
	height: 300px;
	border:solid 1px black;
}
</style>
</head>
<body>

<h1 class="satu">Heading 1 (center)</h1>
<h1 class="dua">Heading 2 (left)</h1>
<h1 class="tiga">Heading 3 (right)</h1>

<p>Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf </p>

</body>
</html>
Text alignment

Text Decoration

Property text-decoration digunakan untuk membuat sebuah dekorasi pada teks, misalnya kita ingin membuat teks tercoret atau membuat garis bawah pada teks, maka kita bisa membuatnya dengan menggunakan property text-decoration. Untuk penggunaanya, perhatikan contoh berikut ini :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		a.satu
		{
			text-decoration: none;
		}
		h1 
		{
		    text-decoration: overline;
		}

		h2 
		{
		    text-decoration: line-through;
		}

		h3 
		{
		    text-decoration: underline;
		}
	</style>
</head>
<body>
<a class="satu" href="http://google.com">Google</a>
<br/>
<a href="http://facebook.com">Facebook</a>
<h1>Ini adalah Heading 1</h1>
<h2>Ini adalah Heading 2</h2>
<h3>Ini adalah Heading 3</h3>
</body>
</html>
Text decoration

Text Transformation

Property text-transform digunakan untuk merubah besar kecilnya huruf, terdapat 3 nilai yang bisa digunakan yaitu uppercase, lowercase dan capitalize. Berikut contohnya :

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

p.dua {
    text-transform: lowercase;
}

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

<p class="satu">Ini adalah paragraf Pertama</p>
<p class="dua">INI ADALAH PARAGRAF KEDUA</p>
<p class="tiga">Ini adalah paragraf Ketiga</p>

</body>
</html>
Text transform

Text Indent

text-indent digunakan untuk membuat awalan dari paragraf agar menjorok ke dalam atau ke kanan, kita bisa menggunakan value ukuran dalam satuan px. Perhatikan contoh berikut :

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

<p>Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf </p>

</body>
</html>
text indent

Letter Spacing

Property letter-spacing digunakan untuk mengatur jarak antar huruf, jadi bisa kalian atur setiap hurufnya lebih renggang atau lebih rapat, perhatikan contoh berikut :

<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
    letter-spacing: -3px;
}
p.dua {
    letter-spacing: 5px;
}
p.tiga {
    letter-spacing: 10px;
}
</style>
</head>
<body>
<p class="satu"> Ini adalah paragraf pertama </p>
<p class="dua"> Ini adalah paragraf kedua </p>
<p class="tiga"> Ini adalah paragraf ketiga </p>

</body>
</html>
Letter spacing

Line Height

Property line-height digunakan untuk mengatur jarak antara baris satu dan baris berikutnya pada sebuah paragraf, perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
    line-height: 0.5;
}

p.dua {
    line-height: 2;
}
</style>
</head>
<body>

<p>
Ini adalah paragraf 1 Ini adalah paragraf 1 Ini adalah paragraf 1 <br>
Ini adalah paragraf 1 Ini adalah paragraf 1 Ini adalah paragraf 1 <br>
</p>

<p class="satu">
Ini adalah paragraf 2 Ini adalah paragraf 2 Ini adalah paragraf 2 <br>
Ini adalah paragraf 2 Ini adalah paragraf 2 Ini adalah paragraf 2 <br>
</p>

<p class="dua">
Ini adalah paragraf 3 Ini adalah paragraf 3 Ini adalah paragraf 3 <br>
Ini adalah paragraf 3 Ini adalah paragraf 3 Ini adalah paragraf 3 <br>
</p>
</body>
</html>
line height

Text Direction

Property direction digunakan untuk direction sebuah teks, paragraf normalnya dituliskan dari kiri ke kanan, tapi dengan menggunakan property ini maka seperti tulisan arab ditampilkan dari kanan ke kiri, agar lebih jelas perhatikan contoh berikut ini :

<!DOCTYPE html>
<html>
<head>
<style>
p.dua {
    direction: rtl;
}
</style>
</head>
<body>

<p>Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 </p>
<p class="dua"><bdo dir="rtl">Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1</bdo></p>
</body>
</html>
text direction

Word Spacing

Property word-spacing digunakan untuk mengatur jarak antar kata, perhatikan contoh berikut :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
</style>
</head>
<body>

<h1>Ini Heading 1 Ini Heading 1 Ini Heading 1 </h1>
<h2>Ini Heading 2 Ini Heading 2 Ini Heading 2 </h2>

</body>
</html>
word spacing

Text Shadow

text-shadow digunakan untuk membuat efek bayangan pada teks, perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow</h1>
</body>
</html>
text shadow

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel