Belajar Menggunakan Properti Font, Text, List dan Background dalam CSS

By | 9 January 2021

Setelah kita mengenal CSS berikutnya kita akan mempelajari cara menggunakan properti Font, text, list dan background untuk memformat teks dalam halaman web. Properti font digunakan untuk memilih jenis huruf, menetapkan size huruf dan tampilan huruf. Properti text digunakan untuk memformat bagaimana teks akan ditampilkan misalnya mengatur perataan teks, jarak antar huruf, dekorasi dan transformasi. Sementara properti list untuk mengatur tampilan teks dengan format poin per poin atau dalam dokumen Wordprocessor dikenal dengan istilah Bullets and Numbering. Sedangkan properti background digunakan untuk memberi latar dengan warna tertentu atau dengan gambar. Untuk lebih lengkapnya silahkan pelajari di bawah ini:

Font Property

  • Font Family, memungkinkan memilih berbagai tampilan jenis font (huruf), jika font pertama tidak ditemukan maka font berikutnya yang akan digunakan. Contoh diterapkan pada selector h1:
    h1 {
             Font-family : arial, serif, verdana;
    }
  • Font-size, untuk menentukan ukuran font (huruf) dengan satuan em, px, mm, cm, pt, %. Contoh :
    h1 {
             Font-size : 10em;
    }
  • Font-style, untuk mengubah tampilan font, normal, oblique atau italic. Contoh :
    h1 {
              Font-style : italic;
    }
  • Font-variant, untuk mengubah font menjadi kapital atau huruf kecil. Contoh :
    h1 {
             font-variant : samll-caps;
    }
  • Font-weight, untuk memberi huruf dengan bolder, bold, lighter, 100-900. Contoh :
    h1 {
             Font-weight : bolder;
    }

Text Property

  • Color, untuk mengubah warna huruf teks. Contoh :
    p {
             color : blue;
    }
  • Text-align, untuk mengatur perataan teks (left, center, right, justify). Contoh :
    p {
             Text-align : justify;
    }
  • Text-decoration, untuk memberi dekorasi pada teks misalnya underline, overline, line-through, blink, none. Contoh :
    p {
               Text-decoration : underline;
    }
  • Text-transform, untuk merubah teks menjadi capitalize, uppercase, lowercase, none.Contoh:
    p {
                Text-transform : uppercase;
    }
  • Letter-spacing, untuk mengatur jarak antar huruf dalam teks. Contoh :
    p {
                 Letter-spacing : 2 em;
    }
  • Text-indent, untuk mengatur jarak menjoroknya teks, kedalam misalnya 3 em, keluar misalnya -2 em Contoh : p { Text-indent : 2 em; }
  • Line-height, digunakan untuk mengatur jarak atau tinggi antar baris. Contoh : p{ line-heignt:50px; }

List Property (OL format number, UL format non number)

  • List-style-type, untuk menentukan tipe daftar apakah disc, circle, square, lower-roman, lower-alpha, upper-alpha pada UL, none untuk menghapus type, dan 1, a, A, I untuk OL. Contoh :
    UL {
               List-style-type : disc;
    }
  • List-style-image, untuk menentukan tipe daftar dengan gambar. Contoh :
    UL {
             List-style-image : url(bullet.jpg);
    }
  • List-style-position, untuk menentukan posisi daftar, dengan nilai inside atau outside. Contoh :
    UL {
             List-style-position : inside;
    }

Background Property

  • Background-color, untuk memberi latar/background dengan warna tertentu. Contoh :
    body {
               Background-color : yellow;
    }
  • Background-image, untuk memberi latar/background dengan gambar tertentu. Contoh :
    body {
              Background-image : url(logo.jpeg);
    }
  • Background-attachment, untuk mengatur gambar latar/background apakah scroll atau fixed. Contoh :
    body {
             Background-image : url(logo.jpeg);
            Background-attachment : scroll;
    }
  • Background-repeat, untuk mengatur gambar latar/background apakah diulang atau tidak, dengan nilai repeat, no repeat, repeat-x, repeat-y. Contoh :
    body {
            Background-image : url(logo.jpeg);
            Background-repeat : repeat;
    }
  • Background-position, untuk mengatur posisi gambar latar/background. Contoh :
    body {
              Background-image : url(logo.jpeg);
              Background-repeat : no-repeat;
              Background-position : bottom left;
    }

*Menulis background dapat dilakukan seperti berikut : background :url(logo.jpeg) repeat-x left top;

Link Property

  • Link pseudo-class, link yang belum dikunjungi
  • Visited pseudo-class, link yang sudah dikunjungi
  • Hover pseudo-class, link ketika mouse berada di atas link
  • Active pseudo-class, link active
<!DOCTYPE html>
<html>
<head>
<title>Float Style Sheet</title>
<Style>
.linku a:link{
font-size:20px;
color:green;
text-decoration:none;
}
.linku a:hover{
font-size:20px;
color:red;
text-decoration:underline;
}	
.linku a:visited{
font-size:20px;
color:yellow;
text-decoration:none;
}
.linku a:active{
font-size:20px;
color:blue;
text-decoration:none;
}
</style>
</head>
<body>
<Div class="linku"><a href="https://www.arvamart.com" target="_blank">www.arvamart.com</a></div>
</body>
</html>

Demikianlah penggunaan properti dasar seperti font, text, list dan background untuk mengatur tampilan halaman web. Sebenarnya masih banyak property dan value yang harus dipelajari, di sini hanya memberikan dasar-dasar bagaimana menulis kode CSS dalam menggunakan property, value dan menerapkannya pada sebuah selector. Ingat selector bisa element html ataupun id dan class.

Category: CSS