CSS Dasar Part 5 - Cara Menggunakan Property Text Styling Pada CSS

CSS Dasar Part 5 - Cara Menggunakan Property Text Styling Pada CSS - Pada CSS pemberian style untuk property font dan text, dipisahkan. Untuk property font, seperti artikel yang pernah saya publish, yang berjudul Cara Menggunakan Font Styling Pada CSS. Dalam artikel ini saya menjelaskan bahwa pemberian style pada font berkaitan dangan type face/penampilan dari font/jenis huruf yang kita pakai. Sedangkan untuk property text styling yang akan saya bahas dalam artikel ini berkaitan dengan property pendukungnya.

property css pada text styling yaitu color, text indent, text align, text transform, text decoration, letter spacing, word spacing

Property Text Styling

Sebelum saya membahas lebih dalam mengenai property text styling ini, saya ada sedikit catatan, untuk sebuah tag pada CSS yang disebut dengan tag komentar. Pada CSS kita bisa memberikan komentar, sama seperti yang bisa kita lakukan pada HTML. fungsinya sama seperti pada HTML untuk memberikan komentar yang diperlukan sebagai pengingat atau penanda arti text/baris sintak CSS yang kita tuliskan pada kode editor. Tag komentar ini tidak akan tampil juga dibrowser, hanya berguna bagi developernya saja.

tag css yang digunakan untuk memberikan komentar sebagai keperluan developer saja

Tag Komentar

CSS memiliki property yg berafiliasi denga text styling menjadi berikut :

1. Color

Fungsi menurut property ini buat menaruh warna pada tulisan. Property color memilki value menurut beberapa type, yaitu :

Color Name : value dari property color ini, bisa ditulis dengan mencantumkan nama warna dalam bahasa inggris. Contohnya : red, green, blue, purple, pink, salmon, lightblue, gold, coral, silver, dll.
Hexadecimal : value dari property ini bisa ditulis dengan hexadeximal. hexadecimal adalah nilai dari property color yang penulisannya dimulai dengan tanda # dan diikuti dengan 3 karakter/4 karakter/6 karakter yang bisa terdiri dari kombinasi 16 karakter bilangan hexadecimal, yaitu angka 1-9 dan huruf a-f. Contoh : #fff, #a1c9, # bb2222, #d3bcbc, dll.
Rgb : value dari property ini bisa ditulis dengan menggunakan rgb, yaitu campuran kadar warna red, green, blue. Dimana nilai dari campuran warna ini dimulai dari angka 0 – 255. Contoh : rgb( 23, 150, 255 ), rgb( 100, 255, 0), rgb( 59, 230, 170 ), dll.

Cara menggunakan property color untuk memberikan warna pada text elemen html dan menampilkannya di browser

Penggunaan Property Color Pada CSS Text Styling

Untuk sanggup memilih warna, kita tidak harus menghafal nama semua warna, kombinasi hexadecimal, atau campuran berdasarkan warna rgb. Karena itu membutuhkan donasi yang sanggup memudahkan kita dalam menentukan suatu rona menggunakan memakai beberapa cara, diantaranya kita mampu memakai website color picker, aplikasi design grafis, seperti photoshop, coreldraw, corelpaint, dll.

Dua. Text-align

Fungsi menurut property ini buat mengatur format pada paragraph/text. Value menurut property text-align ini ada 4, yaitu :

Left : untuk mengatur rata kiri suatu paragraph. Nilai ini adalah nilai default dari property text-align.
Right : untuk mengatur rata kanan suatu paragraph.
Center : untuk mengatur rata tengah suatu paragraph.
Justify : untuk mengatur rata kiri dan rata kanan suatu paragraph.
Untuk contoh bisa lihat paragraph dibawah ini :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.

Cara menggunakan property text align untuk mengatur posisi text pada elemen html dan menampilkannya di web browser

Penggunaan Property Text Align Pada CSS Text Styling

3. Text-indent

Fungsi dari property ini buat memberikan indentasi/jarak dalam awal paragraph/text. Value berdasarkan property ini berupa nomor yg memilki satuan px atau %. Untuk contohnya lihat contoh dibawah ini :

			<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis. </p> <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas eius sint voluptatibus, voluptatem animi beatae quo, explicabo possimus, amet nobis quibusdam vero facilis temporibus quia ab repellendus nam iusto minima.</p>

Cara menggunakan property text indent untuk mengatur posisi atau jarak awal text pada elemen html dan menampilkannya di web browser

Penggunaan Property Text Indent Pada CSS Text Styling

4. Text-decoration

Fungsi berdasarkan property ini buat mengatur dekorasi pada text. Value dari property ini terdapat 4, yaitu sebagai berikut :

None : value/nilai ini berfungsi untuk menghilangkan garis bawah yang ada pada sebuah tulisan. Contohnya seperti menghilangkan garis sebuah link. Karena hasil dari tag <a>, secara default menampilkan link tulisan dengan garis bawah.
Underline : value/nilai ini berfungsi untuk memberi garis bawah pada sebiah tulisan.
Overline : value/nilai ini berfungsi untuk memberikan garis di atas sebuah tulisan.
Line-through : value/nilai ini berfungsi untuk memberi garis melewati text atau memberikan garis di tengah sebuah text.

Untuk model silakan lihat diwah ini :

			
				<a href="">Ini Link</a>

			<h1>Hello World</h1> <h2>Hello World</h2> <h3>hello World</h3>

Cara menggunakan property text decoration untuk memberikan dekorasi text pada elemen html dan menampilkannya di web browser

Penggunaan Property Text Decoration Pada CSS Text Styling

5. Text-transform

Fungsi dari property ini buat mengganti huruf sebagai alfabet besar , huruf kecil atau alfabet modal ( huruf yg diawali menggunakan alfabet akbar, lalu diikuti menggunakan alfabet mini ). Property ini memilki 3 value, menjadi berikut :

None : value ini membuat tulisan agar tidak berubah seperti awalnya.
Lowercase : value ini berfungsi untuk merubah atau memaksa tulisan menjadi huruf kecil semua.
Uppercase : value ini berfungsi untuk merubah atau memaksa tulisan menjadi huruf besar semua.
Capitalize : value ini berfungsi untuk merubah atau memaksa tulisan menjadi huruf capitalize semua, yaitu tulisan dimana setiap awal katanya selalu huruf besar.

Untuk contoh silakan lihat dibawah ini :

			<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p> <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p> <p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p> <p class="p4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p>

Cara menggunakan property text transform untuk merubah huruf pada text dalam elemen html menjadi huruf besar, kecil atau kapital. dan cara menampilkannya di web browser

Penggunaan Property Text Transform Pada CSS Text Styling

6. Letter-spacing

Fungsi dari property ini buat mengatur spasi/jarak/taraf kerenggangan antar alfabet . Value berdasarkan property ini berupa nomor yg memiliki satuan px dan %. Untuk contohnya silakan lihat dibawah penjelasan berdasarkan property word-spacing.

7. Word-spacing

Fungsi berdasarkan property ini buat mengatur spasi/jarak antar istilah. Value berdasarkan property ini berupa nomor yg memiliki satuan px dan %. Untuk model letter-spacing dan word-spacing, silakan lihat contoh dibawah ini :

			<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis. </p> <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas eius sint voluptatibus, voluptatem animi beatae quo, explicabo possimus, amet nobis quibusdam vero facilis temporibus quia ab repellendus nam iusto minima.</p>

Cara menggunakan property letter spacing untuk mengatur jarak antar huruf dan property word spacing untuk mengatur jarak antar kata dan cara menampilkannya di web browser

Penggunaan Property Letter Spacing Dan Word Spacing Pada CSS Text Styling

Penjelasan tentang bagaimana CSS mampu memberi style dalam text, sekian dulu. Semoga apa yang aku tulis bisa dipahami sang sahabat-teman, terutama untuk pemula yang baru belajar CSS. Tetap semangat. See you on my next articles.

Referensi:

https://www.W3schools.Com

https://www.W3schools.Com/css

http://www.W3.Org/style/CSS

https://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference

http://css-tricks.Com/almanac

kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.