Kursus IT Dasar CSS 022_Teks, Font, Tautan

Teks

Kontrol teks CSS membantu kita menampilkan informasi teks di halaman web dengan lebih baik dan meningkatkan efek visual.

Indentasi

Digunakan untuk mengatur indentasi baris pertama teks, cocok untuk indentasi paragraf. Hindari penggunaan pada elemen inline. Properti ini menerima nilai absolut atau relatif. Unit absolut meliputi piksel (px), inci (in), sentimeter (cm), milimeter (mm), dll. Unit relatif meliputi em, rem, vw, vh, dll.

Contoh:

1
p {
2
  text-indent: 2em;
3
}

Efek:

Mode Penulisan

Mode penulisan dalam CSS mengacu pada arah penataan teks, termasuk mode horizontal, vertikal, dan campuran. Sebenarnya, ini mengatur arah tampilan elemen blok pada halaman — baik dari atas ke bawah, dari kanan ke kiri, atau dari kiri ke kanan. Ini menentukan arah teks.

• horizontal-tb: Aliran blok dari atas ke bawah. Arah teks yang sesuai adalah horizontal.
• vertical-rl: Aliran blok dari kanan ke kiri. Arah teks yang sesuai adalah vertikal.
• vertical-lr: Aliran blok dari kiri ke kanan. Arah teks yang sesuai adalah vertikal.

Contoh:

1
body {
2
  writing-mode: vertical-rl;
3
}

Efek: Ketika kita mengubah mode penulisan, kita juga mengubah arah blok dan teks inline. Dalam mode penulisan horizontal-tb, arah blok adalah horizontal dari atas ke bawah, sedangkan dalam mode vertical-rl, arah blok adalah vertikal dari kanan ke kiri. Dimensi blok selalu mengacu pada arah tampilan blok dalam mode penulisan halaman. Dimensi inline selalu mengacu pada arah teks.

Gambar ini menunjukkan dua dimensi dalam mode penulisan horizontal.

Gambar ini menunjukkan dua dimensi dalam mode penulisan vertikal.

Arah Teks

Gunakan properti direction untuk mengatur arah baca teks: dari kiri ke kanan (ltr) atau dari kanan ke kiri (rtl). Cocok untuk situs web multibahasa, mengatur arah baca sesuai bahasa teks. Beberapa bahasa (seperti Arab) ditulis secara horizontal tetapi dari kanan ke kiri.

Contoh:

1
html {
2
  direction: rtl;
3
}

Efek:

Dekorasi Teks

Gunakan properti text-decoration untuk mengatur efek dekorasi garis pada teks.

• none: Tanpa garis
• overline: Garis atas
• underline: Garis bawah
• line-through: Garis coret

Contoh:

1
<p style="text-decoration: none;">Tidak ada garis teks</p>
2
<p style="text-decoration: overline;">Saya punya garis atas</p>
3
<p style="text-decoration: underline;">Saya punya garis bawah</p>
4
<p style="text-decoration: line-through;">Saya punya garis coret</p>

Efek:

Perataan Teks

Mengatur perataan horizontal teks.

• left: Teks rata kiri, nilai default di sebagian besar bahasa.
• center: Teks rata tengah horizontal.
• right: Teks rata kanan.
• justify: Teks rata kanan-kiri, mengisi setiap baris dengan spasi tambahan. Karena penataan teks dan lebar kontainer (teks pendek, kurang spasi, baris terlalu sedikit, bahasa tunggal), dalam beberapa kasus efek justifikasi mungkin tidak mudah terlihat.
• justify-all (jarang digunakan): Mirip dengan justify, tetapi mendistribusikan spasi tambahan secara merata di awal dan akhir baris.
• start: Tergantung arah teks browser, teks diratakan di awal (biasanya kiri).
• end: Tergantung arah teks browser, teks diratakan di akhir (biasanya kanan).

Contoh:

1
<p style="text-align: left;">Teks ini rata kiri</p>
2
<p style="text-align: right;">Teks ini rata kanan</p>
3
<p style="text-align: center;">Teks ini rata tengah</p>

Efek:

Tinggi Baris

Dengan properti line-height, dapat mengatur tinggi antar baris teks. Menyesuaikan tinggi baris sesuai ukuran font dan kebutuhan desain dapat meningkatkan keterbacaan.

Contoh:

1
<p>Ini tinggi baris normal <br>Ini tinggi baris normal</p>
2
<p style="line-height: 3;">Lihat tinggi baris teks ini <br>Lihat tinggi baris teks ini</p>

Efek:

Spasi

Mengatur spasi antar konten teks.

• letter-spacing mengatur spasi antar huruf, karakter Cina, dan angka.
• word-spacing mengatur spasi antar kata (karakter di kedua sisi spasi).

Contoh:

1
<p style="letter-spacing: 10px;">Lihat spasi teks saya CSS</p>
2
<p style="word-spacing: 10px;">Lihat spasi teks saya CSS 123</p>

Efek:

Pemotongan Baris

Mengontrol cara teks melakukan pemotongan baris.

word-wrap: Terutama mengontrol pemotongan baris kata panjang atau URL, lebih cocok untuk skenario bahasa Inggris.

• normal (nilai default): Mengikuti aturan pemotongan baris normal, tidak mengizinkan pemotongan di dalam kata.
• break-word: Mengizinkan pemotongan di dalam kata, dapat memaksa pemotongan kata panjang atau URL.

Contoh:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">Lihat bagaimana saya melakukan pemotongan baris HelloCSS Hello-CSS</p>
2
    <p class="base example2">Lihat bagaimana saya melakukan pemotongan baris HelloCSS Hello-CSS</p>

Efek:

white-space: Mengontrol penanganan karakter spasi putih di dalam elemen, termasuk spasi, karakter baris baru, dll.

• normal (nilai default): Penanganan normal karakter spasi putih, menggabungkan spasi berurutan dan melakukan pemotongan baris sesuai karakter baris baru.
• nowrap: Tidak mengizinkan pemotongan baris teks, mengabaikan karakter baris baru.
• pre: Mempertahankan karakter spasi putih, tidak menggabungkan spasi berurutan, teks ditampilkan sesuai format kode sumber.
• pre-line: Mempertahankan karakter baris baru, menggabungkan spasi berurutan, spasi lainnya ditangani secara normal.
• pre-wrap: Mempertahankan karakter spasi putih, menggabungkan spasi berurutan, mempertahankan karakter baris baru.

Contoh:

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">Lihat bagaimana saya melakukan pemotongan baris HelloCSS Hello-CSS</p>
2
    <p class="base example2">Lihat bagaimana saya melakukan pemotongan baris HelloCSS Hello-CSS</p>
3
    <p class="base example3">Lihat bagaimana saya melakukan pemotongan baris HelloCSS Hello-CSS</p>

Efek:

Bayangan

Memungkinkan penambahan satu atau beberapa (dipisahkan koma) efek bayangan pada teks untuk meningkatkan keterbacaan atau menciptakan efek desain unik.

• h-shadow: Posisi bayangan horizontal. Bisa nilai positif (geser ke kanan) atau negatif (geser ke kiri).
• v-shadow: Posisi bayangan vertikal. Bisa nilai positif (geser ke bawah) atau negatif (geser ke atas).
• blur: Opsional. Menunjukkan tingkat keburaman bayangan, semakin besar nilainya semakin buram. Dapat dihilangkan.
• color: Warna bayangan. Bisa nilai warna spesifik, kata kunci, atau nilai RGBA.

Contoh:

1
<p style="text-shadow: 2px 2px black;">Lihat bayangan saya</p>
2
<p style="text-shadow: 1px 1px 1px red;">Lihat bayangan saya</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">Lihat bayangan saya</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">Lihat bayangan saya</p>

Efek:

Transformasi

Mengontrol transformasi huruf besar/kecil teks.

• none: Nilai default, mempertahankan huruf besar/kecil asli.
• capitalize: Mengubah huruf pertama setiap kata menjadi huruf besar.
• uppercase: Mengubah semua teks menjadi huruf besar.
• lowercase: Mengubah semua teks menjadi huruf kecil.

Contoh:

1
<p style="text-transform: none;">Lihat bagaimana saya ditransformasi hello CSS</p>
2
<p style="text-transform: capitalize;">Lihat bagaimana saya ditransformasi hello CSS</p>
3
<p style="text-transform: uppercase;">Lihat bagaimana saya ditransformasi hello CSS</p>
4
<p style="text-transform: lowercase;">Lihat bagaimana saya ditransformasi hello CSS</p>

Efek:

Overflow Teks

Dalam CSS, properti overflow dapat digunakan untuk menangani overflow teks.

• visible: Teks tidak overflow, ditampilkan sepenuhnya.
• hidden: Saat teks overflow, teks disembunyikan.
• scroll: Saat teks overflow, scrollbar ditampilkan agar pengguna dapat menggulir untuk melihat seluruh konten.
• auto: Saat teks overflow, keputusan menampilkan scrollbar tergantung pada lebar dan tinggi elemen.

Contoh:

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">Lihat apakah konten teks saya overflow</p>
2
    <p class="base example2">Lihat apakah konten teks saya overflow</p>
3
    <p class="base example3">Lihat apakah konten teks saya overflow</p>
4
    <p class="base example4">Lihat apakah konten teks saya overflow</p>

Efek:

Font

Cara mengontrol dan mendefinisikan font adalah bagian penting dari desain web.

Keluarga Font

Definisikan font dengan properti font-family. font-family dapat menentukan satu font, disarankan menyediakan beberapa font alternatif. Browser akan mencoba font-font ini secara berurutan berdasarkan prioritas hingga menemukan font yang tersedia dan sesuai. Jika nama font mengandung spasi, karakter khusus, atau karakter Cina, disarankan menggunakan tanda kutip. Layanan font web dapat digunakan, perhatikan hak cipta font.

Contoh:

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

Efek:

Ukuran

Ukuran font dalam CSS dapat diatur dengan properti font-size. Digunakan untuk mengatur ukuran font teks. Ukuran font dapat ditentukan dengan nilai absolut atau relatif. Dengan nilai absolut, ukuran font tetap dan tidak berubah dengan resolusi layar. Unit absolut meliputi: piksel (px), inci (in), sentimeter (cm), milimeter (mm), dll. Dengan nilai relatif, ukuran font relatif terhadap ukuran font elemen induk. Unit relatif meliputi: em, rem, vw, vh, dll. Menggunakan kata kunci untuk menentukan ukuran font dapat meningkatkan keterbacaan dan konsistensi. Kata kunci meliputi: xx-small, x-small, small, medium, large, x-large, xx-large.

Contoh:

1
body {
2
  font-size: 16px;
3
}

Desain responsif:

• Ukuran font dalam desain responsif harus relatif untuk memastikan pengalaman membaca yang baik di berbagai ukuran layar dan perangkat.

Aksesibilitas:

• Pastikan ukuran font cukup besar untuk memenuhi standar aksesibilitas. Disarankan menggunakan minimal 16px untuk teks isi.

Pemilihan unit font:

• Menggunakan unit relatif (em, rem, %) lebih baik menyesuaikan dengan preferensi ukuran font pengguna di browser, meningkatkan aksesibilitas situs web.

Pengaturan tinggi baris:

• Atur tinggi baris sesuai ukuran font untuk meningkatkan keterbacaan teks. Umumnya, tinggi baris dapat diatur 1,4 hingga 1,6 kali ukuran font.

Ketebalan

Ketebalan font dalam CSS dapat diatur dengan properti font-weight.

• normal: Ketebalan font default.
• bold: Font tebal.
• bolder: Lebih tebal dari elemen induk.
• lighter: Lebih tipis dari elemen induk.
• Nilai numerik: Mengatur ketebalan font dengan nilai numerik, biasanya dari 100 hingga 900.

Contoh:

1
<div style="font-weight: normal;">Ketebalan font default</div>
2

3
<div style="font-weight: bold;">
4
    Font tebal
5
    <div style="font-weight: bolder;">Lebih tebal dari elemen induk</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    Font tebal dengan nilai numerik
10
    <div style="font-weight: lighter;">Lebih tipis dari elemen induk</div>
11
</div>

Efek:

Gaya

Gaya font dalam CSS dapat diatur dengan properti font-style.

• normal: Gaya font default.
• italic: Gaya miring, menggunakan desain miring khusus dari file font.
• oblique: Gaya condong, mirip miring. Jika file font tidak memiliki desain miring khusus, ia memaksa kemiringan font normal.

Contoh:

1
<div style="font-style: normal;">Gaya font default 123 ABC</div>
2
<div style="font-style: italic;">Gaya miring 123 ABC</div>
3
<div style="font-style: oblique;">Gaya condong 123 ABC</div>

Efek:

Warna

Warna font dalam CSS dapat diatur dengan properti color.

• Nama warna yang telah ditentukan: misalnya, red, green, blue, dll.
• Nilai warna heksadesimal: misalnya, #FF0000, #00FF00, #0000FF, dll.
• Nilai warna RGB, RGBA: misalnya, rgb(255, 0, 0), rgba(0, 255, 0, 0.5), dll.
• Nilai warna HSL, HSLA: misalnya, hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7), dll.

Contoh:

1
<div style="color: blue;">Warna font</div>
2
<div style="color: #ff6a00;">Warna font</div>
3
<div style="color: rgba(0, 128, 0);">Warna font</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">Warna font</div>
5
<div style="color: hsla(0, 100%, 50%);">Warna font</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">Warna font</div>
7
<div style="color: transparent;">Warna font</div>

Efek:

Tautan

Dalam CSS, properti color dapat digunakan untuk mengatur warna font tautan (hyperlink).

Mengatur Warna Tautan

• a - Mengatur warna tautan global
• a:link - Normal, tautan yang belum dikunjungi
• a:visited - Tautan yang sudah dikunjungi pengguna
• a:hover - Saat pengguna mengarahkan mouse ke tautan
• a:active - Saat tautan diklik

Contoh:

1
/* Tautan global */
2
a {
3
  color: #3498db; /* Biru */
4
}
5

6
/* Tautan belum dikunjungi */
7
a:link {
8
    color: #3498db; /* Biru */
9
}
10

11
/* Tautan sudah dikunjungi */
12
a:visited {
13
    color: #884dff; /* Ungu */
14
}
15

16
/* Tautan saat hover mouse */
17
a:hover {
18
    color: #ff6600; /* Oranye */
19
}
20

21
/* Warna tautan saat diklik */
22
a:active {
23
    color: #ff0000; /* Merah */
24
}

Mengatur Garis Bawah Tautan

Contoh:

1
a {
2
    text-decoration: none; /* Hapus garis bawah */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* Tampilkan garis bawah saat hover */
7
}