CSS Text Property

Membicarakan tentang blog/web tentu tak akan pernah lepas dari properti "text" karena inilah media yang digunakan sebagai sarana komunikasi antara pemilik blog/web dan pengunjung selain image atau media yang lain. Menggunakan property text dalam web akan berkaitan erat dengan 3 css property lain.
  1. color property
  2. text-align property
  3. text-transform property

Text Color

Warna teks dibentuk melalui color property. Berbagai macam warna dapat digunakan dimana nilai warna dapat menggunakan 3 pilihan kode warna.
  • Color Name
    Anda bisa gunakan nama warna sebagai value/nilai color property. Red, green, blue adalah contoh warna-warna tersebut.
  • RGB color, RGBA color.
    Contoh rgb color » rgb(0,0,0) Contoh rgba color » rgba(255,0,0,0.7)
    rgba color untuk membuat warna dengan efek transparan.
  • Hexadecimal/Hex Color
    Hex color menggunakan symbol angka dan huruf seperti misalnya #000, #eee, #f00 dll
Beberapa warna penting berikut kode warnanya:
      Black  = #000000      Green  = #008000
      Silver = #C0C0C0      Lime   = #00FF00
      Gray   = #808080      Olive  = #808000
      White  = #FFFFFF      Yellow = #FFFF00
      Maroon = #800000      Navy   = #000080
      Red    = #FF0000      Blue   = #0000FF
      Purple = #800080      Teal   = #008080
      Fuchsia= #FF00FF      Aqua   = #00FFFF
Penulisan kode color property
color:red;      color:rgb(0,0,0);      color:rgba(255,0,0,0.7);      color:#f00;
Kode color property dalam syntax
p{
      font-size:12px;
      color:#000;
      line-height:1em;
}
h3{
      font-size:18px;
      color:orange;
      margin:20px 0;
}

Text Alignment

Perataan text mempunyai 4 pilihan:
  1. Rata kiri text-align:left;
  2. Rata kanan text-align:right;
  3. Rata tengah text-align:center;
  4. Rata kanan-kiri text-align:justify;
text-align property dalam syntax
p{
      font-size:12px;
      color:#000;
      line-height:1em;
      text-align:justify;
}
h3{
      font-size:18px;
      color:orange;
      margin:20px 0;
      text-align:center;
}

text-transform property

Teks-transform property untuk membentuk teks agar membentuk beberapa karakter teks tertentu secara otomatis.
Value/nilai & kode text-transform property
  • text-transform:uppercase; » secara otomatis semua teks berbentuk huruf capital
  • text-transform:lowercase; » secara otomatis semua teks berbentuk huruf kecil
  • text-transform:capitalize; » secara otomatis karakter pertama dalam setiap kata berbentuk huruf capital
  • text-transform:normal; » teks sesuai yang tertulis
Kode text-transform property dalam syntax css
p{
      font-size:12px;
      color:#000;
      line-height:1em;
      text-align:justify;
      text-transform:uppercase;
}
h3{
      font-size:18px;
      color:orange;
      margin:20px 0;
      text-align:center;
      text-transform:capitalize;
}
Di bawah ini telah tersedia demo yang berkaitan dengan text property. Lakukan perubahan pada beberapa kode agar bisa terlihat pengaruh penggunaan property css seperti color property, text-align property dan text-transform property pada teks yang kita buat.
Please click the button to display. Continue with editing code and click to see the results!

Tidak ada komentar:

Posting Komentar

My ProfileC l o s e

FollowerC l o s e