Mengatur text pada CSS

Text adalah sebuah hal yang tidak terpisahkan dari sebuah web,text dapat dimanipulasi dengan css/CSS Text,seperti memberi warna,mengatur alignment,menambahkan underline dsb. Dalam css sendiri terdapat 6 manipulasi text,yaitu: 

  • Text Color
  • Text Alignment
  • Text Decoration
  • Text Transformation
  • Text Spacing
  • Text Shadow

Yang pertama adalah text color,terdapat dua properti yang masuk kedalam text color,yaitu color dan background-color,color digunakan untuk mengganti warna text.Sedangkan background-color untuk mengganti warna background dari sebuah text.Value color yang bisa digunakan adalah sama seperti CSS Color Values,jika belum tahu apa saja yang termasuk ke dalam CSS Color Values silahkan baca terlebih dahulu,karena saya tidak akan membahas itu dalam artikel ini.Kembali ke text color,cara menggunakannya sangat mudah.

Copy Code 


p {
color: #ff0000;
}

CSS Text : Mengatur text pada CSS

Copy Code 


p {
background-color: black;
color: #ff0000;
}

Yang kedua adalah Text Alignment,seperti namanya keduanya digunakan untuk mengatur posisi dari sebuah text properti yang termasuk kedalam text alignment dan text direction adalah:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • Vertical-align

Properti text-align digunakan untuk mengatur penjajaran dari sebuah text secara horizontal.Bisa right aligned, centered, atau justified,value yang bisa digunakan untuk properti ini antara lain adalah center,left,right dan justify.

Text rata kiri adalah default,sedangkan text rata kanan akan menjadi default,jika arah teks dari kanan ke kiri. 

Sedangkan text-align: justify akan diatur ke justify,yang berarti setiap baris diregangkan sehingga setiap baris memiliki lebar yang sama,dan margin kiri dan kanan lurus (seperti majalah dan koran).

Ada juga properti text-align-last properti sama seperti properti text-align,namun perbedaannya adalah text-align-last menentuk cara menyelaraskan baris terakhir teks.

Ada juga properti vertical-align,properti ini digunakan untuk mengatur perataan sebuah elemen.Value dari properti ini adalah baseline, text-top, text-bottom, sub.

CSS Text - Mengatur text pada CSS

Yang ketiga adalah Text Decoration,text decoration digunakan untuk mendekorasi teks,teks decoration terdiri dari beberapa properti yaitu:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • Text-decoration

Text-decoration-line,digunakan untuk menambah garis dekorasi ke sebuah text,value dari properti ini adalah overline,line-though,underline dan overline underline.

Bisa juga mengganti warna garis dekorasi pada teks,dengan menggunakan properti text-decoration-color.Value untuk properti ini sama seperti properti color pada Text Color.

Selain mengganti warna dekorasi sebuah text,kita juga bisa mengganti style garis dekorasi.Menggunakan properti text-decoration-style,value untuk properti ini andalah solid,double,dotted,dashed,dan wavy.

Terdapat juga cara untuk mengatur ketebalan garis dekorasi,yaitu dengan menggunakan properti text-decoration-thickness.Value dari properti ini antara lain adalah: auto dan ukuran yang biasa dipakai di css.Seperti px, %,em,rem,vw,dan vh.

Copy Code 


p {
   text-decoration: underline red solid 5px;
}

Yang keempat adalah Text Transformation atau Transformasi Text,properti ini digunakan untuk mengatur secara spesifik apakah huruf besar atau huruf kecil pada sebuah text.Value untuk properti ini adalah uppercase,lowercase,dan capitalize.

Copy Code 


<p style="text-transform: uppercase;">
text Transform uppercase
</p>
<p style="text-transform: lowercase;">
text Transform lowercase
</p>
<p style="text-transform: capitalize;">
text Transform capitalize
</p>

Yang kelima adalah Text Spacing,properti properti yang termasuk kedalam kategori ini adalah 

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

text-indent digunakan untuk menentukan indentasi baris pertama teks.

Copy Code 


p {
text-indent: 30px;
}
Copy Code 


<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate veniam facere, incidunt recusandae minima, voluptates dignissimos, fuga ipsum alias officiis eum vero! Ducimus quisquam nihil dolores id cumque? Odio, non!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe itaque obcaecati molestias hic nostrum, fugiat dolor expedita soluta sit nisi perferendis odit modi veniam aliquid ea, eveniet sequi temporibus a!
</p>

letter-spacing digunakan untuk mengatur jarak antar karakter dalam sebuah teks

Copy Code 


p:first-child {
letter-spacing: 10px;
}

p:nth-child(2) {
letter-spacing: 0;
}

p:last-child {
letter-spacing: -4px;
}
Copy Code 


<p>
letter spacing 11px
</p>

<p>
letter spacing 0
</p>

<p>
letter spacing -4px
</p>

line-height digunakan untuk mengatur ruang antar baris,value yang digunakan untuk properti ini adalah ukuran umum yang digunakan di css,seperti px,%,em,dan rm.Ukuran yang umum digunakan adalah px,em, dan rem.Bisa juga hanya sebuah angka.

Copy Code 


p:first-child {
line-height: 0.4;
background-color: red;
}

p:last-child {
line-height: 24px;
background-color: red;
}
Copy Code 


<p>
line height 0.4
</p>

<p>
line height 24px
</p>

word-spacing digunakan untuk mengatur jarak antar kata dalam sebuah text. 

Copy Code 


p:first-child {
word-spacing: normal;
}

p:nth-child(2) {
word-spacing: 15px;
}

p:last-child {
word-spacing: -2px;
}
Copy Code 


<p>
ini dengan mengatur word spacing normal
</p>

<p>
ini dengan mengatur word spacing 15px
</p>

<p>
ini dengan mengatur word spacing -2px
</p>

white-space digunakan untuk mengatur bagaimana white-space di dalam sebuah element.

Copy Code 


p:first-child {
white-space: normal;
}

p:nth-child(2) {
white-space: nowrap;
}

p:nth-child(3) {
white-space: pre;
}

p:nth-child(4) {
white-space: pre-line;
}

p:nth-child(5) {
white-space: pre-wrap;
}
Copy Code 


<p>
ini dengan white-space normal
</p>

<p>
ini dengan white-space nowrap
</p>

<p>
ini dengan white-space pre
</p>

<p>
ini dengan white-space pre-line
</p>

<p>
ini dengan white-space pre-wrap
</p>

Yang keenam adalah text-shadow,seperti namanya properti ini digunakan untuk menambahkan bayangan pada teks.Cara menggunakannya sangat mudah,hanya dengan mengatur spesifik bayangan horizontal, bayangan vertical,dan menambahkan warna.Jika tidak diatur maka warna banyangan akan sesuai dengan warna teks.

Copy Code 


h1 {
text-shadow: 3px 3px red;
}
Copy Code 


<h1>
efek bayangan pada teks dengan text-shadow
</h1>