Post another
Loading...
Saturday 5 September 2015

Cara Pemformatan Text Dengan CSS

08:59
Dengan menggunakan CSS kita bisa melakukan pemformatan menambah spasi pada kata, menambah spasi pada huruf, membuat huruf besar pada awal kata, menetapkan huruf besar dan kecil, membuat teks berkedip, menyelaraskan aligmen dll.

Warna Text
memberi warna sama halnya memberi warna latar belakang atau background yaitu :
  • Dengan Nilai Hexadesimal = "#0000FF"
  • Dengan Nilai RGB = "rgb(0,0,255)"
  • Dengan Nama warna = "Blue"
kalian bisa melihat kode hexadesimal dan nama warna untuk lebih lengkapnya
Contoh memberi warna pada text :
<head>
<style type="text/css">
  body{color:blue;}
  h1{color:#FF0000;}
  p.cth{color:rgb(0,255,0);}
</style>
<body>
<h1>Cara Pemformatan Text</h1>
<p>paragraf ini berwarna biru karna sudah di format oleh css jika text yang berada di dalam body pasti akan berwarna biru</p>
<p class="cth">sedangkan paragraf ini yang menggunakan Class="cth" ditampilkan berwarna hijau</p>
</body>
Hasilnya :

Cara Pemformatan Text

paragraf ini berwarna biru karna sudah di format oleh css jika text yang berada di dalam body pasti akan berwarna biru
sedangkan paragraf ini yang menggunakan Class="cth" ditampilkan berwarna hijau


Text Alignment
properti text-alignment digunakan untuk mengatur perataan pada posisi horizontal, text dapat di atur mejadi rata tengah(center), rata kiri(life) rata kanan(right), atau rata kiri dan kanan(justify)
Contoh mengatur perataan posisi kaliamt :
<head>
<style type="text/css">
  h1{text-align:center;}
  p.auchor{text-align:right;}
  p.para1{text-align:justify;}
</style>
<body>
<h1>Larangan Memanjangkan Kuku</h1>
<p class="auchor">Rizal Gemilang, 12:04</p>
<p class="para1">Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi 
perkara fitrah , memotong kuku termasuk salah satu perkara fitrah.Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima :</p>
<p>Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting 
kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)</p>
</body>
Hasilnya :

Larangan Memanjangkan Kuku

Rizal Gemilang, 12:04
Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi perkara fitrah , memotong kuku termasuk salah satu perkara fitrah.Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima :
Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)


Text Decoration
properti text-decoration digunakan untuk membuat atau menghapus dekorasi teh, salah satu contohnya adalah menghapus garis bawah pada link.
Contoh menghilangkan garis bawah pada link :
<head>
<style type="text/css">
  a{text-decoration:none;}
</style>
<body>
<p>link to : <a href="http://rampesteam.blogspot.co.id/">Rampes Team</a></p>
</body>
Hasilnya :

kalian juga bisa menggunakan berbagai macam jenis menggunakan text-decoration
Contoh :
<head>
<style type="text/css">
  h1{text-decoration:overline;}      //Overline = Garis Atas
  h1{text-decoration:line-through;}  //Line-through = Dicoret
  h1{text-decoration:underline;}     //Underline = Garis Bawah
  h1{text-decoration:blink;}         //Blink = Berkedip
</style>
<body>
<h1>Heading lvl 1</h1>
<h2>Heading lvl 2</h2>
<h3>Heading lvl 3</h3>
<h4>Heading lvl 4</h4>
<p><b>Catatan : </b> "Blink" tidak dapat ditampilkan di IE, Chrome, dan Safari</p>
</body>
Hasilnya :

Heading lvl 1

Heading lvl 2

Heading lvl 3

Heading lvl 4

Catatan : "Blink" tidak dapat ditampilkan di IE, Chrome, dan Safari


Text Transformation
properti text-transform digunakan untuk membuat huruf menjadi huruf besar(kapital) dan huruf kecil atau menentukan huruf besar pada awalnya saja dalam sebuah text
Contoh Transformation  :
<head>
<style type="text/css">
  p.uppercase{text-transform:uppercase;}
  p.lowercase{text-transform:lowercase;} 
  p.capitalize{text-transform:capitalize;} 
</style>
<body>
<p class="uppercase">menjadi huruf besar semua</p>
<p class="lowercase">menjadi huruf kecil semua</p>
<p class="capitalize">setiap awal kata menjadi kapital</p>
</body>
Hasilnya :
menjadi huruf besar semua
menjadi huruf kecil semua
setiap awal kata menjadi kapital


Text Indentation
properti text-indentation digunakan untuk menentukan indentasi atau tulisan menjorok pada baris pertama, contoh :
<head>
<style type="text/css">
  a{text-decoration:none;}
</style>
<body>
<h3>Larangan Memanjangkan Kuku</h3>
<p>Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi 
perkara fitrah , memotong kuku termasuk salah satu perkara fitrah. 
Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima : 
Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting 
kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)</p>
<cite>http://rampesteam.blogspot.co.id/2015/06/larangan-memanjangkan-kuku_29.html</cite>
</body>
Hasilnya :

Larangan Memanjangkan Kuku

Barang siapa yang tidak menggunting kukunya berarti ia telah menyalahi perkara fitrah , memotong kuku termasuk salah satu perkara fitrah. Berdasarkan sabda Rasulullah SAW , " Perkara fitrah itu ada lima : Berkhitan , mencukur bulu kemaluan , menggunting kumis , menggunting kuku , dan mencabut bulu ketiak" . (HR.al-Bukhari dan Muslim)
http://rampesteam.blogspot.co.id/2015/06/larangan-memanjangkan-kuku_29.html

1 komentar:

 
Toggle Footer