Properti apa yang digunakan untuk mengatur posisi perataan text menggunakan CSS?

Dalam HTML, kita dapat menerapkan text formatting dasar seperti menebalkan, memiringkan, menggarisbawahi, atau mencoret text. Namun, bagaimana jika kita ingin melakukan text formatting yang lebih mendalam, seperti mengubah warna teks, mengatur jenis font dalam teks, mengatur perataan teks, dan lain-lain? Kita harus menggunakan CSS untuk mengaturnya.

Table of Contents Show

2. Text Formatting pada CSS
3. Properti Text Formatting pada CSS
3.1 Font Styling
3.2 Text Styling
4. Contoh Kasus
4.1. Membuat File p { text-align: left; } h1 { text-align: center; } h2 { text-align: right; } h3 { text-align: justify; }8
4.2. Mengedit Format Judul
4.3. Mengedit Format Paragraf
4.4. Mengubah Format Link pada Artikel
4.5. Mengubah Format Teks Referensi pada Akhir Paragraf
4.6. Tampilan Halaman Website Setelah Menerapkan Text Formatting CSS
Properti apa yang digunakan untuk mengatur posisi perataan teks menggunakan CSS?
Bagaimana cara mengatur rata teks HTML dengan CSS?
Apa kegunaan dari properti Text Shadow pada style CSS Cascading Style Sheet )?
Apa yang dimaksud dengan text decoration dalam CSS?

2. Text Formatting pada CSS

Dengan menggunakan CSS, kita dapat menerapkan text formatting dengan pilihan sintaks yang lebih beragam daripada hanya menggunakan HTML. Menerapkan text formatting pada CSS dapat membuat tampilan teks di dalam website menjadi terlihat lebih unik dan menarik.

3. Properti Text Formatting pada CSS

Properti yang digunakan untuk melakukan text formatting umumnya terbagi dalam dua kategori, yaitu:

Font styling: untuk mengatur tampilan tiap katakter pada teks.
Text styling: untuk mengatur tata letak, posisi, dan tampilan visual teks.

3.1 Font Styling

3.1.1. Font Family

Properti

p {
  font-size: 14px;
}

6 digunakan untuk menentukan standar font yang digunakan dalam teks. Properti

p {
  font-size: 14px;
}

6 dapat berisi beberapa nilai (dikenal sebagai font stack), sehingga jika browser pengguna tidak mendukung font utama yang digunakan, sistem dapat menggunakan font pengganti yang didukung oleh browser pengguna.

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

3.1.2. Font Size

Kita dapat menggunakan properti

p {
  font-size: 14px;
}

8 untuk menentukan ukuran teks. Font standar yang digunakan dalam browser umumnya berukuran

p {
  font-size: 14px;
}

p {
  font-size: 14px;
}

3.1.3. Font Weight

Properti

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

0 digunakan untuk mengatur ketebalan teks. Properti ini dapat diisi dengan nilai deskripsi seperti

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

3, dan lain-lain, serta dapat diisi dengan angka, yaitu nilai dengan rentang antara

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

4 (paling tipis) hingga

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

5 (paling tebal). Nilai font

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

1 adalah

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

7 dan nilai font

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

2 adalah

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

3.1.4. Font Style

Kita dapat menggunakan properti

a {
  font-style: italic;
}

0 untuk mengatur kemiringan teks. Properti ini mempunyai beberapa nilai, yaitu

p {
  font-weight: lighter;
}

h1 {
  font-weight: 900;
}

1 untuk teks normal, serta

a {
  font-style: italic;
}

2 dan

a {
  font-style: italic;
}

3 untuk teks miring.

a {
  font-style: italic;
}

3.2 Text Styling

3.2.1. Text Color

Kita dapat menggunakan properti

a {
  font-style: italic;
}

4 untuk menentukan warna teks. Properti color dapat berisi nilai deskripsi, seperti

a {
  font-style: italic;
}

a {
  font-style: italic;
}

a {
  font-style: italic;
}

a {
  font-style: italic;
}

8, dan lain-lain, atau dapat pula berisi color-hex, seperti

a {
  font-style: italic;
}

9 untuk warna merah,

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

0 untuk warna hitam, dan sebagainya.

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

3.2.2. Text Alignment

Kita dapat menggunakan properti

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

1 untuk menentukan perataan teks. Nilai

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

1 pada CSS mirip dengan nilai text alignment pada Microsoft Word, yaitu

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

5, dan

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

3.2.3. Text Indentation

Kita dapat menggunakan properti

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

7 untuk menambahkan indentasi pada teks. Text indentation umumnya digunakan pada awal paragraf. Nilai

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

7 dapat berupa nilai positif (indentasi ke dalam) dan nilai negatif (indentasi ke luar).

p {
  text-indent: 50px;
}

3.2.4. Text Transformation

Kita dapat menggunakan properti

p {
  color: blue;
}

h1 {
  color: #ff0000;
}

9 untuk menentukan formasi teks. Properti ini dapat memudahkan kita untuk mengubah huruf besar-kecil pada teks tanpa harus mengubah teksnya satu per satu di HTML.

h1 {
  text-transform: uppercase;
}

h2 {
  text-transform: lowercase;
}

h3 {
  text-transform: capitalize;
}

3.2.5. Text Decoration

Kita dapat menggunakan properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

0 untuk mendekorasi teks, yang umumnya digunakan untuk memodifikasi garis bawah yang terdapat pada link. Namun, kita juga dapat menggunakan properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

0 untuk mendekorasi teks lainnya.

a {
  text-decoration: none;
}

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

3.2.6. Line Height

Properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

2 digunakan untuk mengatur jarak antar baris. Fungsi ini mirip dengan line spacing yang terdapat di Microsoft Word.

p {
  line-height: 18px;
}

3.2.7. Letter Spacing dan Word Spacing

Kita dapat menggunakan properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

3 untuk mengatur jarak antar huruf. Properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

3 umumnya diterapkan pada teks yang menggunakan huruf kapital agar lebih mudah dibaca oleh pengguna.

Properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

5 mirip dengan

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

3, namun properti

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

5 digunakan untuk mengatur jarak antar kata dalam teks.

p {
  font-size: 14px;
}

4. Contoh Kasus

Di sini kita akan membuat halaman website yang berisi sebuah artikel dan menerapkan text formatting CSS di dalamnya.

4.1. Membuat File p { text-align: left; } h1 { text-align: center; } h2 { text-align: right; } h3 { text-align: justify; }8

Pertama-tama, buatlah file

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

8 dan isi file html tersebut dengan kode di bawah ini.

p {
  font-size: 14px;
}

Dalam file

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

8 ini terdapat class

p {
  text-indent: 50px;
}

1 untuk mengedit format paragraf referensi yang berada di akhir artikel.

Berikut tampilan file

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

8 setelah dibuka dengan browser.

4.2. Mengedit Format Judul

Pertama-tama, buatlah file

p {
  text-indent: 50px;
}

3 yang nantinya akan digunakan untuk menerapkan text formatting pada

p {
  text-align: left;
}

h1 {
  text-align: center;
}

h2 {
  text-align: right;
}

h3 {
  text-align: justify;
}

8. Gunakan selector

p {
  text-indent: 50px;
}

5 untuk mengubah format judul di dalam CSS.

Lalu, terapkan kode di bawah ini untuk mengubah format judul artikel.

p {
  font-size: 14px;
}

4.3. Mengedit Format Paragraf

Setelah mengubah format judul, selanjutnya kita akan mengubah format paragraf dengan menggunakan selector

p {
  text-indent: 50px;
}

Terapkan kode di bawah ini untuk mengubah format teks paragraf.

p {
  font-size: 14px;
}

4.4. Mengubah Format Link pada Artikel

Selanjutnya kita akan mengubah format link di dalam artikel agar tampilan artikel menjadi lebih menarik serta mudah dibaca oleh pengunjung.

Terapkan kode di bawah ini untuk mengubah format link pada artikel.

p {
  font-size: 14px;
}

4.5. Mengubah Format Teks Referensi pada Akhir Paragraf

Karena referensi tidak termasuk ke dalam paragraf di dalam artikel, kita harus membuat tampilan paragraf referensi tampak berbeda dengan paragraf artikel. Hal ini bertujuan agar pengunjung dapat membedakan paragraf berisi artikel dengan paragraf khusus referensi. Gunakan selector

p {
  text-indent: 50px;
}

7 untuk mengubah format teks yang ada pada suatu element yang memiliki class

p {
  text-indent: 50px;
}

Terapkan kode di bawah ini untuk mengubah format paragraf referensi.

p {
  font-size: 14px;
}

4.6. Tampilan Halaman Website Setelah Menerapkan Text Formatting CSS

Berikut tampilan akhir halaman website yang kita buat sebelumnya setelah menerapkan seluruh text formatting pada CSS.

Properti apa yang digunakan untuk mengatur posisi perataan teks menggunakan CSS?

Untuk mengatur rata text HTML dengan CSS, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan.

Bagaimana cara mengatur rata teks HTML dengan CSS?

Pengaturan perataan teks pada CSS dapat menggunakan properti text-align. Nilai pada properti ini akan membuat teks disusun sesuai dengan nilai perataannya. text-align: left | right | center | justify | inherit; Properti dengan nilai left artinya teks akan diatur dengan rata kiri.

Apa kegunaan dari properti Text Shadow pada style CSS Cascading Style Sheet )?

Properti text-shadow digunakan untuk menambahkan bayangan ke teks. Ia menerima daftar efek bayangan yang dipisahkan koma untuk diterapkan pada teks elemen. Setiap bayangan diterapkan pada teks elemen dan semua dekorasi teksnya (digabung menjadi satu).

Apa yang dimaksud dengan text decoration dalam CSS?

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).