Artikel ini berisi tentang macam-macam properti yang ada di CSS khususnya untuk mengatur teks atau tipografi. Baca sampai habis ya!

Halo sobat Gamelab, apa kabar?

Pada kesempatan kali ini saya akan membagikan berbagai macam properti yang ada di CSS khususnya untuk mengatur teks atau tipografi. Dengan mengetahui berbagai macam properti teks, kita bisa membuat tampilan teks yang lebih bervariasi. Apa saja propertinya? Simak artikel ini sampai habis ya!

Font Family

font-family adalah properti CSS yang dapat mengubah jenis font suatu text.

Untuk mendapatkan suatu font kita bisa mengunduhnya atau memakai @import pada file CSS. Berikut contohnya:

html:

Ini adalah font Poppins

css:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

output:

Pada contoh di atas, browser akan mengecek apabila browser tidak support font Poppins, maka ia akan mencoba font sans-serif.

Font Size

font-size  adalah properti CSS yang dapat mengubah ukuran sebuah teks. Value untuk property ini bisa menggunakan keyword seperti : xx-smal, small, meduim, large, larger, dan lain-lain. Berikut contohnya:

html:

Ini adalah font kecil
Ini adalah font medium
Ini adalah font besar
Ini adalah font sangat besar

css:

.kecil{
    font-size: small;
}
.medium{
    font-size: medium;
}
.besar{
    font-size: large;
}
.sangat-besar{
    font-size: x-large;
}

output:

Selain itu property ini juga dapat menggunakan value numerik dengan satuan pixels (px), em, rem dan lain-lain.

Value em adalah unit yang relatif terhadap parent dari object tersebut. Sedangkan, rem adalah unit yang relatif terhadap html, yang apabila font-size pada html belum kamu set, maka akan memakai settingan defaultnya, yaitu 16 px. Maka, untuk menghitung nilai dari rem adalah: em = pixels/16. Berikut contohnya:

h1 {
    font-size: 20px;
}

h1 {
    font-size: 1.25rem;
}

Kedua contoh tersebut memiliki ukuran yang sama, karena 20/16 = 1.25rem.

Font Weight

font-weight adalah properti CSS yang dapat mengubah ketebalan sebuah teks.

Value untuk property ini bisa menggunakan keyword seperti : normal (ketebalan default), bold, bolder, dan lighter. Berikut contohnya:

html:

Ini adalah kalimat dengan ketebalan "lighter".
Ini adalah kalimat dengan ketebalan "normal".
Ini adalah kalimat dengan ketebalan "bold".
Ini adalah kalimat dengan ketebalan "bolder".

css:

.lighter{
    font-weight: lighter;
}
.normal{
    font-weight: normal;
}
.bold{
    font-weight: bold;
}
.bolder{
    font-weight: bolder;
}

output:

Selain itu, kita juga dapat memasukkan value font-weight dengan angka dari 100 (tipis) sampai 900 (tebal) tergantung seberapa tebal teks yang kita inginkan. Ketebalan 400 akan sama seperti normal, dan 700 sama seperti bold. Berikut contohnya:

html:

Ini adalah kalimat dengan ketebalan "100".
Ini adalah kalimat dengan ketebalan "300".
Ini adalah kalimat dengan ketebalan "600".
Ini adalah kalimat dengan ketebalan "800".

css:

.w100{
    font-weight: 100;
}
.w300{
    font-weight: 300;
}
.w600{
    font-weight: 600;
}
.w800{
    font-weight: 800;
}

output:

*note : mengapit tag

dengan tag inline

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

Letter Spacing

letter-spacing adalah properti CSS yang dapat digunakan untuk memberi jarak untuk setiap karakter sebuah teks.

Value untuk property ini bisa menggunakan keyword seperti : normal (tidak ada jarak antar karakter), inherit (mengikuti value parent), dan menggunakan value numerik seperti pixels (px), pt, dan sebagainya.

Kita juga dapat memasukkan angka negatif sebagai value dari property tersebut. Berikut contohnya:

html:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

css:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

output:

Baca Juga : Contextual Intelligence, Soft Skill Penting di Era VUCA

Color

color adalah properti CSS yang dapat digunakan untuk memberi warna sebuah karakter.

Value untuk property ini bisa menggunakan keyword seperti:

• nama warna, seperti : red, green, blue, dan sebagainya.
• Hexadesimal. Menggunakan pagar (#) untuk mengawalinya, contoh : #0000FF
• RGB. Memberi warna pada masing-masing warna merah, hijau, dan biru pada rentang 0 - 255. Contoh: rgb(255, 0, 0) (akan mengasilkan warna merah).

Untuk lebih jelasnya, lihat contoh berikut ini:

html:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

css:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

h1{
    font-family: 'Poppins', sans-serif;
}

output:

Sekian pembahasan mengenai semua dasar yang perlu kamu ketahui untuk mengatur teks atau tipografi pada CSS. Semoga artikel ini dapat membantu teman-teman yang ingin membuat web. Selamat mencoba!

Artikel ini merupakan kontribusi dari peserta program Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan tim Gamelab Indonesia.

Yang termasuk property pada CSS apa saja ya?

Dalam CSS ini, terdapat beberapa macam property, yaitu:.

Background Property. ... .

Border Property. ... .

Font Property. ... .

Margin Property. ... .

Padding Property. ... .

Property Lebar dan Tinggi. ... .

Text Property. ... .

Display Property..

Apa yang disebut properti dalam CSS?

Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan.

Sebutkan elemen elemen CSS apa saja?

4 elemen penting yang wajib anda kuasai didalam penulisan kode CSS yakni :.

Selector..

Declaration..

Property..

Value..

Properti manakah yang digunakan untuk merubah batas kiri pada elemen?

border-left-style Mengatur gaya batas kiri elemen. border-left-width Mengatur lebar batas kiri suatu elemen.