Belajar CSS - Cara Desain Teks dengan CSS


Oke di artikel sebelumnya kita sudah membahas tentang sebuah cara bagaimana untuk Mengatur Background dengan CSS
BELAJAR CSS | MENGATUR BACKGROUND DENGAN CSS
Dan pada kesempatan ini kita akan membahas tentang bagaimana Cara Mengatur Text dengan CSS

text css
Mengatur Text Dengan CSS

Pembahasan

Baik yang akan kita bahas pada kesempatan ini adalah
  1. Text Color
  2. Text Alignment
  3. Text Decoration
  4. Text Indent
  5. Text Transformation
  6. Text Letter Space
  7. Text Line Height
  8. Text Direction
  9. Text Word Spacing
  10. Text Shadow
Nah itulah beberapa yang akan kita bahas pada kesempatan ini. Lets GO!
Sebelum itu mari kita siapkan kopi :D

1. Text Color

Sesuai dengan nama diatas kita akan mencoba untuk menggunakan CSS sebagai pewarna di dalam text di sebuah halaman.
/*style.css*/

#colortext {
 color: #0846FA;
}
Hello Selamat Datang

2. Text Alignment

Dibagian Text Alignment ini kita akan mencoba untuk menggunakan property dan nilai
/*style.css*/

#text1 {
 text-align: center;
}
#text2 {
 text-align: justify;
}
Pada id text1 itu akan menghasilkan text yang berada di tengah tengah halaman, teman teman juga bisa  menggantinya dengan right, left.
Pada id text2 maka akan menghasilkan sebuah text yang rata kanan dan kiri.
hasil
Hello Selamat Datang
Hello Selamat Datang
Hello Selamat Datang

3. Text Decoration


/*style.css*/

#text1 {
 text-decoration: overline;
}
#text2 {
 text-decoration: underline; 
}
#text3 {
 text-decoration: line-through;
}
Selanjutnya adalah Text Decoration, pada bagian ini adalah bagian dimana kita akan mengedit sebuah text, yang diberi garis bawah, atas, dan garis tengah, sesuai dengan CSS diatas, maka hasilnya akan menjadi seperti ini

hasil
Hello Selamat Datang
Hello Selamat Datang
Hello Selamat Datang

4. Text Indent 

Pada Text Indent ini berfungsi untuk memberi sebuah tanda untuk paragraph contoh seperti ini
/*style.css*/

p {
 text-indent: 30px;
}
hasil
Hallo Selamat Datang kembali teman teman ku, beberapa hari kemarin belum update nih, hehe lagi perbaikan dibalik system :\
teman teman bisa mengatur berapa ukuran untuk halaman teman teman sekalian

5. Text Transformation 

Oke bagian selanjutnya yaitu Text Transformation, text yang akan dihasilkan dari code CSS Text Transformation adalah seperti ini.

/*style.css*/

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
contoh penggunaan

/*index.html*/

<p class="uppercase">Hello Selamat Datang.</p>
<p class="lowercase">Hello Selamat Datang.</p>
<p class="capitalize">Hello Selamat Datang.</p>
dan akan menghasilkan
hasil
Hello Selamat Datang
Hello Selamat Datang
Hello Selamat Datang

6. Text Letter Space

Pada bagian Text Letter Space disini kita akan mengatur text untuk spasi nya, gampang kok, mari simak
/*style.css*/

#text1 {
 letter-spacing: 5px;
}
#text2 {
 letter-spacing: -2px;
}
hasil
Hello Selamat Datang
Hello Selamat Datang

7. Text Line Height 

Nah pada bagian ke 7 ini, kita memasuki Text Line Height, jadi disini kita akan mengedit Text dengan CSS yaitu mengatur pada jarak atas dan bawah nya. mari cek!
/*style.css*/

#text1 {
 letter-height: 1;
}
#text2 {
 letter-height: 4;
}
hasil
Hello Selamat Datang
Hello Selamat Datang
Hello Selamat Datang
Hello Selamat Datang

 8. Text Direction

Selanjutnya bagian ke delapan, yaitu Text Direction, disini jika ada teman teman yang iseng, dan ingin membalikan huruf nah pakai cara ini nih

/*style.css*/

#text1 {
 direction: rtl;
}
#text2 {
 direction: ltr;
}
Nah maksud dari rtl , tlr adalah RTL (Right to Left) dan TLR (Left to Right) nah pada RTL teman teman bisa menggunakan nya untuk tulisan Bahasa Arab misalnya. Silahkan teman teman untuk mencoba nya!

9. Text Word Spacing

Oke kita sekarang berada dibagian ke-9 yaitu pada bagian Text Word Spacing, dan dibagian ini kita akan mengatur jarak spasi kata.
Perbedaan nya dengan Letter Spacing dan Word Spacing yaitu
Letter Spacing untuk jarak huruf & Word Spacing untuk jarak spasi kata
 /*style.css*/

#text1 {
 word-spacing: 5px;
}
#text2 {
 word-spacing: -2px;
}
hasil
Hello Selamat Datang
Hello Selamat Datang

10. Text Shadow

Nah kita masuk kebagian terkahir nih teman teman, hehe bagaimana dengan beberapa property dan nilai diatas? GAMPANG kan hehe
Oke lanjut!
Teman teman pasti sudah paham dengan judul diatas, yaitu kita akan membuat Text Shadow.

/*style.css*/

#text1 {
 text-shadow: 3px 2px white;;
}
Mari kita lihat hasilnya!
hasil
Hello Selamat Datang
Jadi apa yang kalian dapatkan? mmm
Bahwa Belajar itu Menyenangkan, Kembangkan kreatifitas mu.

Okee baiklah kita sudah selesai teman teman hehe, semoga bermanfaat yah.
Sekian dan terimakasih
Salam Semangatt!!

Tambah Skill Kamu, dengan Mengisi Email untuk Update!!

Belum ada Komentar untuk "Belajar CSS - Cara Desain Teks dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel