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
- Float: untuk menentukan di mana posisi suatu elemen (tulisan, gambar, script, kotak pemberitahuan, atau box informasi) relatif terhadap elemen lain
- Height: untuk menentukan tinggi elemen
- 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)
