CSS Dasar
CSS Menengah

CSS Text


Pada tutorial ini anda akan belajar bagaimana memanipulasi sebuah text di CSS.

Judulku

Paragraf di dalam kotak ini di manipulasi dengan menggunakan CSS text-indent,color:blue serta letter-spacing.


Text Color


Dalam CSS, sebuah warna/color dirincikan dengan :

  • Nilai HEX, seperti : "#33FF00".
  • Nilai RGB, seperti : "rgb(0,0.255)".
  • Nama warna, seperti : "blue".

Warna default dari sebuah halaman web di definisikan di body.

body{color:green;}
h2{color:red;}
p{color:#3333FF;}
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

body{color:green;}
h2{color:red;}
p{color:#3333FF;}

</style>

</head>
<body>

Teks di dalam body
<h2>Ini adalah h2</h2>
<p>Ini adalah paragraf</p>

</body>
</html>
Coba sendiri »

Berdasarkan aturan dari W3C bila anda mendifinisikan color sebuah elemen maka anda juga harus mendefinisikan background-color dari elemen tersebut.


Text Alignment

Text alignment digunakan untuk mensejajarkan barisan teks.

Teks di html bisa disejajarkan ke sebelah kanan, tengah maupun kiri.

Ketika text-align di set sebagai "justify" maka setiap baris tulisan memiliki lebar yang sama dan margin kanan dan kiri sama-sama lurus (seperti tulisan-tulisan di dalam koran dan majalah).

h1{text-align:center;}
p.tanggal{text-align:left;} /* CSS class */
p#isi{text-align:justify;}  /* CSS id */

Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

h1{text-align:center;}
p.tanggal{text-align:left;} /* CSS class */
p#isi{text-align:justify;} /* CSS id */

</style>

</head>
<body>

<h1>Judul Tulisanku</h1>
<p class="tanggal">22 juni 2012</p>
<p id="isi">Janganlah kamu pandang sama antara orang yang baik dan orang yang buruk, karena itu akan melemahkan semangat orang-orang yang suka berbuat baik dan memicu keberanian orang-orang yang berbuat jahat.</p>

<p><b>catatan : </b>resize browser anda untuk melihat bagaimana justify bekerja</p>

</body>
</html>
Coba sendiri »


Text Decoration

Text decoration umumnya digunakan untuk menghilangkan garis bawah pada link-link di dokumen HTML.

a{text-decoration:none;}
Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

a{text-decoration:none;}

</style>
</head>
<body>

Link menuju : <a href="http://www.codingku.com">www.codingku.com</a>

</body>
</html>
Coba sendiri »

contoh lain :

Codingku HTML Editori
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h3 {text-decoration:blink;}

</style>
</head>
<body>

<h1>overline</h1>
<h2>line-through</h2>
<h3>underline</h3>
<h4>blink</h4>

<p><b>catatan:</b>text decoration blink tidak didukung oleh Internet explorer, Chrome dan Safari.

</body>
</html>
Coba sendiri »



Situs ini masih dalam versi beta, artinya masih dalam proses pengembangan baik dari segi bug maupun isi yg kurang lengkap. Silahkan melihat-lihat yang sudah ada sementara ini, tiap hari kami akan berusaha untuk melengkapi kekurangannya...