Belajar CSS -4- tentang Float, Height, Overflow

Melanjutkan materi pembahasan CSS, kali ini bagian ke-4 tentang Float, Height, dan Overflow. Sebelumnya saya berharap kawan memahami sepuluh buah atribut CSS yang telah dijelaskan pada Belajar CSS -1- tentang Border, Margin, Padding (tiga atribut), Belajar CSS -2- tentang Background, Color, Width, Border-radius (empat atribut), dan Belajar CSS -3- tentang Font size, Text align, Text transform (tiga atribut).

Fungsi dari masing-masing atribut CSS bagian ke-4 ini adalah

1. Float: untuk menentukan di mana posisi suatu elemen (tulisan, gambar, script, kotak pemberitahuan, atau box informasi) relatif terhadap elemen lain
2. Height: untuk menentukan tinggi elemen
3. Overflow: untuk membuat scroll bar atau kotak gulir

Dibawah ini beberapa kode perintah sekaligus hasil yang ditampilkannya.

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

<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase;">Tulis disini</div>

<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left;">Tulis disini</div>

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

<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: right;">Tulis disini</div>

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

<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left; height: 180px;">Tulis disini</div>

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

<div style="border: 1px solid #FBB784; margin: 10px; padding: 10px; background: #FFFFCE; color: #A52A2A; width:350px; -moz-border-radius: 9px; font-size: 15px; text-align: right; text-transform: uppercase; float: left; height: 100px; overflow: auto;">Tulis disini</div>

Kode CSS dengan BORDER, MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, BORDER-RADIUS, FONT SIZE, TEXT ALIGN, TEXT TRANSFORM, FLOAT, HEIGHT, dan OVER FLOW (tigabelas atribut)


Catatan:

• Atribut Overflow biasanya di barengi dengan atribut Height
• Kawan bisa mengganti angka-angka yang terdapat dalam kode CSS diatas, mengganti dengan warna yang lain, atau juga mengkombinasikannya
• Baca materi berikutnya Belajar CSS -5- tentang Kombinasi Atribut atau Property CSS

Artikel Terkait

Pilih Label

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

Baca lagi