Belajar CSS #2beginner

Mei 20, 2011 at 2:44 pm (komputer, Materiku) (, , )

Postingan kali ini merupakan lanjutan postingan yang kemaren tentang yaitu tentang Belajar CSS #beginner. Pada postingan terdahulu telah dibahas tentang bagaimana menerapkan css pada halaman HTML, pengertian selector, penulisan color (warna), dan penggunaan property pada teks. Sekarang dilanjut dengan materi selanjutnya… langsung menuju no.6 ya😉

6. Margin dan padding

Margin dan padding merupakan dua unsur yang sering digunakan untuk spacing-out element. Margin digunakan untuk spasi ruang luar elemen sedangkan padding untuk spasi ruang di dalam elemen.

margin dan padding

jenis margin:

margin-top
margin-right
margin-bottom
margin-left

Value yang mungkin untuk margin:
– [percentage]
– [length]
– inherit
– auto
– margin dapat memiliki:

–satu nilai eq: 10px => untuk menentukan ukuran margin atas, bawah, kanan, kiri (every side)
–dua nilai eq: 10px 5px => untuk menentukan first value (top/bottom) dan second value (right/left)
–tiga nilai eq: 10px 5px 2px => untuk menentukan first value (top), second value (right/left), dan third value (bottom)
–empat nilai eq: 10px 5px 2px 1px => untuk menentukan top, right, bottom dan left

eq:
#badger { margin-top: 3em; }

#wolverine { margin: 1em 100px; }

#pineapple { margin: 1em 3em 10px 0.5em; }

jenis padding:
padding-top
padding-right
padding-bottom
padding-left

value yang mungkin untuk padding:
– [percentage]
– [length] – (“0” is default)
– inherit
– padding dapat memiliki:

–satu nilai eq: 10px => untuk menentukan ukuran margin atas, bawah, kanan, kiri (every side)
–dua nilai eq: 10px 5px => untuk menentukan first value (top/bottom) dan second value (right/left)
–tiga nilai eq: 10px 5px 2px => untuk menentukan first value (top), second value (right/left), dan third value (bottom)
–empat nilai eq: 10px 5px 2px 1px => untuk menentukan top, right, bottom dan left

eq:
#flump { padding: 10em 2em; }

7. Border

Untuk membuat border, property yang kita butuhkan antara lain:
* border-style
border-style=> menentukan style border secara keseluruhan
border-top-style => menentukan style top-border
border-right-style => menentukan style right-border
border-bottom-style => menentukan style bottom-border
border-left-style => menentukan style left-border

nilai yang mungkin untuk property border tersebut:
– none => tanpa border
– dotted => …………………..
– dashed => _ _ _ _ _ _ _
– solid => __________    untuk yang lain silakan dicoba sendiri ya🙂
– double
– groove
– ridge
– inset
– outset
– hidden
– border-style can have:
— satu nilai misalnya solid => untuk menentukan style border secara keseluruhan
— dua nilai misalnya solid dotted => untuk menentukan first value (top/bottom) dan second value (right/left)
— tiga nilai misalnya solid dotted dashed => untuk menentukan first value (top), second value (right/left) dan third value (bottom)
— empat nilai misalnya solid dotted dashed groove => untuk menentukan top, right, botom, dan left
eq:
.curtains { border-right-style: solid; }

.blinds { border-style: dotted dashed; }

*border-width
border-width => untuk menentukan lebar border secara keseluruhan
border-top-width => menentukan lebar top-border
border-right-width => menentukan lebar right-border
border-bottom-width => menentukan lebar bottom-border
border-left-width => menentukan lebar left-border

Nilai yang mungkin untuk border-width
-[length]
-thin
-medium
-thick
-border-width can have:

–satu nilai eq: 10px => untuk menentukan ukuran lebar atas, bawah, kanan, kiri (every side)
–dua nilai eq: 10px 5px => untuk menentukan first value (top/bottom) dan second value (right/left)
–tiga nilai eq: 10px 5px 2px => untuk menentukan first value (top), second value (right/left), dan third value (bottom)
–empat nilai eq: 10px 5px 2px 1px => untuk menentukan top, right, bottom dan left

eq:
#bender { border-left-width: 2px; }

#fry { border-width: 1px 4px 1px 100px; }
*border-color
border-color => untuk menentukan warna border secara keseluruhan
border-top-color => menentukan warna top-border
border-right-color => menentukan warna right-border
border-bottom-color  => menentukan warna bottom-border
border-left-color  => menentukan warna left-border

Nilai yang mungkin untuk property border-color ini antara lain:
-[colo]
-transparent
-border-color can have:
–satu nilai eq: red => untuk menentukan color seluruh border
–dua nilai eq: red blue => untuk menentukan color pada first value (top/bottom) dan second value (right/left)
–tiga nilai eq: red blue green => untuk menentukan color pada first value (top), second value (right/left), dan third value (bottom)
–empat nilai eq: red blue green black => untuk menentukan color pada top, right, bottom dan left

eq:
.flamingo { border-right-color: red; }

#peach { border-color: #cc3421; }

#tree { border-color: #fc0 blue #cf0; }

1 Komentar

  1. Belajar CSS #beginner « Sutrionline's Blog said,

    […] Bersambung… […]

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: