Articles
Pengenalan ke CSS
Properti CSS terkait teks

Properti CSS terkait teks

Artikel ini menjelaskan properti CSS yang terkait dengan teks.

Anda dapat mempelajari penggunaan dan cara menulis properti text-align, text-decoration, dan text-transform.

YouTube Video

Membuat HTML untuk pratinjau

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Tipografi (Terkait Teks)

properti text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align adalah properti dalam CSS yang digunakan untuk menentukan perataan horizontal teks dan elemen inline. Ini biasanya digunakan untuk meratakan teks paragraf atau heading ke kiri, kanan, atau tengah. Ini memainkan peran penting dalam tata letak halaman web dan pemformatan teks.

Nilai utama untuk text-align

left (rata kiri) 
1p {
2    text-align: left;
3}
  • left meratakan teks ke kiri (ini adalah metode perataan default untuk banyak bahasa).
right (rata kanan) 
1p {
2    text-align: right;
3}
  • right meratakan teks ke kanan. Ini sangat efektif untuk bahasa yang ditulis dari kanan ke kiri, seperti Arab dan Ibrani.
center (rata tengah) 
1p {
2    text-align: center;
3}
  • center meratakan teks ke tengah. Ini sering digunakan untuk judul dan heading.
justify (rata kanan-kiri) 
1p {
2    text-align: justify;
3}
  • justify meratakan tepi kiri dan kanan garis secara merata, memberikan kesan rapi. Ini digunakan dalam tata letak seperti koran dan majalah.
start (rata awal) 
1p {
2    text-align: start;
3}
  • start meratakan teks berdasarkan posisi awal. Untuk bahasa yang ditulis dari kiri ke kanan, ini berfungsi seperti perataan kiri.
end (rata akhir) 
1p {
2    text-align: end;
3}
  • end meratakan teks berdasarkan posisi akhir. Dalam bahasa yang ditulis dari kiri ke kanan, ini berfungsi seperti perataan kanan.

Penggunaan dan contoh text-align

Judul menggunakan perataan tengah
  • Perataan tengah sering digunakan untuk judul halaman web dan dokumen. Ini terlihat bagus dan menghasilkan desain yang seimbang secara visual.
Perataan kiri atau kanan untuk paragraf
  • Paragraf teks biasanya diratakan ke kiri secara default, tetapi perataan kanan atau tengah dapat digunakan untuk desain tertentu.
Rata teks secara merata
  • Saat diratakan dengan justify, setiap baris teks diratakan secara merata dengan tepi kiri dan kanan. Ini berguna untuk tata letak gaya koran atau majalah.

Ringkasan

  • text-align adalah properti CSS yang digunakan untuk meratakan teks atau elemen inline secara horizontal.
  • Ini dapat menangani berbagai tata letak seperti perataan kiri, perataan kanan, perataan tengah, dan perataan justify.
  • Memilih perataan yang sesuai berdasarkan tata letak dan tujuan desain adalah kunci untuk mencapai desain yang mudah dibaca dan indah.

Mari gunakan perataan teks secara efektif sebagai bagian dari desain Anda dengan text-align.

Properti text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration adalah properti CSS yang digunakan untuk menerapkan garis bawah, garis atas, coretan, atau garis bergaya khusus pada teks. Dengan menggunakan properti ini, Anda dapat membuat gaya teks menjadi lebih dekoratif atau lebih terlihat menonjol.

Penjelasan:

  • Kelas text-decoration-underline menampilkan garis bawah pada teks.
  • Kelas text-decoration-overline menggambar garis di atas teks.
  • Kelas text-decoration-line-through menerapkan coretan pada teks.
  • Kelas text-decoration-custom-underline adalah contoh kustomisasi warna, gaya, dan ketebalan garis bawah.

Nilai utama dari text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Menentukan none akan menghilangkan dekorasi apa pun dari teks. Digunakan ketika Anda ingin menghapus garis bawah dari tautan, misalnya.
underline 
1p {
2    text-decoration: underline;
3}
  • Menentukan underline akan menggambar garis bawah di bawah teks. Ini dapat digunakan untuk tautan atau bagian yang ingin Anda tekankan.
overline 
1p {
2    text-decoration: overline;
3}
  • Menentukan overline akan menggambar garis di atas teks. Digunakan untuk mengubah tampilan atau untuk dekorasi khusus.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Menentukan line-through akan menggambar coretan melintasi teks. Ini digunakan untuk menunjukkan koreksi.
blink（点滅）
  • blink adalah nilai yang menyebabkan teks berkedip, tetapi sebenarnya tidak digunakan karena tidak didukung lagi oleh sebagian besar browser.

Pengaturan lanjutan dari text-decoration

text-decoration memungkinkan pengaturan terperinci seperti berikut:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • Properti text-decoration-color memungkinkan Anda menentukan warna garis bawah atau coretan. Secara default, warnanya akan sesuai dengan warna teks, tetapi Anda dapat menambahkan aksen visual dengan memilih warna yang berbeda.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • Properti text-decoration-style memungkinkan Anda menentukan gaya dari garis dekoratif. Nilainya meliputi berikut ini:.
    • solid (Default, garis solid)
    • double (garis ganda)
    • dotted (garis titik-titik)
    • dashed (garis putus-putus)
    • wavy (garis bergelombang)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • Properti text-decoration-thickness memungkinkan Anda menentukan ketebalan garis dekoratif. Anda dapat menyesuaikannya menggunakan unit seperti 2px atau 0.1em, misalnya.

Ringkasan:

  • text-decoration adalah properti untuk menambahkan garis dekoratif pada teks, seperti garis bawah atau coretan.
  • Dengan text-decoration-color, text-decoration-style, dan text-decoration-thickness, kustomisasi yang lebih detail menjadi memungkinkan.
  • Ini sering digunakan untuk menekankan tautan atau teks penting, atau sebagai elemen desain.

Dengan menggunakan text-decoration, Anda dapat menambahkan aksen halus atau penekanan pada teks.

Properti text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform adalah properti CSS untuk mengubah huruf besar-kecil pada teks. Properti ini memungkinkan Anda mengontrol format tampilan teks yang ditentukan dalam HTML, secara otomatis mengubah huruf besar/kecil dari teks yang dimasukkan pengguna atau teks yang sudah ada.

Penjelasan:

  • Kelas text-transform-none menampilkan teks tanpa mengubahnya dari aslinya.
  • Kelas text-transform-capitalize mengubah huruf pertama dari setiap kata menjadi huruf besar.
  • Kelas text-transform-uppercase mengubah seluruh teks menjadi huruf besar.
  • Kelas text-transform-lowercase mengubah seluruh teks menjadi huruf kecil.

Nilai utama dari text-transform

none 
1p {
2    text-transform: none;
3}
  • Menentukan none membuat teks tetap tidak berubah.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Menentukan capitalize mengubah huruf pertama dari setiap kata menjadi huruf besar. Batas kata dikenali oleh spasi atau tanda baca.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Menentukan uppercase mengubah seluruh teks menjadi huruf besar.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Menentukan lowercase mengubah seluruh teks menjadi huruf kecil.
full-width
  • Menentukan full-width mengubah teks menjadi karakter full-width. Ini biasanya digunakan sebagai gaya khusus saat menangani Kanji atau Kana, tetapi hanya sedikit browser yang mendukungnya.

Ringkasan:

  • text-transform adalah properti CSS yang praktis untuk mengubah huruf besar/kecil dari teks.
  • Ini sering digunakan untuk menciptakan konsistensi visual untuk judul, menu navigasi, dan teks formulir.
  • Ini berguna saat Anda ingin menampilkan teks dalam gaya tertentu terlepas dari input pengguna.

Dengan menggunakan properti ini, Anda dapat dengan mudah memanipulasi teks sambil menjaga konsistensi visual.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS Terkait FontProperti CSS terkait dengan jarak teks