CSS - Penggunaan Text

Salah satu hal yang ingin saya tekankan pada pembelajar CSS khususnya pemula bahwa berlatih dengan praktek sangat disarankan dilakukan sebanyak mungkin termasuk menguji kebenaran melakukan debug dari contoh kode yang kami berikan.Jadi ayo mulai dan mulai. Mari kita mulai membuat file CSS kami dan menyimpannya sebagai file .CSS, pada aplikasi editor sehingga Anda tahu warnanya seperti yang Anda inginkan warnanya. Setiap kali mendesain halaman, simpan semua file HTML dalam satu folder dan file CSS di folder lain. Dan saya sangat mendorong Anda melakukan hal yang sama. Sangat penting untuk Anda ingat untuk menempatkan ekstensi file itu, atau hal-hal tidak akan berfungsi.

Jadi mulailah praktekkan materi-materi sebelumnya sampai pada CSS background. Ketika anda memberikannya latar belakang. Dan mencoba B3B3B3. Kita bisa memberinya font yang lebih besar jika Anda mau. Saya akan mengatakan ukuran font. Ayo buat 150%. Sedikit saja sesuatu yang berbeda. Kemudian menyimpan file dan memeriksa lihat apa yang terjadi. Apa yang berubah disitu. Meload kembali dan lihat apa yang terjadi, dan jika Anda perhatikan, tidak ada yang terjadi. Ternyata anda belum menghubungkan antara CSS style dengan benar ke file HTML. Ingat bagaimana saya mengatakannya kepada Anda, saya selalu berpikir meletakkan sesuatu di folder bernama CSS? Saya perlu memasukkan itu. Baiklah, kembalilah. Muat ulang. Dan terlihat hasilnya sesuai keinginan atau tidak. Anda uji lagi dengan memilih latar belakang. Dan mari kita lanjutkan, oh ternyata kita perlu menyelaraskan text.

Ketika semuanya sudah dipraktekkan dan hasilnya sesuai keinginan, kita lanjut di materi penyelarasan text ini. Biasa pada aplikasi Microsoft word, anda mengenal seperti text-align: center, agar textnya nampak rata tengah. Tampaknya sama pada CSS namun ayo kita pelajari materi ini.

CSS text digunakan dalam mengatur tampilan teks dalam html, baik itu text color (warna text alignment (posisi teks rata kiri, kanan, justify, atau center), text decoration (garis bawah), text transformation (text kapital atau huruf kecil), juga text indentation (posisi teks menjorok). Seperti contoh-contoh sebelumnya, semisal H1 title, anda buat berwarna biru, dan background kuning, untuk menjadikan H1 kita nampak di tengah, anda tambahkan kode text-align:center;

H1 { color: blue;
background-color: yellow;
text-align:center;
/*komentar satu baris*/
}

Simpan, segarkan. Halaman mulai terlihat sedikit berbeda sepanjang waktu. Properti teks berikut dari suatu elemen -

  • Properti color digunakan untuk mengatur warna teks.
  • Properti direction digunakan untuk mengatur arah teks.
  • Properti letter-spacing digunakan untuk menambah atau mengurangi spasi antara huruf-huruf yang membentuk sebuah kata.
  • Properti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata kalimat.
  • Properti text-indent digunakan untuk indent teks paragraf.
  • Properti text-align digunakan untuk menyelaraskan teks dokumen.
  • Properti text-decoration digunakan untuk menggarisbawahi, overline, dan strikethrough teks.
  • Properti text-transform digunakan untuk mengkapitalisasi teks atau mengkonversi teks menjadi huruf besar atau huruf kecil.
  • Properti white-space digunakan untuk mengontrol aliran dan pemformatan teks.
  • Properti text-shadow digunakan untuk mengatur bayangan teks di sekitar teks.

Itu adalah property yang bisa anda gunakan pada CSS text ini, seperti contoh diatas anda menyelaraskan text dengan menggunakan Properti text-align

Anda bisa melihat contoh kode berikut untuk lebih memahami materi CSS text ini

<html>
<head>
</head>
<body>

<p style="color:blue;">
Text dengan Properti color menggunakan warna biru
</p>

<p style="direction:rtl;">
Properti direction dengan arah kanan ke kiri
</p>

<p style="letter-spacing:5px;">
Properti  letter-spacing dengan value 5px
</p>

<p style="word-spacing:5px;">
Properti   word-spacing   dengan   value   5px
</p>

<p style="text-indent:1cm;">
Properti text-indent menggunakan Teks pada baris pertama dengan indentasi 1 cm dan garis ini akan tetap berada di posisi sebenarnya
</p>


<p style="text-align:right;">
Properti text-align rata kanan
</p>

<p style="text-align:center;">
Properti text-align rata tengah
</p>

<p style="text-align:left;">
Properti text-align rata kiri
</p>

<p style="text-decoration:underline;">
Properti text-decoration text underline
</p>

<p style="text-decoration:line-through;">
Properti text-decoration coretan garis
</p>

<p style="text-decoration:overline;">
Properti text-decoration dengan garis diatas text
</p>

<p style="text-decoration:blink;">
Properti text-decoration denagn text blink
</p>

<p style="text-transform:capitalize;">
Properti Text-Transform Text Dengan Huruf Capital Diawal
</p>

<p style="text-transform:uppercase;">
PROPERTI TEXT-TRANSFORM TEXT DENGAN HURUF CAPITAL SEMUA
</p>

<p style="text-transform:lowercase;">
properti text-transform text dengan huruf kecil semua
</p>

<p style="white-space:pre;">
Properti white-space text memiliki jeda baris dan pengaturan pra spasi-putih memberi tahu browser
</p>

<p style="text-shadow:4px 4px 8px blue;">
Properti text-shadow text dengan format pengaturan bayangan
</p>

</body>
</html>

Hasil dari kode diatas:

htmltext

Ini adalah sekilas materi tentang CSS-text, dan diharapkan sebagaimana awal pembicaraan tadi, anda mesti melakukan praktek dari kode yang kami contohkan untuk mengetahui hasil dan errornya dimana.