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

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

Berbagi :