Bagaimana anda membuat teks dalam css menjadi di tengah?

Question

Hallo kawan-kawan, kali ini saya akan berbagi pengetahuan tentang Contoh Code Cara Membuat Text di Tengah Dengan HTML dan CSS

Table of Contents Show

Text Direction
Text Decoration
Text Transform
Text Spacing
Text Overflow
Text Shadow
Tag apa yang membuat tulisan berada di tengah?
Apa itu text decoration?
Apa itu center di HTML?

Sebelum membahas judul di atas , ini ada Sedikit kutipan atau Motivasi Buat kawan kawan semua..

"Pendidikan adalah senjata paling mematikan di dunia, karena itu, Anda mampu mengubah dunia"..

...

Ok Langsung saja kita bahas tentang : Cara Membuat Text di Tengah Dengan HTML dan CSS

Banyak cara yang bisa digunakan untuk membuat text atau objek agar berada di tengah atau center dengan menggunakan html dan css.

Berikut beberapa cara yang bisa di ikuti :

Dengan HTML

Anda bisa menggunakan cara berikut ini langsung di tag yang ada di file .html yang dibuat

Dengan Inline CSS

Anda bisa menyisipkan CSS secara inline atau langsung di tag html seperti berikut ini :

Dengan Eksternal CSS

Anda juga bisa memanggil file css seperti biasanya dan menyertakan script berikut di file css tersebut, script ini akan membuat tag p (paragraph) akan berada di tengah

p {text-align:center}

selamat mencoba

" Demikianlah Artikel yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca artikel ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.

Dan kami juga sangat mengharapkan yang membaca artikel ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena saya membuat artikel ini mempunyai arti penting yang sangat mendalam.

Setelah kita belajar tentang properti

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

4 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, diantaranya

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

5,

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

6,

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

7,

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

8, dan

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

9.

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

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

5. Properti ini punya nilai yang valid:

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

1 untuk rata kiri;

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

2 untuk rata kanan;

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

3 untuk rata tengah;

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

4 untuk rata kiri dan kanan;

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

5 rata pada awal (mengikuti

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

6);

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

7 rata pada akhir (mengikuti

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

6);

Contoh penggunaan:

header {
  text-align: center;
}

p {
	text-align: justify; 
}

Biar lebih jelas, mari kita coba latihan.

Buatlah file baru dengan nama

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

9, 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

Kemudian, coba buka dengan web browser.

Maka hasilnya:

Teks berhasil diratakan sesuai dengan yang kita inginkan.

Text Direction

CSS punya properti

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

6 untuk menentukan arah baca teks. Misalnya dari kiri ke kanan (

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

1) atau dari kanan ke kiri (

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

2).

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

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

6 menggunakan left to right (

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

1), 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

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

6-nya menjadi

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

2 (right to left).

Mari kita coba!

Buatlah file HTML baru dengan nama

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

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

Maka hasilnya:

Secara default, teks akan rata kanan..

Ini karena kita mengatur

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

8 (kanan ke kiri).

Nah, di sini baru kita juga bisa menerapkan

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

5 dengan nilai

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

5 dan

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

7.

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>

Hasilnya:

Paragraf ke-2 akan rata kiri, karena kiri adalah akhir dari

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

6. Sedangkan paragraf pertama akan tetap rata di kanan, karena

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

6 di mulai dari kanan.

Text Decoration

Properti

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

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

Properti ini punya nilai beripa:

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

5 artinya tidak menggunakan dekorasi apapun;

```
.deleted {
	text-decoration: line-through;
}
```
6 artinya kita akan memberikan dekorasi garis bawah;

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

7 dekorasi dengan garis di atas teks;

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

8 dekorasi garis di tengah atau teks tercoret.

Contoh penggunaan:

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

Biar semakin paham, mari kita coba latihan.

Buatlah file baru dengan nama

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

9, 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.

Maka hasilnya:

Pada contoh ini, } } } } } kita menggunakan elemen

<!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>

0 dengan class text-decoration yang sudah kita buat di CSS.

O ya, kita sengaja menggunakan

<!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>

1 pada paragraf agar dekorasi

<!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>

2 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:

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

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

Mari kita coba!

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>

Maka hasilnya:

Pada contoh ini, kita memberikan style garis

<!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>

3 dan

<!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>

4 pada

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

6.

Selain kedua gaya garis ini, masih ada gaya garis yang lain seperti

<!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>

6 dan

<!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>

7.

Kamu bisa coba-coba sendiri.

Text Transform

Properti

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

7 berfungsi untuk mengubah bentuk teks. Misalnya dari huruf kecil menjadi huruf besar.

Berikut ini nilai-nilai yang valid untuk

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

7.

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

0 untuk mengubah semua teks menjadi huruf kecil;

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

1 untuk mengubah semua teks menjadi huruf kapital (besar);

```
.underline {
	text-decoration: underline wavy green;
}
```
2 untuk mengubah teks pada huruf pertama kata menjadi kapital.

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

5 untuk tidak melakukan transform.

Contoh penggunaan:

h1 {
  text-transform: capitalize;
}

Mari kita coba latihan!

Buatlah file HTML baru dengan nama

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

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

Maka hasilnya:

Perhatikan!

Meskipun di HTML kita tulis elemen

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

5 dengan huruf kecil, tapi hasilnya akan ditransformasi menjadi huruf besar untuk huruf di setiap awal kata. Ini karena kita memberikan

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

6.

Begitu juga untuk teks pada paragraf. Teks

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

7 ditampilkan dengan huruf besar, karena kita memberikan nilai

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

1 pada class

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

9.

Text Spacing

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

<!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>

0 untuk mengatur indentasi;

<!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>

1 untuk mengatur jarak spasi antar huruf;

<!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>

1 untuk mengatur jarak antar baris;

<!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>

3 untuk mengatur jarak antar kata;

<!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>

4 untuk mengatur white space pada teks.

Biar lebih jelas, mari kita coba latihan.

Buatlah file HTML baru dengan nama

<!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>

5, 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

0

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada contoh ini, kita memberikan

<!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>

6 dan

<!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>

7 pada elemen

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

5. Ini akan membuat hurufnya merapat dan jarak antar katanya

<!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>

9.

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

Lalu di paragraf berikutnya, kita memberikan jarak huruf

h1 {
  text-transform: capitalize;
}

0 dengan transformasi teks

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

1.

Biasanya teks dengan ukuran huruf kecil akan lebih mudah dibaca jika dikasih

<!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>

1 yang lebih besar dan

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

1.

Pada paragraf berikutnya kita menerapkan

<!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>

0, properti ini akan membuat teks masuk ke dalam pada baris pertama paragraf.

Kemudian di paragraf berikutnya, kita mengunakan

<!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>

1 sebesar

h1 {
  text-transform: capitalize;
}

6. Ini berfungsi untuk mengatur jarak antar baris.

Secara default, nilai

<!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>

1 adalah

h1 {
  text-transform: capitalize;
}

8. Jika kita memberikan nilai di atas

h1 {
  text-transform: capitalize;
}

8, maka jarak barisnya akan semakin menjauh. Begitu juga sebaliknya, jika diberikan nilai dibawah

h1 {
  text-transform: capitalize;
}

8 maka jarak barisnya akan semakin dekat.

Pada paragraf terakhir, kita menggunakan properti

<!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>

4 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

<!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>

2 berfungsi untuk mengatur panjang teks yang melebihi ukuran dari elemen.

Misalnya, kita punya elemen dengan ukuran

<!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>

3, lalu kita isi dengan teks yang panjangnya lebih dari

<!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>

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

<!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>

5 dan

<!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>

6 teks tidak akan ditulis ke baris baru.

Oleh sebab itu, pada kasus ini kita membutuhkan

<!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>

2 untuk mengatur teks tersebut.

Mari kita latihan!

Buatlah file HTML baru dengan nama

<!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>

8, 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

1

Setelah itu, buka di web browser.

Maka hasilnya:

Perhatikan pada ujung paragraf, ditambahkan

<!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>

9. Ini karena kita memberikan nilai

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

00 pada properti

<!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>

2.

Text Shadow

Properti

<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.
        Silahkan 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.
        Silahkan 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.
        Silahkan 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.
        Silahkan tulis isi paragraf sesukamu. Cobalah perhatikan hasilnya di browser.
      </p>
    </article>

  </body>
</html>

9 merupakan properti untuk memberikan bayangan pada teks. Properti ini mulai ada pada CSS3.

Tag apa yang membuat tulisan berada di tengah?

Menggunakan Penanda “Center” pada HTML.

Apa itu text decoration?

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

Apa itu center di HTML?

Elemen HTML center merupakan tipe block level element, yang mana elemen tipe ini akan membagi halaman HTML menjadi bagian yang terpisah, atau menjadi blok.

kode css