2
CSS Tutorial rosihanari.net Mengatur Jarak Spasi Antar Text 32 Mengatur Jarak Spasi Antar Text Perhatikan contoh tampilan berikut ini: Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak tersebut diatur dengan menggunakan properti sbb: word-spacing : jarak; letter-spacing : jarak; Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang kedua untuk mengatur jarak antar huruf. Sebagai contoh, berikut ini code yang menghasilkan tampilan di atas. <!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">

Css tutorial-13

Embed Size (px)

Citation preview

Page 1: Css tutorial-13

CSS Tutorial rosihanari.net

Mengatur Jarak Spasi Antar Text 32

Mengatur Jarak Spasi Antar Text Perhatikan contoh tampilan berikut ini:

Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak tersebut diatur dengan menggunakan properti sbb: word-spacing : jarak; letter-spacing : jarak;

Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang kedua untuk mengatur jarak antar huruf. Sebagai contoh, berikut ini code yang menghasilkan tampilan di atas. <!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">

Page 2: Css tutorial-13

CSS Tutorial rosihanari.net

Mengatur Jarak Spasi Antar Text 33

h1 { word-spacing: 20px; letter-spacing: 15px; } </style> </head> <body> <h1>Ini Judul Heading</h1> <p>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>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> </body> </html>