- \n
- Text Color<\/span><\/li>\n
- Text Alignment<\/span><\/li>\n
- Text Decoration<\/span><\/li>\n
- Text Transformation<\/span><\/li>\n
- Text Spacing<\/span><\/li>\n
- Text Shadow<\/span><\/li>\n<\/ul>\n
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.<\/span><\/p>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\np {\r\ncolor: #ff0000;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
![\"CSS](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text.png\")
<\/p>\n\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\np {\r\nbackground-color: black;\r\ncolor: #ff0000;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text2.png\")
<\/p>\nYang kedua adalah Text Alignment,seperti namanya keduanya digunakan untuk mengatur posisi dari sebuah text properti yang termasuk kedalam text alignment dan text direction adalah:<\/span><\/p>\n
- \n
- text-align<\/span><\/li>\n
- text-align-last<\/span><\/li>\n
- direction<\/span><\/li>\n
- unicode-bidi<\/span><\/li>\n
- Vertical-align<\/span><\/li>\n<\/ul>\n
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.<\/span><\/p>\n
Text rata kiri adalah default,sedangkan text rata kanan akan menjadi default,jika arah teks dari kanan ke kiri.\u00a0<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text3.png\")
<\/p>\nSedangkan 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).<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text4.png\")
<\/p>\nAda juga properti text-align-last properti sama seperti properti text-align,namun perbedaannya adalah text-align-last menentuk cara menyelaraskan baris terakhir teks.<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text5.png\")
<\/p>\nAda juga properti vertical-align,properti ini digunakan untuk mengatur perataan sebuah elemen.Value dari properti ini adalah baseline, text-top, text-bottom, sub.<\/span><\/p>\n
![\"CSS](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text56.png\")
<\/p>\nYang ketiga adalah Text Decoration,text decoration digunakan untuk mendekorasi teks,teks decoration terdiri dari beberapa properti yaitu:<\/span><\/p>\n
- \n
- text-decoration-line<\/span><\/li>\n
- text-decoration-color<\/span><\/li>\n
- text-decoration-style<\/span><\/li>\n
- text-decoration-thickness<\/span><\/li>\n
- Text-decoration<\/span><\/li>\n<\/ul>\n
Text-decoration-line,digunakan untuk menambah garis dekorasi ke sebuah text,value dari properti ini adalah overline,line-though,underline dan overline underline.<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text7.png\")
<\/p>\nBisa juga mengganti warna garis dekorasi pada teks,dengan menggunakan properti text-decoration-color.Value untuk properti ini sama seperti properti color pada Text Color.<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text8.png\")
<\/p>\nSelain 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.<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text9.png\")
<\/p>\nTerdapat 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.<\/span><\/p>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text10.png\")
<\/p>\n\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\np {\r\n text-decoration: underline red solid 5px;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text11.png\")
<\/p>\nYang 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.<\/span><\/p>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\n<p style=\"text-transform: uppercase;\">\r\ntext Transform uppercase\r\n<\/p>\r\n<p style=\"text-transform: lowercase;\">\r\ntext Transform lowercase\r\n<\/p>\r\n<p style=\"text-transform: capitalize;\">\r\ntext Transform capitalize\r\n<\/p>\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text12.png\")
<\/p>\nYang kelima adalah Text Spacing,properti properti yang termasuk kedalam kategori ini adalah\u00a0<\/span><\/p>\n
- \n
- text-indent<\/span><\/li>\n
- letter-spacing<\/span><\/li>\n
- line-height<\/span><\/li>\n
- word-spacing<\/span><\/li>\n
- white-space<\/span><\/li>\n<\/ul>\n
text-indent digunakan untuk menentukan indentasi baris pertama teks.<\/span><\/p>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\np {\r\ntext-indent: 30px;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\n<p>\r\nLorem 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!\r\nLorem 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!\r\n<\/p>\t\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text13.png\")
<\/p>\nletter-spacing digunakan untuk mengatur jarak antar karakter dalam sebuah teks<\/span><\/p>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\np:first-child {\r\nletter-spacing: 10px;\r\n}\r\n\r\np:nth-child(2) {\r\nletter-spacing: 0;\r\n}\r\n\r\np:last-child {\r\nletter-spacing: -4px;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\n<p>\r\nletter spacing 11px\r\n<\/p>\r\n\r\n<p>\r\nletter spacing 0\r\n<\/p>\r\n\r\n<p>\r\nletter spacing -4px\r\n<\/p>\r\n<\/pre>\n
<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text14.png\")
<\/p>\nline-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.<\/span><\/p>\n
\n\t\t\t\n\n\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n<\/p>\np:first-child {\r\nline-height: 0.4;\r\nbackground-color: red;\r\n}\r\n\r\np:last-child {\r\nline-height: 24px;\r\nbackground-color: red;\r\n}\r\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n <\/div>\n
\n\t\t\t\n\n\n<\/div>\n - letter-spacing<\/span><\/li>\n
- text-decoration-color<\/span><\/li>\n
- text-align-last<\/span><\/li>\n
- Text Alignment<\/span><\/li>\n
![\"\"](\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-text145.png\")
<\/p>\n