18%
25%
50%
75%

Kripkorn Studios | Komuniti Drupal phpBB Malaysia

Tulisan

Tutorial
CSS Tentang artikel ini
Penulis: kripkorn -- Oct 19, 2008
kemas kini Kemas kini: Apr 18, 2012

Mewarnakan tulisan

Anda boleh mewarnakan tulisan anda dengan menggunakan property color. Value bagi property itu boleh dalam nilai RBG,HEX ataupun Kod Warna. Contohnya seperti berikut : 

h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}

Bagi membuat latar belakang untuk tulisan pula, penggunaan property background-color boleh digunakan. Contohnya penuh seperti berikut: 

<html>
<head>
<style type="text/css">
  span.highlight
  {
  background-color:yellow
  }
</style>
</head>

<body>
<p>
<span class="highlight">Latar belakang tulisan ini berwarna kuning</span>
Latar belakang tulisan ini tidak berwarna <span class="highlight">Diwarnakan kuning juga.</span>
</p>
</body>
</html>

Jarak

Bagi menetapkan jarak diantara huruf, property letter-spacing boleh digunakan, value bagi property ini dinyatakan dalam nilai px atau cm. Contohnya seperti berikut: 

h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}

Bagi jarak diantara baris pula, penggunaan property line-height boleh digunakan. Value bagi property ini dinyatakan dalam nilai px atau %. Contohnya seperti berikut: 

p.small {line-height: 10px}
p.big {line-height: 200%}

Susunan tulisan

Anda boleh menyusun kedudukan tulisan anda dengan menggunakan property text-align. Terdapat 5 value bagi property text-align iaitu : left, center,right,inherit dan juga justify. Contohnya seperti berikut: 

h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

Mengubahsuai tulisan

Property text-decoration digunakan untuk mengubah suai tulisan seperti underline,italic.Contohnya seperti berikut: 

h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}

Indent

Cara membuat indent adalah seperti berikut dengan menggunakan property text-indent. Value boleh nyatakan dalam px atau cm. 

p {text-indent: 1cm}

Mengubah huruf

Property text-transform, mengubah tulisan anda untuk menjadi kesemua huruf besar, huruf kecil atau pun huruf besar pada permulaan perkataan. Value bagi property ini ialah, lowercase,uppercase dan capitalize. Contohnya seperti berikut : 

p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
mad