Warna adalah properti yang paling sering digunakan dalam CSS.

Kamu bisa bayangkan. Jika warna web cuma hitam putih saja, maka akan terasa hambar dan monoton.

Karena itu, warna pasti dipakai di dalam CSS. Supaya tampilan web semakin menarik dan berwarna.

Pada kesempatan kali ini, kita akan belajar tentang properti color yang merupakan properti untuk memberikan warna.

Mengenal Properti Color

Properti color merupakan properti untuk memberikan warna pada teks.

Contoh penggunaan:

1
2
3

h1 {
	color: orange;
}

Artinya:

Berikan warna orange untuk teks pada elemen h1.

orange adalah nama warna yang sudah ada di CSS. Selain orange, masih banyak lagi warna lainnya.

Mari kita pelajari cara memberikan nilai warna yang benar:

Nilai yang Valid untuk Warna

Nilai warna pada properti `color dapat kita berikan dengan berbagai cara.

Salah satunya dengan menuliskan nama warna dalam bahasa inggris.

Misalnya, warna teks untuk paragraf adalah merah, maka kita bisa berikan color:red.

Selain menggunakan nama warna, terdapat juga cara lain yang valid seperti fungsi rgb(), kode heksadesimal, dsb.

Mari kita bahas semuanya

Nama warna
Nama warna merupakan cara yang sering digunakan, karena lebih mudah diingat.

Misalnya, saya suka warna hijau (teal), maka nanti dalam CSS-nya bisa langsung kita tulis teal.

Contoh:

   header {
       color: teal;
   }
   Nama-nama warna ini sudah ada secara default, jadi kita tinggal pakai aja dengan menuliskan nama warnanya.

   Pastikan kamu menulis nama warnanya dengan bahasa inggris. jika pakai bahasa indonesia, maka tidak akan bisa.

   Ini adalah sebagian dari nama-nama warna yang ada di CSS. Kalau ingin melihat daftar lengkap nama-nama warna di CSS, kamu bisa kunjungi: W3C.org (Color Keywords).

2. Kode Heksadesimal
   Kode heksadesimal merupakan kode yang menggunakan bilangan heksadesimal, memiliki nilai dari 0 sampai f (16 dalam desimal).

   Kode heksadesimal diawali dengan tanda pagar (#), kemudian diikuti kode heksa-nya. Kode ini dapat terdiri dari 3 digit atau 6 digit bilangan.

   Contoh:

0011ff (6 digit)

01f (3 digit)

Setiap angka dalam kode heksadesimal menentukan nilai warna dalam RGB (#RRGGBB atau #RGB).

Misalnya untuk yang enam digit, dua angka di depan adalah untuk nilai warna merah, dua angka berikutnya untuk warna hijau, dan dua angka terakhir untuk warna biru.

### Fungsi RGB

merupakan singkatan dari merah (red), hijau (green), dan biru (blue).

Nilai yang diberikan pada parameter tersebut dimulai dari angka 0~255.

Semakin besar nilai yang diberikan, semakin kuat nilai warna tersebut.

Contoh penggunaan fungsi RGB.
```css
h2 {
    color: rgb(88, 255, 21);
}

Pada contoh di atas, nilai parameter kedua (green) diberikan maksimal, maka nanti hasilnya warna hijau akan menjadi warna dominan.

Penulisan nama warna dengan kode heksadesimal bertujuan untuk membuat warna baru yang belum ada di daftar nama warna.

Selain menggunakan heksadesimal, ada juga cara lain seperti menggunakan fungsi rgb(), rgba(), hsl(), hsla().

Fungsi rgb() dan rgba()
Fungsi rgb() adalah fungsi yang menghasilkan warna berdasarkan konsep warna RGB pada komputer.

RGB merupakan singkatan dari Red, Green, Blue.

Contoh penggunaan fungsi rgb().
1
2
3
h1 {
color: rgb(0, 0, 255);
}
Pada contoh ini, warna yang akan dihasilkan adalah warna biru, karena kita memberikan nilai 255 pada parameter terakhir (untuk warna biru).

Nilai parameter ini diberikan dari rentang angka 0 sampai 255.

Semakin besar angkanya, semakin banyak kandungan komposisi dari warna tersebut.

Contoh:
1
2
3
h1 {
color: rgb(255, 128, 255)
}
Pada contoh ini, kita memberikan warna:
- hijau = 255
- merah = 128
- biru = 255
Hasilnya akan seperti warna ‘pink’, karena warna merah, hijau, dan biru digabungkan dengan nilai yang berbeda-beda.

Selain menggunakan fungsi rgb() ada juga fungsi rgba().

Fungsi ini sama seperti fungsi RGB, tapi ada penambahan parameter alpha di belakangnya.

Nilai alpha dapat diberikan dari 0% sampai 100% atau 0.0~1.0.

Semakin mendekati angka satu, warnanya akan semakin terang dan semakin mendekati angka nol, warnanya akan semakin transparan.

Contoh penggunaan fungsi RGBA.
1
2
3
p {
color: rgba(40, 23, 11, 0.7);
}
Pada contoh di atas, nilai alpha yang diberikan adalah 0.7, atau sama dengan 70%.
Fungsi hsl() dan hsla()
Fungsi hsl() merupakan fungsi yang menghasilkan warna berdasarkan konsep warna HSL. HSL merupakan singkatan dari Hue, Saturation, Lightness.

Nilai hue yang diberikan pada fungsi ini dimulai dari 0~360, karena model warna HSL bentuknya seperti tabung, sehingga yang digunakan adalah nilai derajat dari lingkaran tutup tabungnya.

Sedangkan untuk nilai saturation dan lightness menggunakan persen, dari 0%~100%.

HSL color solid cylinder, Contoh penggunaan fungsi HSL dalam CSS:
1
2
3
h1 {
color: hsl(324, 70%, 40%);
}
Fungsi hsl() juga punya fungsi hsla() untuk memberikan nilai alpha atau transparan pada warna HSL.

Contoh:
1
2
3
h1 {
color: hsla(267, 80%, 45%, 0.6);
}
Warna Gradasi
Warna gradasi adalah kumpulan dari beberapa warna yang digabungkan dengan membentuk transisi gradasi warna.

Warna gradasi di CSS biasanya dibuat dengan fungsi:
- linear-gradient() untuk gradasi linear;
- radial-gradient() untuk gradasi lingkaran;
- conic-gradient() untuk gradasi memutar;
Tiap-tiap fungsi punya parameter yang hampir sama. Bedanya pada parameter awal saja.

Fungsi linear-gradient() akan menggunakan parameter arah di awalnya, lalu diikuti dengan warna-warna yang akan dicampurkan. Parameter arah pada linear-gradient() bisa berbentuk nama arah seperti left, right, top, bottom, dan juga derajat seperti 90deg.

Fungsi radial-gradient(), parameter awalnya berupa ukuran lingkaran dan fungsi conic-gradient() parameter awalnya berupa derajat lingkaran.

Nah, untuk membuat warna gradasi dengan mudah. kita bisa memanfaatkan website cssgradient.io.

Setelah itu, kita akan dapat kode CSS untuk Gradasinya. Tinggal di-copas dan dipakai aja.

Contoh:
1
2
3
4
5
h1 {
background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
O ya, properti color saat ini belum mendukung untuk menggunakan warna gradasi. Tapi kita bisa pakai properti background seperti di atas untuk menggunakan warna gradasi pada teks.

Mungkin penggunaan gradasi pada properti color nanti akan didukung pada CSS 4 😏.

Tips: Menggunakan Warna

Berikut ini beberapa tips yang ingin saya bagikan dalam menggunakan warna di CSS.

Tips 1: Tak perlu dihafal

Kamu tak perlu menghafal semua nama-nama warna. Saya juga gak menghafalnya.

Kalau lupa tinggal googling aja nama-nama warna di CSS.

Tips 2: Gunakan Inspect Elemen

Jika kamu bingung menentukan warna, coba gunakan inspect element. Di sana ada color picker yang bisa kamu gunakan untuk menentukan warna.

Inspect element adalah tempat terbaik untuk bereksperimen warna dan kode CSS lainnya.

Tips 3: Konsisten untuk Nilai Warna

Dalam memberikan nilai warna, ada baiknya kamu konsisten menggunakan salah satu metode di atas.

Misalnya CSS-mu cuma menggunakan kode heksadesimal aja, maka tetap konsisten seluruhnya menggunakan metode ini.

Tujuannya agar tidak campur aduk dan kode CSS-mu jadi lebih rapi.

Apa Selanjutnya? Oke, kita sudah belajar tentang properti color di CSS serta gimana cara memberikan nilai yang valid pada properti ini.

Nilai-nilai color yang kita bahas di tutorial ini, juga berlaku untuk beberapa properti seperti border-color, background-color, dan sebagainya.

Ini nanti akan kita bahas di tutorial berikutnya.

Selanjutnya silakan pelajari tentang properti background di CSS.

CSS Background

Setelah kita belajar tentang properti color dan nilai-nilai warna yang valid di CSS, berikutnya kita pelajari tentang background.

Seperti namanya, properti background fungsinya untuk memberikan background pada elemen tertentu.

Jika kamu coba ketik background pada kode CSS di Inspect Elemen, maka akan muncul beberapa saran properti yang berkaitan dengan background.

Masing-masing properti background- punya fungsi yang berbeda-beda.

Ada dua cara kita memberikan background di CSS, yakni dengan warna dan gambar. Pemberian background dengan gambar membutuhkan beberapa properti tambahan lagi untuk mengatur gambarnya.

Itu sebabnya ada banyak properti background-* di CSS.

Pada tutorial ini, kita akan membahas properti-properti yang penting dan sering digunakan dalam membuat background.

Background Warna

Untuk memberikan background warna, kita bisa memberikan nilai warna pada properti background seperti nama warna, kode heksadesimal warna, fungsi rgb(), rgba(), hsl(), dan sebagainya.

Mari kita langsung coba praktik.

Buatlah file baru dengan nama contoh-bg-warna.html, kemudian isi kodenya seperti ini:

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>
      header {
        background-color: violet;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Elemen header berhasil kita set warna latarnya menjadi violet.

Oh ya, kita menggunakan properti background-color untuk memberikan warna latar. Sebenarnya bisa juga dengan properti background saja.

Nilai yang kita berikan pada background-color berupa nama warna. Silakan coba juga gunakan nilai warna yang lain seperti kode heksa, fungsi rgb(), hsl(), dan sebagainya.

Oke, selanjutnya kita akan coba menggunakan background dengan warna gradasi.

Pertama kita buat dulu warna gradasinya di website: https://cssgradient.io/

Kemudian copy kode CSS gradient yang kamu dapatkan dan ubah kode CSS contoh yang tadi menjadi seperti ini:

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>
      header {
        background: rgb(34,193,195);
        background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Mantap 👍, sekarang background-nya pakai warna gradasi.

Oh ya, mengapa kita menggunakan dua properti background?

1 2	background: rgb(34,193,195); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);

Ini untuk antisipasi, jika browser tidak mendukung menggunakan warna gradasi, maka warna background yang dipakai adalah warna dari fungsi rgb().

Background Image

Jika ingin menggunakan warna latar gambar, maka kita bisa menggunakan properti background-image atau background saja.

Format gambar yang didukung bisa: jpg, png, gif, webp, avif, svg, dll.

Intinya, selama format gambar tersebut bisa dibuka di web browser, maka bisa dipakai sebagai background.

Oke, kalau begitu, Mari kita coba latihan menggunakan background gambar.

Pertama silakan download file gambarnya di Internet.

Sebenarnya bisa pakai yang mana aja. Tapi kita coba ukuran medium, karena bisanya ukuran layar komputer dan Hp segitu.

Setelah kamu download, ubah namanya menjadi background.jpg kemudian taruh di satu folder dengan file HTML-nya.

Jika file background.jpg tidak berada di satu folder dengan File HTML, maka nanti kamu bisa tulis alamat path-nya di CSS.

Setelah itu, buat file HTML baru dengan nama contoh-bg-image.html dengan isi sebagai berikut.

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>

      body {
        background-image: url('background.jpg');
      }

      header {
        background: rgba(255,255,225, 0.5);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Pada kode ini, kita memberikan background gambar untuk elemen body dan memberikan background putih transparan (50%) untuk elemen header.

Coba perbesar dan perkecil ukuran jendelanya. atau coba juga melakukan zoom out.

Background Repeat

Jika kita melakukan zoom out pada contoh yang tadi. Gambar background-nya akan diulang-ulang. Jika kamu pakai ukuran gambar yang kecil, maka akan ditampilkan seperti itu.

Gimana cara agar tidak diulang-ulang? Kita bisa gunakan properti background-repeat. Properti ini punya beberapa nilai:

repeat-x artinya mengulang background pada sumbu x aja;
repeat-y artinya mengulang background pada sumbu y aja;
no-repeat artinya tidak mengulang background.

Nah, kita bisa pakai no-repeat bila ingin background-nya tidak diulang.

Maka kode CSS-nya akan menjadi seperti ini:

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

Menentukan Ukuran Background

Kita bisa mengatur ukuran background dengan properti background-size, properti ini punya beberapa nilai yang valid:

px, pt, em, rem (fixed) ukuran dalam angka dan satuan, contoh 200px, 20em.
vw, vh (dynamic) mengikuti ukuran tinggi dan lebar layar (view port);
contain (dynamic) mengikuti ukuran lebar elemen;
cover (dynamic) mengikuti ukuran lebar dan tinggi elemen;

Mari kita coba contohnya. Ubahlah kode CSS background pada contoh sebelumnya menjadi seperti ini:

body {
	background-image: url('background.jpg');
 	background-repeat: no-repeat;
  background-size: cover;
}

Menggunakan Gambar SVG

Gambar SVG (Scalable Vector Graphic) merupakan format gambar vektor yang menjadi standar di web saat ini.

Tidak seperti gambar bitmap (jpg, png, gif) yang ukurannya dibatasi dengan piksel. Vektor bisa kita perbesar ukurannya berapapun yang kita mau, tanpa merusak kualitasnya.

Nah, untuk latihan. kita akan menggunakan gambar vektor dari getwave.io. Silakan buat gambar vektor wave di sana, kemudian download file SVG-nya.

Kemudian taruh di satu folder dengan HTML-nya.

Setelah itu, buat file HTML baru dengan nama contoh-bg-svg.html dan isi kodenya seperti ini:

<html>
  <head>
    <title>Contoh Background SVG</title>
    <meta content="">
    <style>

      body {
        background-image: url('wave.svg');
        background-repeat: no-repeat;
      }

      header {
        background: rgba(255,255,225, 0.5);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Pada kode ini, kita tidak perlu menentukan ukuran background untuk file vektor. Ukuran yang dipakai adalah ukuran maksimal 100%. Tapi kamu juga bisa menentukan ukurannya, jika mau.

Oke, sekarang coba buka di web browser.

Background Blur di CSS

Belakangan ini banyak konsep desain web dengan background blur. Konsep ini dikenal dengan glass morphology design, karena bentuknya mirip seperti glass.

Nah untuk membuat yang seperti ini, ada properti css baru bernama backdrop-filter untuk memberikan filter pada background.

Jika ingin memberikan filter blur, maka kita harus memberikan nilai dengan fungsi blur().

Contoh:

Buatlah file baru dengan nama contoh-bg-blur.html kemudian, isi dengan kode berikut.

<html>
  <head>
    <title>Contoh Background Blur</title>
    <meta content="">
    <style>

      body {
        background-image: url('background.jpg');
        background-repeat: no-repeat;
        background-size: cover;
      }

      header {
        background: rgba(255,255,225, 0.5);
      }

      article {
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
    <article>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum.
    </article>
  </body>
</html>

Pada contoh ini, kita memberikan efek filter blur (10px) untuk background elemen article.

Selain efek blur(), masih ada lagi efek lainnya seperti:

brightness() untuk efek kecerahan;
contrast() untuk efek kontras;
drop-shadow() untuk efek bayangan;
grayscale() untuk efek hitam putih;
hue-rotate() untuk efek warna hue;
invert() untuk efek warna negatif;
opacity() untuk efek transparan;
saturate() untuk efek saturasi warna;
sepia() untuk efek warna sepia.

Silakan kamu coba-coba sendiri.

Properti backdrop-filter adalah properti baru yang belum masuk standar resmi CSS. Tidak semua browser mendukung properti ini. Kamu bisa mengeceknya di caniuse.com/css-backdrop-filter.

Apa Selanjutnya? Oke, biar tutorial ini tidak terlalu panjang. kita akhiri sampai di sini. Sebenarnya masih banyak lagi properti yang berkaitan tentang background, terutama dalam menggunakan background gambar.

Namun, yang saya bahas di tutorial ini adalah yang paling sering dipakai saat ini. Sisanya, kamu bisa coba-coba sendiri.

Text Formatting di CSS

Setelah kita belajar tentang properti color dan background, berikutnya kita akan belajar tentang cara styling teks.

Ini penting, karena teks adalah elemen yang paling banyak dipakai pada halaman web.

Ada beberapa properti CSS untuk styling teks yang akan kita pelajari, di antaranya text-align, text-decoration, text-transform, text-spacing, dan text-shadow.

Oke langsung saja, mari kita mulai!

Text Align

Jika kamu pernah menggunakan aplikasi Office, pasti pernah mengenal perataan teks. Ada rata kiri, rata kanan, rata tengah, rata kiri dan kanan.

Nah, kita juga bisa meratakan teks dengan properti CSS text-align. Properti ini punya nilai yang valid:

left untuk rata kiri;
right untuk rata kanan;
center untuk rata tengah;
justify untuk rata kiri dan kanan;
start rata pada awal (mengikuti direction);
end rata pada akhir (mengikuti direction);

Contoh penggunaan:

header {
  text-align: center;
}

p {
	text-align: justify; 
}

Biar lebih jelas, mari kita coba latihan.

Buatlah file baru dengan nama text-align.html, kemudian isi dengan kode berikut:

<html>
  <head>
    <title>Contoh Text Align</title>
    <meta content="">
    <style>
      header {
        text-align: center;
      }

      .text-left {
        text-align: left;
      }

      .text-right {
        text-align: right;
      }

      .text-center {
        text-align: center;
      }

      .text-justify {
        text-align: justify;
      }
    </style>
  </head>
  <body>

    <header>
      <h1>Belajar CSS Text Align</h1>
    </header>

    <article>
      <p class="text-left">
        Paragraf ini akan rata kiri. Ini cuma contoh paragraf untuk mendemokan text-align di CSS.
        Silakan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
      <p class="text-center">
        Paragraf ini akan rata kiri. Ini cuma contoh paragraf untuk mendemokan text-align di CSS.
        Silakan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
      <p class="text-right">
        Paragraf ini akan rata kiri. Ini cuma contoh paragraf untuk mendemokan text-align di CSS.
        Silakan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
      <p class="text-justify">
        Paragraf ini akan rata kiri. Ini cuma contoh paragraf untuk mendemokan text-align di CSS.
        Silakan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

Kemudian, coba buka dengan web browser.

Teks berhasil diratakan sesuai dengan yang kita inginkan.

Text Direction

CSS punya properti direction untuk menentukan arah baca teks. Misalnya dari kiri ke kanan (ltr) atau dari kanan ke kiri (rtl).

Secara umum teks biasanya dibaca dari kiri ke kanan. Tapi ada juga yang dibaca dari kanan ke kiri, contohnya teks bahasa arab.

Jika kita membuat website dengan bahasa arab, lalu membiarkan direction menggunakan left to right (ltr), maka hasilnya akan seperti ini.

Ini akan menyulitkan orang membaca tulisan arab, karena tulisan arab dibaca dari kanan ke kiri.

Karena itu, kita harus mengatur direction-nya menjadi rtl (right to left).

Buatlah file HTML baru dengan nama text-direction.html kemudian isi dengan kode berikut:

<html>
  <head>
    <title>Contoh Text Direction and Align</title>
    <meta content="">
    <style>
      header {
        text-align: center;
      }

      body {
          direction: rtl;
      }
    </style>
  </head>
  <body>

    <header>
      <h1>Belajar CSS Text Align</h1>
    </header>

    <article>
      <p>
        وعند موافقه العميل المبدئيه على التصميم يتم ازالة هذا النص من التصميم ويتم وضع النصوص النهائية المطلوبة للتصميم ويقول البعض ان وضع النصوص التجريبية بالتصميم قد تشغل المشاهد عن وضع الكثير من الملاحظات او الانتقادات للتصميم الاساسي.
      </p>
      <p>
        وعند موافقه العميل المبدئيه على التصميم يتم ازالة هذا النص من التصميم ويتم وضع النصوص النهائية المطلوبة للتصميم ويقول البعض ان وضع النصوص التجريبية بالتصميم قد تشغل المشاهد عن وضع الكثير من الملاحظات او الانتقادات للتصميم الاساسي.
      </p>
    </article>

  </body>
</html>

Setelah itu buka dengan web browser.

Secara default, teks akan rata kanan.

Ini karena kita mengatur direction: rtl (kanan ke kiri).

Nah, di sini baru kita juga bisa menerapkan text-align dengan nilai start dan end.

Contoh:

<html>
  <head>
    <title>Contoh Text Direction and Align</title>
    <meta content="">
    <style>
      header {
        text-align: center;
      }

      body {
          direction: rtl;
      }

      .text-start {
        text-align: start;
      }

      .text-end {
        text-align: end;
      }
    </style>
  </head>
  <body>

    <header>
      <h1>Belajar CSS Text Align</h1>
    </header>

    <article>
      <p class="text-start">
        وعند موافقه العميل المبدئيه على التصميم يتم ازالة هذا النص من التصميم ويتم وضع النصوص النهائية المطلوبة للتصميم ويقول البعض ان وضع النصوص التجريبية بالتصميم قد تشغل المشاهد عن وضع الكثير من الملاحظات او الانتقادات للتصميم الاساسي.
      </p>
      <p class="text-end">
        وعند موافقه العميل المبدئيه على التصميم يتم ازالة هذا النص من التصميم ويتم وضع النصوص النهائية المطلوبة للتصميم ويقول البعض ان وضع النصوص التجريبية بالتصميم قد تشغل المشاهد عن وضع الكثير من الملاحظات او الانتقادات للتصميم الاساسي.
      </p>
    </article>

  </body>
</html>

Paragraf ke-2 akan rata kiri, karena kiri adalah akhir dari direction. Sedangkan paragraf pertama akan tetap rata di kanan, karena direction di mulai dari kanan.

Text Decoration

Properti text-decoration adalah properti untuk memberikan dekorasi garis pada teks. Contohnya seperti garis bawah, garis atas, dan garis di tengah (teks tercoret).

Properti ini punya nilai berupa:

none artinya tidak menggunakan dekorasi apapun;
underline artinya kita akan memberikan dekorasi garis bawah;
overline dekorasi dengan garis di atas teks;
line-through dekorasi garis di tengah atau teks tercoret.

Contoh penggunaan:

1
2
3

.deleted {
	text-decoration: line-through;
}

Biar semakin paham, mari kita coba latihan.

Buatlah file baru dengan nama text-decoration.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Decoration</title>
    <style>
        h1 {
            text-decoration: underline;
        }

        p {
            line-height: 1.5;
        }

        .upperline {
            text-decoration: overline;
        }

        .underline {
            text-decoration: underline;
        }

        .strike {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>Contoh Text Decoration</h1>
    <p>
        <span class="underline">Ini Teks dengan dekorasi garis bawah</span>. Ini teks normal,
        tanpa dekorasi apapun. Ini teks tanpa dekorasi. Ini teks <span class="strike">yang dicoret</span>.
        <span class="upperline">Ini teks dengan dekorasi garis di atas.</span>
    </p>
</body>
</html>

Setelah itu buka dengan web browser.

Pada contoh ini, kita menggunakan elemen span dengan class text-decoration yang sudah kita buat di CSS.

Oh ya, kita sengaja menggunakan line-height pada paragraf agar dekorasi upperline tidak terlihat seperti garis bawah.

Selain dekorasi dengan garis lurus, kita juga bisa menentukan style garis dan warnanya. Tinggal tambahkan aja di nilai properti.

Contoh:

1
2
3

.underline {
	text-decoration: underline wavy green;
}

Artinya, saya ingin membuat dekorasi garis bawah dengan gaya garis berombak (wavy) dan warnanya hijau.

Ubahlah kode pada contoh sebelumnya menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Decoration</title>
    <style>
        h1 {
            text-decoration: underline;
        }

        p {
            line-height: 1.5;
        }

        .upperline {
            text-decoration: overline dashed violet;
        }

        .underline {
            text-decoration: underline wavy green;
        }

        .strike {
            text-decoration: line-through red;
        }
    </style>
</head>
<body>
    <h1>Contoh Text Decoration</h1>
    <p>
        <span class="underline">Ini Teks dengan dekorasi garis bawah</span>. Ini teks normal,
        tanpa dekorasi apapun. Ini teks tanpa dekorasi. Ini teks <span class="strike">yang dicoret</span>.
        <span class="upperline">Ini teks dengan dekorasi garis di atas.</span>
    </p>
</body>
</html>

Pada contoh ini, kita memberikan style garis wavy dan dashed pada text-decoration.

Selain kedua gaya garis ini, masih ada gaya garis yang lain seperti dotted dan double.

Kamu bisa coba-coba sendiri.

Text Transform

Properti text-transform berfungsi untuk mengubah bentuk teks. Misalnya dari huruf kecil menjadi huruf besar.

Berikut ini nilai-nilai yang valid untuk text-transform.

lowercase untuk mengubah semua teks menjadi huruf kecil;
uppercase untuk mengubah semua teks menjadi huruf kapital (besar);
capitalize untuk mengubah teks pada huruf pertama kata menjadi kapital.
none untuk tidak melakukan transform.

Contoh penggunaan:

1
2
3

h1 {
  text-transform: capitalize;
}

Buatlah file HTML baru dengan nama text-transform.html kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Transform</title>
    <style>
        h1 {
            text-transform: capitalize;
        }
        
        .upper {
            text-transform: uppercase;
        }

        .lower {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <h1>latihan teks transform</h1>

    <p>
        <span class="upper">hello world</span> ini adalah contoh paragraf.
        <span class="lower">TEKS INI DITULIS DENGAN HURUF KAPITAL, TAPI hasilnya
            AKAN MENJADI LOWERCASE. KARENA CSS YANG MENGATURNYA.
        </span>
    </p>
</body>
</html>

Setelah itu buka dengan web browser.

Perhatikan! Meskipun di HTML kita tulis elemen h1 dengan huruf kecil, tapi hasilnya akan ditransformasi menjadi huruf besar untuk huruf di setiap awal kata. Ini karena kita memberikan text-transform: capitalize.

Begitu juga untuk teks pada paragraf. Teks hello world ditampilkan dengan huruf besar, karena kita memberikan nilai uppercase pada class upper.

Text Spacing

Text Spacing adalah ruang kosong pada teks. CSS menyediakan beberapa properti untuk mengatur spacing pada teks.

text-indent untuk mengatur indentasi;
letter-spacing untuk mengatur jarak spasi antar huruf;
line-height untuk mengatur jarak antar baris;
word-spacing untuk mengatur jarak antar kata;
white-space untuk mengatur white space pada teks.

Biar lebih jelas, mari kita coba latihan.

Buatlah file HTML baru dengan nama text-spacing.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Spacing</title>
    <style>
        h1 {
            letter-spacing: -2px;
            word-spacing: 4px;
        }

        .small {
            font-size: 8px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .line-height {
            line-height: 1.6;
        }

        .indent {
            text-indent: 2em;
        }

        .nowrap {
            white-space: break-spaces;
        }
    </style>
</head>
<body>
    <h1>Contoh Text Spacing</h1>
    <p class="small">Contoh teks dengan ukuran kecil</p>

    <p class="indent">
        Ini adalah contoh paragraf dengan teks indent. Artinya, teks pada baris
        pertama akan masuk ke dalam sepanjang 2em. Panjang 2em sama dengan 2x16px,
        maka 2em akan bernilai 32px.
    </p>
    <p class="line-height">
        Ini adalah contoh paragraf tanpa indent. Paragraf normal dengan line height
        sebesar 1.6. Normalnya line height tiap teks adalah 1. Tapi line height 1
        sulit dibaca jika ada banyak teks. Line height 1.6 akan membuat teks jadi mudah
        dibaca, karena ada spasi atau jarak di antara baris.
    </p>
    <p class="nowrap">
        Ini conoth paragraf dengan white-space: break-spaces.
        Artinya wthie space pada paragraf ini, akan mengikuti
        spasi seperti yang ditulis di dalam HTML.
    </p>
</body>
</html>

Setelah itu, buka dengan web browser.

Pada contoh ini, kita memberikan letter-spacing: -2px dan word-spacing: 4px pada elemen h1. Ini akan membuat hurufnya merapat dan jarak antar katanya 4px.

Jarak huruf yang dekat cocok dipakai untuk judul atau teks dengan ukuran huruf yang besar.

Lalu di paragraf berikutnya, kita memberikan jarak huruf 2px dengan transformasi teks uppercase.

Biasanya teks dengan ukuran huruf kecil akan lebih mudah dibaca jika dikasih letter-spacing yang lebih besar dan uppercase.

Pada paragraf berikutnya kita menerapkan text-indent, properti ini akan membuat teks masuk ke dalam pada baris pertama paragraf.

Kemudian di paragraf berikutnya, kita menggunakan line-height sebesar 1.6. Ini berfungsi untuk mengatur jarak antar baris.

Secara default, nilai line-height adalah 1. Jika kita memberikan nilai di atas 1, maka jarak barisnya akan semakin menjauh. Begitu juga sebaliknya, jika diberikan nilai di bawah 1 maka jarak barisnya akan semakin dekat.

Pada paragraf terakhir, kita menggunakan properti white-space untuk mengatur metode white space yang digunakan pada paragraf.

Supaya semakin paham, cobalah untuk bereksperimen dengan mengubah-ubah nilai pada properti tersebut.

Kamu bisa manfaatkan inscpect element pada browser.

Text Overflow

Properti text-overflow berfungsi untuk mengatur panjang teks yang melebihi ukuran dari elemen.

Misalnya, kita punya elemen dengan ukuran 100px, lalu kita isi dengan teks yang panjangnya lebih dari 100px. Maka ini akan menyebabkan teks overflow.

Secara default, teks akan ditulis ke baris baru jika melebihi batas elemen. Namun, pada kondisi tertentu, seperti saat kita menggunakan whitespcae: nowrap dan overflow:hidden teks tidak akan ditulis ke baris baru.

Oleh sebab itu, pada kasus ini kita membutuhkan text-overflow untuk mengatur teks tersebut.

Buatlah file HTML baru dengan nama text-overflow.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Overflow</title>
    <style>
        p {
            width: 320px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>
        Ini adalah contoh paragraf yang cukup panjang. Ukuran elemen paragraf 
        ini sudah diatur pada CSS dengan panjang 320px. Akan tetapi panjang
        teks pada paragraf ini melebihi ukuran paragraf. Maka akan terjadi
        teks overflow. Tapi tenang saja, teks overflow bisa kita atur di CSS
        dengan properti text-overflow.
    </p>
</body>
</html>

Setelah itu, buka di web browser.

Perhatikan pada ujung paragraf, ditambahkan …. Ini karena kita memberikan nilai elipsis pada properti text-overflow.

Text Shadow

Properti text-shadow merupakan properti untuk memberikan bayangan pada teks. Properti ini mulai ada pada CSS3.

Format nilai untuk text-shadow adalah sebagai berikut:

text-shadow: x y blur warna;
x adalah jarak bayangan berdasarkan sumbu x (vertikal);
y adalah jarak bayangan berdasarkan sumbu y (horizontal);
blur adalah ukuran kepudaran dari bayangan;
warna adalah warna bayangan, bisa diberikan dalam nama warna, fungsi rgb(), hsl(), dsb.

Buatlah file HTML baru dengan nama text-shadow.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Shadow</title>
    <style>
        h1 {
            color: lime;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>
    <h1>Contoh Text Shadow</h1>
</body>
</html>

Setelah itu, buka dengan web browser.

Apa Selanjutnya?
Sejauh ini kita sudah belajar cara styling teks sehingga bisa terlihat lebih menarik.

Ada banyak properti yang harus kamu ingat.

Tapi tenang. Semuanya tidak perlu dihafal.

Kamu bisa manfaatkan inspect element, jika tidak ingat dan bereksperimenlah di sana.

Berikutnya kita akan belajar tentang font styling pada CSS.

Cara Menggunakan font di CSS

Pada tutorial sebelumnya, kita sudah belajar gimana cara mengatur teks dengan CSS seperti mengatur alignment, spacing, transform, dan sebagainya.

Kali ini kita akan membahas tentang properti font- yang juga berfungsi untuk mengatur teks. Lebih tepatnya mengatur font pada teks.

Ada beberapa properti yang akan kita bahas:

font-size untuk mengatur ukuran font;
font-weight untuk mengatur ketebalan font;
font-style untuk mengatur gaya font;
font-family untuk mengatur jenis font;

Mengatur Ukuran Font

Untuk mengatur ukuran font, kita bisa menggunakan properti font-size. Properti ini dapat kita beri nilai dengan satuan px (piksel), % (persentase), em, rem, dan lain-lain.

Contoh:

1
2
3

p {
  font-size: 18px;
}

Artinya, Kita akan mengatur ukuran font untuk semua elemen p sebesar 18px.

Secara default ukuran font untuk elemen p adalah 16px. Ini bisa kita ubah sesuai selera.

Selain menggunakan angka, ada juga nilai bawaan yang sudah tersedia seperti:

normal untuk ukuran normal (16px);
small untuk ukuran kecil;
large untuk ukuran besar;
x-large untuk ekstra besar;
xx-large untuk ekstra-ekstra besar;
x-small untuk teks yang lebih kecil dari small;
xx-small untuk teks yang dua kali lebih kecil dari small;

Biar lebih jelas, mari kita coba latihan.

Buatlah file HTML baru dengan nama font-size.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

Setelah itu, buka dengan web browser.

Pada contoh ini, kita mengatur ukuran font untuk elemen h1 adalah 24px. Kamu bisa lihat sendiri hasilnya.

Lalu ukuran font pada paragraf pertama adalah large yang artinya lebih besar dari ukuran normal (16px).

Kemudian pada paragraf kedua, kita tidak mengatur ukuran font-nya. Sehingga akan menggunakan ukuran normal, yakni 16px.

Kemudian paragraf terakhir kita beri ukuran font-nya dengan small.

Sangat mudah bukan. Silakan coba eksperimen di inspect elemen, ubahlah ukuran font-nya dari sana.

Mengatur Ketebalan Font

Untuk mengatur ketebalan font, kita bisa menggunakan properti font-weight. Properti ini dapat kita berikan nilai berupa angka ukuran ketebalan atau nilai konstan yang sudah ada.

Contoh nilai-nilai yang valid:

lighter untuk ketebalan yang tipis;
normal untuk ketebalan normal;
bold untuk membuat font lebih tabal;
bolder untuk membuat font lebih tebal lagi;
100 sampai 900 rentang angka ketebalan.

Contoh penggunaan:

1
2
3

p {
  font-weight: bold;
}

Artinya, Kita akan mengatur ketebalan font semua elemen p dengan font yang lebih tebal.

Buatlah file HTML baru dengan nama font-weight.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

Setelah itu, buka dengan web browser.

Pada paragraf pertama, kita mengatur ketebalan font-nya dengan lighter, akan tetapi hasilnya normal.

Mengapa? Ini karena font yang digunakan tidak memiliki font dengan ketebalan tipis atau lighter.

Coba ganti jenis font-nya, misalnya pakai roboto.

Tambahkan CSS berikut:

1
2
3

body {
	font-family: roboto;
}

Pastikan font roboto sudah terinstal di komputermu.

Ketebalan font pada paragraf pertama akan lebih tipis, karena font Roboto punya ketebalan lighter.

Mengatur Font Style

Properti font-style digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah:

normal – teks normal;
italic – teks miring (italic);
oblique – teks miring seperti italic;

Contoh:

1
2
3

blockquote {
	font-style: italic;
}

Artinya, Kita akan mengatur semua elemen blockquote dengan style font miring.

Buatlah file baru dengan nama font-style.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

Setelah itu, buka dengan web browser.

Pada contoh ini, kita mengatur font style untuk elemen blockquote menjadi italic dan cite menjadi normal.

Mengatur Jenis Font

Untuk mengatur jenis font, kita bisa gunakan properti font-family. Properti ini bisa kita isi dengan nama font dan juga nama family dari font.

Secara umum ada lima jenis family font:

Sans Serif – Font tanpa tanduk;
Serif – Font yang ujungnya punya tanduk;
Monospace – Font dengan ukuran space yang sama;
Cursive – Font seperti tulisan tangan;
Fantasy – Font dengan bentuk yang menarik.

Contoh:

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

Font yang dipakai akan menggunakan default font yang dipakai pada sistem.

Selain menggunakan nama family, kita juga bisa menggunakan nama font-nya langsung.

Buatlah file HTML baru dengan nama font-family.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

Setelah itu, buka dengan browser.

Coba perhatikan pada kode CSS untuk elemen h1.

1
2
3

h1 {
	font-family: Arial, Helvetica, sans-serif;
}

Pada kode CSS ini, kita menggunakan tiga font, yakni Arial, Halvetica, dan sans-serif.

Jika di komputer kita tidak ada font Arial, maka font Halvetica yang akan dipakai. Begitu juga jika tidak ada font Halvetica, maka font sans-serif yang akan dipakai.

Selain menggunakan font yang sudah terinstal di komputer, kita juga bisa menggunakan font yang ada di internet. Contohnya seperti Google Font.

Menggunakan Font dari Google

Untuk menggunakan font dari Google Font, kita harus mengimpor font-nya terlebih dahulu dengan tag link di HTML atau kata kunci @import di CSS.

Contoh: dengan tag link di HTML.

1	<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap" rel="stylesheet">

Contoh: dengan kata kunci @import di CSS.

1	@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');

Buatlah file baru dengan nama font-google.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font dari Google</title>
    <style>
        h1 {
            font-family: 'Permanent Marker', cursive;
        }
        
        p {
            font-family: 'Caveat', cursive;
        }
    </style>
</head>
<body>

    <h1>Contoh Font dari Google</h1>
    <p>Ini adalah paragraf yang menggunakan font dari Google.</p>
    
</body>
</html>

Pada contoh ini kita belum mengimpor font dari Google.

Font yang digunakan adalah font cursive yang ada di komputer.

Sekarang mari kita coba tambahkan font dari Google.

Silakan buka font berikut:

Permanent Marker
Caveat

Setelah itu, klik Select this style.

Setelah itu, kita akan mendapatkan kode untuk mengimpor font ke HTML.

Silakan copy kode tersebut, kemudian taruh di dalam tag head kode kita.

Sehingga sekarang kodenya menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font dari Google</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <style>
        h1 {
            font-family: 'Permanent Marker', cursive;
        }
        
        p {
            font-family: 'Caveat', cursive;
        }
    </style>
</head>
<body>

    <h1>Contoh Font dari Google</h1>
    <p>Ini adalah paragraf yang menggunakan font dari Google.</p>
    
</body>
</html>

Mantap, sekarang font yang digunakan adalah font dari Google.

Apa Selanjutnya? Kita sudah belajar mengatur font dengan properti font, sebenarnya masih ada lagi properti yang belum kita bahas seperti font-kerning, font-palette, font-synthesis, dan sebagainya.

Yang sudah kita bahas di atas, adalah yang paling sering dipakai. Sisanya silakan lakukan eksperimen sendiri di inspect element.

Selanjutnya silakan pelajari tentang border di CSS.