Langsung ke konten utama

Belajar CSS chapter 6 (Box Model, Border, Outline, Margin dan Padding)


Assalamualaikum wr wb
Melanjutkan postingan yang sebelumnya kali ini saya akan menjelaskan tentang CSS Box Model, Border, Outline, Margin, dan Padding.

CSS Box Model

Box model terdiri dari :
  • Margin
  • Border
  • Padding
  • Content
Untuk mengetahui ukuran seluruhnya elemen, kamu juga harus menambahkan padding, border dan margin.
Contoh dibawah ini menunjukan bahwa total dari elemen adalah 300px :
width :250px;
padding:10px;
border:5px solid gray;
margin :10px;
Cara mengetahuinya :
lebar = 250 px
+ 20 px (padding kiri dan kanan)
+10 px (border kiri dan kanan)
+20 px (margin kiri kanan)
=300 px
Dalam menentukan ukuran keseluruhan elemen kita harus menggunakan rumus :
Total lebar = lebar + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan
atau
Total tinggi = tinggi + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah
Pada contoh diatas apabila kita menggunakan Internet explorer total lebarnya bukan 300px. Untuk memperbaiki hal ini kita harus mendeklarasikan DOCTYPE seperti ini :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

CSS Border

Dengan menggunakan properti CSS border kita dapat megubah tampilan dan warna dari sebuah elemen border.
Semua Properti CSS Border
PropertiDeskripsi
borderMengatur semua properti border dalam satu deklarasi
border-bottomMengatur semua properti border bawah dalam satu deklarasi
border-bottom-colorMengatur warna dari border bawah
border-bottom-styleMengatur tampilan dari border bawah
border-bottom-widthMengatur lebar dari border bawah
border-colorMengatur warna dari keempat border
border-leftMengatur semua properti border kiri dalam satu deklarasi
border-left-colorMengatur warna dari border kiri
border-left-styleMengatur tampilan dari border kiri
border-left-widthMengatur lebar dari border kiri
border-rightMengatur semua properti border kanan dalam satu deklarasi
border-right-colorMengatur warna dari border kanan
border-right-styleMengatur tampilan dari border kanan
border-right-widthMengatur lebar dari border kanan
border-styleMengatur tampilan dari keempat border
border-topMengatur semua properti border atas dalam satu deklarasi
border-top-colorMengatur warna dari border atas
border-top-styleMengatur tampilan dari border atas
border-top-widthMengatur lebar dari border atas
border-widthMengatur lebar dari keempat border

Nilai dari border-style :
  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Contoh CSS border :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</body>
</html>

Hasilnya :
atau penulisan css nya bisa digabung menjadi :
border-style:dotted solid;

CSS Outline

Outline adalah gari yang tergambar disekitar elemen, diluar batas border.
Semua Properti CSS Outline
nomor yang ada dalam kolom mengindikasikan properti versi CSS mana yang didefinisikan (CSS1 atau CSS2).
PropertiDeskripsiNilaiCSS
outlineMengatur semua properti ouline dalam satu deklarasioutline-color
outline-style
outline-width
inherit
2
outline-colorMengatur warna dari sebuah outlinecolor_name
hex_number
rgb_number
invert
inherit
2
outline-styleMengatur tampilan sebuah outlinenone
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-widthMengatur lebar dari sebuah outlinethin
medium
thick
lengthinherit
2

Contoh :
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p
{
outline:#00FF00 dotted thick;
}
</style>
</head>
<body>
<p>Ini adalah merupakan contoh dari outline</p>
</body>
</html>
Hasilnya :

CSS Margin

Margin adalah yang berada disekitar elemen yang membatasi dengan elemen lain.
Semua Properti CSS Margin
PropertiDeskripsi
marginMengatur semua properti margin dalam satu deklarasi
margin-bottomMengatur margin bawah sebuah elemen
margin-leftMengatur margin kiri sebuah elemen
margin-rightMengatur margin kanan sebuah elemen
margin-topMengatur margin atas sebuah elemen

Nilai yang diizinkan
NilaiDeskripsi
autoBrowser mengatur margin
Hasilnya ditentukan browser
lengthMargin pasti (dalam pixels, pt, em, dan lain-lain.)
%margin dalam persen

Contoh penulisan :
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Atau dapat disingkat :
margin:100px 50px;
Properti margin bisa memiliki satu nilai sampai empat nilai :
  • margin:25px 50px 75px 100px;
    • margin  atas  25px
    • margin kanan 50px
    • margin bawah75px
    • margin kiri 100px
  • margin:25px 50px 75px;
    • margin atas 25px
    • margin kiri dan kanan 50px
    • margin bawah 75px
  • margin:25px 50px;
    • margin atas dan bawah 25px
    • margin kiri dan kanan 50px
  • margin:25px;
    • keempat margin 25px

CSS Padding

Properti CSS Padding mendefinisikan sebagai jarak antara border dengan konten.
Semua Properti Padding
PropertiDeskripsi
paddingMengatur semua properti padding dalam satu deklarasi
padding-bottomMengatur padding bawah sebuah elemen
padding-leftMengatur padding kiri sebuah elemen
padding-rightMengatur padding kanan sebuah elemen
padding-topMengatur padding kanan sebuah elemen
Nilai yang diizinkan
nilaiDeskripsi
lengthpadding pasti (dalam pixels, pt, em, dan lain-lain.)
%padding dalam persen
Contoh penulisan :
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
atau dapat juga :
padding:25px 50px;

Sekian untuk postingan kali ini.  Terimakasih.
Wassalamualaikum wr wb
Sumber : w3schools.com

Komentar

Postingan populer dari blog ini

Soal Pilihan Ganda Variabel, Konstanta, Operator dan Ekspresi Pemrograman C++

1.double angka; . kode program disamping merupakan tipe data… [C3] a.Bilangan bulat b.Bilangan riil c.Logika d.Karakter e.Struktur      2.Dibawah merupakan tipe data bilangan bulat adalah… [C1] a.char b.double c.float d.int e.boolean      3.Tipe data bahasa C++ untuk true false adalah… [C1] a.String b.Char c.Boolean d.Byte

Penilaian (Definisi, Prinsip dan Tujuan)

Definisi Penilaian Penilaian adalah proses pengumpulan dan pengolahan informasi untuk menentukan pencapaian hasil belajar peserta didik (Saputra, Salikun, & Nugroho, 2014, hlm.31).
Penilaian adalah proses pengumpulan berbagai informasi tentang siswa dan ruang kelas untuk tujuan membuat keputusan instruksional (Sapa’at, 2012. hlm.221).
Dengan dilakukannya penilaian di dalam kelas dapat menjawab pertanyaan tentang sebaik apa hasil atau prestasi belajar peserta didik. Hasil penilaian dapat berupa nilai kualitatif (berupa kata-kata) dan nilai kuantitatif (berupa angka).
Proses pengumpulan dan pengolahan informasi tersebut dilakukan untuk mengukur pencapaian hasil belajar peserta didik. Proses penilaian tersebut mencakup: penilaian otentik, penilaian diri, penilaian berbasis portofolio, ulangan, ulangan harian, ulangan tengah semester, ulangan akhir semester, ujian tingkat kompetensi, ujian mutu tingkat kompetensi, ujian nasional, dan ujian sekolah/ madrasah. (Permendikbud No.66 Tahun …

Bagaimana Cara Kerja Kapasitor

Sebuah kapasitor bentuknya kecil seperti sebuah baterai. Walaupun kapasitor bekerja dengan cara yang sangat berbeda, kapasitor dan baterai keduanya menyimpan energi listrik. Jika kamu pernah membaca bagaimana cara kerja baterai, maka kamu tahu bahwa sebuah baterai memiliki dua buah terminal. Di dalam sebuah baterai, reaksi kimia menghasilkan elektron-elektron pada ujung satu terminal and menyerap elektron-elektron pada terminal lainnya. Sebuah kapasitor jauh lebih sederhana di bandingkan sebuah baterai, kapasitor tidak dapat menghasilkan elektron-elektron baru -- kapasitor hanya menyimpan elektron-elektron.

Di dalam kapasitor, terminal-terminalnya tersambung ke dua plat logam yang dipisahkan oleh sebuah bahan bukan penghantar listrik, atau dielektrik. Kamu dapat dengan mudah membuat sebuah kapasitor dari dua buah aluminum foil dan satu buah kertas. Itu tidak akan menjadi sebuah kapasitor pada umumnya dalam hal kapasitas penyimpanan, tapi itu akan bekerja.

Secara teori, dielektrik ada…