Mengenal Dasar-Dasar Layout CSS Dalam Pembuatan Website

Dalam membuat atau mendesain sebuah tampilan halaman website, terdapat 3 prinsip utama yang harus dipahami dalam membuat layout CSS untuk membangun sebuah website, yaitu:

  • CSS box model
  • Floating
  • Positioning

Tiga prinsip ini secara bersamaan ini mengontrol penyusunan elemen-elemen tampilan yang ditampilkan di halaman website. Dan untuk kali ini, kita akan mengenal serta belajar dasar-dasar dalam pembuatan layout CSS untuk membangun tampilan website, yaitu CSS model box, margin & padding, serta border.

Mengenal Dasar-Dasar Layout CSS Dalam Pembuatan Website | Tanahpengetahuan.com

CSS box model

Setiap elemen blok di CSS berada di dalam kotak, dan dapat memiliki margin, padding, dan batas yang ditetapkan. Lebar kotak dapat ditentukan dalam nilai absolut (mis. Pixel atau px) atau dalam nilai relatif, yaitu dapat berupa:

– em – nilai lebar relatif terhadap ukuran font di ems, atau

– persentase – nilai lebar relatif terhadap wilayah konten di kotak tersebut

Setiap CSS box dibagi menjadi beberapa wilayah, terdiri dari:

  • Content
  • Padding
  • Border
  • Margin
basic layout structure
Dengan properti margin, border, dan padding, masing-masing dari 4 sisi dapat ditentukan secara terpisah.
basic layout structure
Margin dan Padding mungkin terlihat sama pada awalnya. Tetapi masing-masing memiliki efeknya sendiri pada content, terutama pada latar belakang yang berjenis block dan elemen div.
basic layout structure

Mengenal Margin
Margin menentukan ruang di sekitar elemen di luar batas. Properti margin dapat memiliki nilai negatif agar content dapat tumpang tindih dengan content lainnya. Properti margin akan mempengaruhi posisi elemen latar belakang (grafik dan / atau warna) dalam kaitannya dengan tepi elemen blok yang memuatnya. Properti margin dapat ditentukan sendiri baik di atas, kanan, bawah dan kiri, atau sekaligus menggunakan sintaks CSS.
Mengenal Padding
Padding mendefinisikan ruang di sekitar elemen di dalam border; yaitu antara border dan konten itu sendiri. Properti padding tidak boleh memiliki nilai negatif. Properti padding tidak mempengaruhi posisi elemen latar belakang (grafik dan / atau warna) dalam elemen blok containing; namun hanya pada posisi konten. Properti padding dapat ditentukan sendiri baik di atas, kanan, bawah dan kiri, atau sekaligus menggunakan sintaks CSS.
Margin Collapse
Saat dua margin vertikal atau lebih saling bertemu, mereka akan menciut untuk membentuk margin tunggal. Ketinggian margin gabungan ini akan sama dengan tinggi margin yang lebih besar dari 2 margin. Margin Collapse berlaku jika: 
– Dua elemen blok atau lebih ditumpuk satu di atas yang lain, atau
– Ketika satu elemen blok berada di dalam elemen blok lainnya
margin collapse stacked
margin collapse contained
Untuk margin dan padding (dan lainnya), CSS menyediakan sejumlah sintaks yang dapat menghemat penulisan baris dan baris kode. Daripada menulis ini:
#container {
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 6px;
  margin-left: 5px;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 12px;
}
Lebih baik dituliskan dengan cara seperti ini:

#container {
  padding: 20px 10px 30px 12px;
  margin: 0
px 5px 6px 5px;
}

Untuk urutan kodenya selalu searah jarum jam, dimulai dari atas
margin & padding
Selain itu juga dapat menerapkan hanya satu nilai margin atau padding, contoh:

#container {
  padding: 20px;
  margin: 5px;
}

Yang akan menerapkan nilai yang ditentukan pada keempat sisi dari padding dan margin.

margin & padding
Dan juga CSS dapat menerapkan dua nilai margin atau padding, contoh:
#container {
  padding: 10px 20px;
  margin: 0px 5px;
}
Nilai pertama diterapkan untuk nilai atas dan bawah dan nilai kedua diterapkan  untuk nilai kiri dan kanan.
margin & padding
Ada satu nilai yang cukup berguna saat mengatur layout, yaitu ‘auto’.
#container {
  padding: 10px 20px;
  margin: 0px auto;
}
Biasanya diterapkan ke area kiri & kanan properti margin, auto berguna untuk memusatkan elemen block pada jendela browser.
margin & padding

Borders
Border dapat diterapkan ke elemen blok apa pun. Border selalu berada di luar area padding, tetapi di dalam area margin. Properti border tidak boleh memiliki nilai negatif. Jika border tidak ditentukan, defaultnya adalah tidak ada border(yaitu tidak ada border yang muncul dan tidak ada spasi antara margin dan padding yang ditetapkan untuk border). Properti border dapat ditentukan secara independen di atas, kanan, bawah dan kiri, atau sekaligus menggunakan singkatan CSS.
Properti border yang dapat digunakan adalah:
Width: absolute (px, in, cm, or ‘thin’, ‘medium’, ‘thick’), or relative (ems)
Style: dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, etc
Color: ‘blue’, ‘red’, #FF9900, etc
Anda juga dapat membuat efek border dengan menggunakan gambar grafik di properti latar belakang CSS, bukan dengan properti border.
Pos dibuat 92

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Pos Terkait

Mulai mengetik pencarian Anda diatas dan tekan enter untuk mencari. Tekan ESC untuk batal.

kembali ke Atas