Alignment text dengan CSS

July 23, 2018
Kali ini kita akan membahas perataan text (alignment).
Ada pula di antara nya adalah seperti left, center, right dan justify.
Sintak nya :
text-align : jenis;

dengan value jenis dapat digantikan dengan left, center, right dan justify.
Contoh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
#p1 { 
 text-align : center; 
 } 
#p2 { 
 text-align : justify; 
 } 
#p3 { 
 text-align : right; 
 } 
 
</style> 
</head> 
<body> 
<h1>Ini Judul Heading</h1> 
<p id="p1">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah 
paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah 
paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah 
paragraf 1. Ini adalah paragraf 1. </p> 
<p id="p2">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah 
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah 
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah 
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
<p id="p3">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah 
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah 
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> 
</body> 
</html>
Maka hasilnya :
Jenis perataan yang digunakan pada contoh di atas adalah rata tengah untuk paragraf pertama, rata kanan kiri (justify) untuk paragraf kedua dan rata kanan untuk paragraf ketiga.

Selanjutnya kita akan membahas tentang cara mengubah text case.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Wickey

Author:

Facebook Comment

Inside Post