Cara menggunakan css text-justify full width

Penggunaan website di era Revolusi Industri 4.0 kian bertambah seiring banyaknya aktivitas yang beralih ke online. Untuk membuat web diperlukan bahasa pemrograman HTML (Hyper Text Markup Language) dan CSS (Cascading Style Sheets). HTML berfungsi untuk membuat konten atau kerangka logis pada halaman web. Sedangkan fungsi CSS adalah untuk mendesain halaman website seperti mengatur warna background dan font yang digunakan, ukuran layout, mengubah tampilan form, dan masih banyak lagi. Jika kamu ingin membuat tampilan website menjadi lebih interaktif, maka kamu wajib belajar CSS untuk menguasai skill web design. Berikut pengenalan CSS dan HTML.

Tentang CSS

Seiring berkembanganya teknologi, CSS tidak hanya digunakan di HTML saja. Tapi juga dapat digunakan untuk mendesain tampilan aplikasi Android. Coding CSS menggunakan penanda id atau class. Berikut contoh tutorial HTML dan CSS dasar.

Dalam tutorial CSS di atas, terdapat atribut style pada tag <h1> di mana nilai dari atribut tersebut adalah kode CSS yang ingin diterapkan. Pada dasarnya HTML adalah kumpulan dari tag-tag yang disusun hingga memiliki bagian-bagian tertentu seperti paragraf, list atau tabel. Sedangkan CSS digunakan untuk mendesain tag-tag HTML ini. Pada contoh di atas ‘p’ (paragraf) merupakan bagian baris kode CSS untuk menspesifikasikan elemen HTML atau disebut selector. Dalam sintaks CSS, informasi yang ada di dalam tanda kurung merupakan sebuah deklarasi yang di dalamnya terdapat properti dan nilai yang diaplikasikan ke dalam selector.

Contoh properti dalam struktur dasar CSS adalah ukuran, font, warna, layout, format teks, dan sebagainya. Sedangkan nilai yang dimaksud adalah pengaturan yang diterapkan dalam properti. Misalnya dari contoh di atas, ‘color’ dan ‘text-align’ merupakan properti, sedangkan ‘blue’ dan ‘center’ adalah sebuah nilai. Jadi struktur CSS yang ada dalam tanda kurung color:blue;text-align:center; merupakan sebuah deklarasi. Lalu ‘p’ dalam paragraf HTML adalah sebuah selector. Keduanya merupakan prinsip dasar dari penggunaan CSS dan HTML.

Coding CSS

Kebutuhan akan halaman web yang semakin kompleks membuat bahasa CSS diperlukan untuk bisa membuat suatu paragraf menjadi berwarna sesuai dengan yang kita inginkan. Penggunaannya yang sangat mudah membuat CSS kerap digunakan, bahkan untuk programmer pemula sekalipun untuk membuat website modern. Jika kamu ingin belajar basic CSS, berikut contoh coding CSS.

Kode CSS Lengkap

CSS memungkinkan kita mengubah tampilan halaman website tanpa mengubah isi dari halaman tersebut. Kamu bisa belajar CSS lengkap dengan melihat panduan cara mendesain tampilan website berikut ini.

Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.
Start aligned text on viewports sized MD (medium) or wider.
Start aligned text on viewports sized LG (large) or wider.




Start aligned text on viewports sized XL (extra-large) or wider.

Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.

Text wrapping and overflow

Wrap text with a

  This text should wrap.

  This text should wrap.

Prevent text from wrapping with a

  This text should wrap.

This text should overflow the parent.

  This text should overflow the parent.

Word break

Prevent long strings of text from breaking your components' layout by using

  This text should wrap.

  This text should wrap.

  This text should wrap.

  This text should wrap.

  This text should overflow the parent.

  This text should wrap.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

Lowercased text.
Uppercased text.
CapiTaliZed text.

Note how

  This text should overflow the parent.

Font size

Quickly change the

  This text should overflow the parent.

  This text should overflow the parent.

  This text should overflow the parent.

  This text should overflow the parent.

  This text should overflow the parent.

  This text should overflow the parent.

  This text should overflow the parent.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text

Customize your available

  This text should overflow the parent.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Font weight and italics

Quickly change the

  This text should overflow the parent.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

  This text should overflow the parent.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style

Line height

Change the line height with

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

Berfungsi sebagai apakah text

Apa itu text

Apa itu text decoration?