CSS Text

AW - CSS Text - Semoga sampai di sini Anda semakin faham. Oke pada lanjutan 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>


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>

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>

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>

Selamat Belajar

0 komentar: