Kali ini saya akan membagikan ilmu yang telah saya pelajari mengenai CSS, ini mungkin metode yang saya rasa sesuai bagi pemula jika ingin mempelajari mengenai CSS. Namun ini sangat penting untuk disimak. Artikel ini merupakan lanjutan dari artikel sebelumnya sengenai Pengertian Dan Dasar dari CSS.
Jika kemauan anda untuk belajar CSS dibawah 80%, saya sarankan anda meninggalkan artikel ini, karena memang membutuhkan keseriusan yang cukup. Good luck guys
Kali kita akan belajar mengenai sesuatu yang dasar mengenai CSS, yaitu “Box – Modeling”.
 |
| struktur Box-Modeling di CSS |
- Item: Istilah yang saya definisikan, Item terdiri dari Padding dan Content,
- Margin: Diluar kotak/Item, seperti ruang hampa di luar kotak/Item,
- Border: Diluar kotak/Item, tetapi seperti menempel dengan Padding dan Content (pinggiran Item),
- Padding: Didalam kotak/Item, seperti ruang hampa didalam kotak/Item,
- Content: Didalam kotak/Item, Nah ini baru isi nya, seperti TEKS, GAMBAR/IMAGE, VIDEO, atau apapun yang anda masukkan.
Saya rasa untuk cukup untuk teori, mari sekarang kita praktek. Ikuti langkah-langkah dibawak ini, perhatikan step by step.
1) buat folder bernama Belajar CSS , didalam nya buat 2(dua) file kosong menggunakan Notepad beri nama index.html dan style.css
2) buka file index.html menggunakan “Notepad, Notepad ++ atau Dreamweaver”, kita akan membuat box-model dengan menggunakan file HTML ini.
3) buat kerangka dasar dalam file “index.html” seperti dibawah ini dan sebuah file css dengan nama style.css.
4) setelah kita buat kerangka dasar, mari kita membuat “wadah” untuk “Item” / box-model<html> <head><link href="style.css" rel="stylesheet" /> </head> <body> </body> </html>
<html> <head> <link href="style.css" rel="stylesheet" /> </head> <body> <!-- wadah box model --><divclass="boxModel"> ABC </div></body> </html>
6) Sekarang mari kita buat properties pada boxModel seperti tinggi, lebar, dan warnanya, tulis di file style.css yang sudah anda buat tadi.
.boxModel{
/* buat selector "class='boxModel'" ,pada tag div */
width: 50px; /*properties lebar*/
height: 50px; /* properties tinggi */
background: #FF0000; /* properties background */
} |
| boxModel sudah terlihat |
Seperti yang kita pelajari sebelumnya bahwa sebuah “Item” mempunyai Margin, Border, Padding, dan Content. Warna merah disini mencakup part dari “Item”(Padding + Content) saja.
Pertanyaannya,
Mengapa kotak tidak menempel pada pojok atas dan pojok kiri layar? dan seperti ada ruang kosong disana?
Jawabannya mudah ,disana terdapat Margin.
tapi margin siapa?? “boxModel kah” ??
tentu saja bukan, karna kita tidak mengeset nilai margin “boxModel” sebelumnya, berarti margin “Body” yang ter-set secara default dari settingan browser.
8) Mari kita buktikan bahwa Margin itu benar-benar ada, caranya kita hilangkan margin dengan me-set nilai nya 0.
body{
/*buat selector body*/
margin:0; /*set nilai margin menjadi 0*/
}
.boxModel{
/* buat selector "class='boxModel'" ,pada tag div */
width: 50px; /*properties lebar*/
height: 50px; /* properties tinggi */
background: red; /* properties background */
}  |
| margin telah hilang |
Dan margin itu benar-benar ada, hanya saja tidak terlihat.
9) Sekarang mari kita set margin pada boxModel.
body{
/*buat selector body*/
margin:0; /*set nilai margin menjadi 0*/
}
.boxModel{
/* buat selector "class='boxModel'" ,pada tag div */
width: 50px; /*properties lebar*/
height: 50px; /* properties tinggi */
margin:50px; /*set nilai margin*/
background: red; /* properties background */
}
 |
| margin boxModel telah di set 50px |
body{
/*buat selector body*/
margin:0; /*set nilai margin menjadi 0*/
}
.boxModel{
/* set nilai border, border parameter(tebal,style,warna)*/
border: 5px solid black;
margin:50px; /*set nilai margin*/
/* buat selector "class='boxModel'" ,pada tag div */
width: 50px; /*properties lebar*/
height: 50px; /* properties tinggi */
background: red; /* properties background */
} |
| border telah menampakkan wujudnya |
body{
/*buat selector body*/
margin:0; /*set nilai margin menjadi 0*/
}
.boxModel{
/* set nilai border,border parameter(tebal,style,warna)*/
border: 5px solid black;
margin:50px; /*set nilai margin*/
padding: 50px; /*set nilai padding*/
/* buat selector "class='boxModel'" ,pada tag div */
width: 50px; /*properties lebar*/
height: 50px; /* properties tinggi */
background: red; /* properties background */
}
 |
| Bagian yang tidak terisi text adalah Padding |
- Kesimpulannya ,
Silahkan download file jadinya . . .
Sekian dan Semoga bermanfaat . . . .
0 komentar:
Posting Komentar