Belajar CSS -3- tentang Font size, Text align, Text transform

Materi belajar CSS bagian ke-3 ini berkaitan dengan huruf dan tulisan. Akan dijelaskan bagaimana merubah style ukuran huruf menjadi besar, menentukan perataan tulisan, dan membuat huruf-huruf dalam tulisan menjadi huruf besar (kapital) atau huruf kecil semuanya, tetep dalam bahasa HTML.

Saya harap kawan memahami tujuh buah atribut CSS yang telah disebutkan pada Belajar CSS -1- tentang Border, Margin, Padding (tiga atribut) dan Belajar CSS -2- tentang Background, Color, Width, Border-radius (empat atribut), karena disini saya akan menambahkan tiga buah atribut lagi, yaitu font size, text align, dan text transform.

Dibawah ini beberapa kode perintah dan hasil yang ditampilkannya.

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, dan BORDER-RADIUS (tujuh atribut)

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px;">Tulis disini</div>

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, dan FONT SIZE (delapan atribut)

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px;">Tulis disini</div>

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, dan TEXT ALIGN (sembilan atribut)

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: left;">Tulis disini</div>

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: right;">Tulis disini</div>

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: center;">Tulis disini</div>

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: justify;">Tulis disini</div>

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, dan TEXT TRANSFORM (sepuluh atribut)

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: right; text-transform: uppercase;">Tulis disini</div>

<div style="border: 1px solid #006600; margin: 10px; padding: 10px; background: #ADE4AD; color: #990099; width:400px; -moz-border-radius: 9px; font-size: 20px; text-align: right; text-transform: lowercase;">Tulis disini</div>

Kawan bisa oge mengganti angka-angka yang terdapat didalamnya, mengganti dengan warna yang lain, atau juga mengkombinasikannya. Lalu, baca materi berikutnya Belajar CSS -4- tentang Float, Height, Overflow

Artikel Terkait

Pilih Label

• Blogger
• Linux
• Tips dan Trik
• Musik
• Live USB
• Sunda
• Android

Baca lagi