Gaya Text dan Font di dalam CSS

Gaya Text dan Font

Setelah sebelumnya yaitu Pembahasan tentang Pengenalan CSS dalam HTML, maka selanjutnya kita akan membuat berbagai Contoh CSS nya. CSS menjelaskan gaya dokumen HTML, dan menjelaskan bagaimana elemen-elemen HTML tersebut ditampilkan di layar atau media lain. CSS membuat sebuah tampilan dokumen HTML menjadi lebih menarik dan berbeda dengan lainnya. Karena menentukan gaya untuk halaman Web kita, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar. Untuk artikel kali ini, kita akan membuat contoh Gaya Font dan Text di CSS. Berikut contoh-contohnya di bawah ini.

1. Text and Background Color
   
   Digunakan untuk mengatur warna teks dan warna latar belakang teks.
   <style>
      .warna{
       background-color : red;
       color : yellow;
       }
</style>

<div class="warna">
Contoh Teks dan Background
</div>
   
   Hasil :
   
   Contoh Teks dan Background
   
   
2. Font in CSS
   
   Digunakan untuk mengatur gaya Font seperti miring, tebal, garis bawah, coret dan lainnya serta mengatur ukuran Font.
   <style>
      .font{
       font-style : italic;
       font-size : 30px;
       }
</style>

<div class="font">
Property Font di CSS
</div>
   
   Hasil :
   
   
   Property Font di CSS
   
   
3. Text Properties
   
   1. text-decoration dapat di isi dengan nilai underline, overline, dan line-through.
      - underline : 
      Contoh teks dengan underline
      - overline : 
      Contoh teks dengan overline
      - line-through : 
      Contoh teks dengan line-through
   2. text-transform dapat di isi dengan nilai capitalize, uppercase, dan lowercase.
      - capitalize : 
      Contoh teks dengan capitalize
      - uppercase : 
      Contoh teks dengan uppercase
      - lowercase : 
      Contoh teks dengan lowercase
   3. text-shadow dengan menggunakan sintak
      text-shadow : horizontal-shadow vertikal-shadow blur-radius color;.
      
      text-shadow : 10px 1px 5px red;
      Contoh teks dengan shadow
   4. text-indent digunakan untuk mengatur jarak baris pertama untuk setiap paragraf.
      Contoh teks dengan text-indent
   5. letter-spacing digunakan untuk mengatur jarak antar karakter.
      Contoh teks dengan letter-spacing
      
      
   Jika semua Text Properties digabung dalam satu class sehingga menjadi seperti contoh berikut ini.

   <style>
         .txt_cls{
          text-decoration: line-through;
          text-transform: uppercase;
          text-shadow: 10px 1px 5px red;
          text-indent: 20px;
          letter-spacing: 5px;
          }
   </style>
   
   <div class="txt_cls">Ini adalah hasil gabungan dari Text Properties</div> 

   Hasil :
   Ini adalah contoh hasil gabungan dari Text Properties
   
   
4. Opacity
   
   Digunakan untuk mengatur tingkat opacity atau menggambarkan tingkat transparansi. Jika nilai 1  tidak transparan sama sekali, 0.5 berarti transparan 50% dan 0 sepenuhnya transparan.

   <style>
      .opacity{
       opacity : 0.4;
       }
</style>

<div class="opacity">
Teks dengan Opacity
</div>

   
   Hasil :
   
   

   Teks dengan Opacity

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.