Skip to content Skip to sidebar Skip to footer
Home / css / css-dasar / web-design

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

Posted by Eren Rere Post a Comment
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 yang berhubungan denga text styling sebagai berikut :
1. Color
Fungsi dari property ini untuk memberikan warna pada tulisan. Property color memilki value berdasarkan 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 bisa menentukan warna, kita tidak harus menghafal nama semua warna, kombinasi hexadecimal, atau campuran dari warna rgb. Karena itu membutuhkan bantuan yang bisa memudahkan kita dalam menentukan suatu warna dengan menggunakan beberapa cara, diantaranya kita bisa menggunakan website color picker, aplikasi design grafis, seperti photoshop, coreldraw, corelpaint, dll.

2. Text-align
Fungsi dari property ini untuk mengatur format pada paragraph/text. value dari 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 :



<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 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 untuk memberikan indentasi/jarak pada awal paragraph/text. value dari property ini berupa angka yang 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 dari property ini untuk mengatur dekorasi pada text. value dari property ini ada 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 contoh 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 untuk mengubah huruf menjadi huruf besar, huruf kecil atau huruf kapital ( huruf yang diawali dengan huruf besar, kemudian diikuti dengan huruf kecil ). Property ini memilki 3 value, sebagai 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 untuk mengatur spasi/jarak/tingkat kerenggangan antar huruf. value dari property ini berupa angka yang memiliki satuan px dan %. Untuk contohnya silakan lihat dibawah penjelasan dari property word-spacing.

7. Word-spacing
Fungsi dari property ini untuk mengatur spasi/jarak antar kata. value dari property ini berupa angka yang memiliki satuan px dan %. Untuk contoh 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 mengenai bagaimana CSS bisa memberi style pada text, sekian dulu. Semoga apa yang saya tulis dapat dipahami oleh teman-teman, terutama buat 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.

Post a Comment for "CSS Dasar Part 5 - Cara Menggunakan Property Text Styling Pada CSS"

Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan