Pada kesempatan kali ini saya akan menjelaskan apa itu layout, bagaimana cara mengatur margin yang kita inginkan, border dan padding. Baiklah tanpa basa-basi yang panjang mari kita simak di bawah ini :
Baca juga : Apa itu Shorthand dalam CSS ?
Layout Dalam CSS
Layout dalam CSS itu adalah tata letak untuk mengatur tampilan seperti inginkan, contoh tata letak seperti halaman-halaman web, dan sebagainya. Dalam CSS, kita harus mengenal adanya properti-properti yang di gunakan mengeset layout dokumen web dengan menggunakan CSS.
Salah satunya adalah yang di kenal dengan properti yang saya sebutkan yaitu margin dan padding. Margin dan paddding dalam web yang di buat menggunakan tekhnologi CSS biasanya di gunakan untuk memformat tampilan layout situs.
Model format dengan style CSS dapat di artikan bahwa tiap-tiap elemen akan di kelilingi oleh tiga area yang berbeda. Area itu yang sering disebut adalah padding, borde, dan margin. Masing-masing entitas tersebut dapat di atur melalui property CSS yang menginjinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML yang di buatnya.
Margin Dalam CSS
Margin adalah pemberian jarak atau batas pada suatu objek dengan objek yang berbeda di luar. Adapun nilai margin (garis tepi atau daerah pinggir) halaman web dapat kita atur besar dan letaknya melalui properti dari margin seperti "margin-top", "margin-bottom", "margin-right", dan "margin-left". Contoh penggunaan margin dalam mengeset dokumen web adalah sebagai berikut:
- <html>
- <head>
- <title>Mengatur margin</title>
- <style type="text/css">
- body {margin-top:30; margin-bottom:30; margin-right:40; margin-left:40;}
- </style>
- </head>
- <body>Bagaimana mengatur margin? <br>
- Dengan menggunakan property margin
- </body>
- </html>
Anda dapat merubah niali sesuka hati anda yang berwarna hijau untuk mengatur tata letaknya. Jika di lihat atau di eksekusi di dalam browser maka akan terlihat seperti pada contoh gambar di bawah ini :
Dalam contoh di atas dapat di ketahui bahwa dokumen tersebut akan memiliki lebar margin atau garis tepi atas sepanjang 30 piksel, lebar garis tepi bawah sepanjang 39 piksel, garis tepi kanan 40 piksel, dan garis tepi kiri sepanjang 40 piksel.
Anda juga dapat memanfaatkan seluruh properti dengan menggunakan shorthand property, yaitu cara penulisan dengan menulis hanya velue-nya saja seperti di bawah ini :
<style="text/css">body {margin: 30px 30px 40px 40px}</style>
Border dalam CSS
Dalam CSS, anda dapat menyesuaikan lebar border dengan menggunakan property "border-top-width","border-left-width", "border-right-width" dan "border-bottom-width, anda dapat menentukan nilainya dengan menata suatu border dengan shortcut property "border-width". Contoh seperti di bawah ini:
- <html>
- <head>
- <title> Mengatur Border </title>
- <style type="text/css">
- body {border-top-width: 30px; border-right-width: 30px; border-bottom-width: 40px; border-left-width: 40px;}
- </style>
- </head>
- <body>
- Bagaimana mengatur border?<br>
- Dengan menggunakan property border
- <body>
- </html>
Dalam contoh script di atas, halaman web yang di buat akan menggunakan lebar border atas sebesar 30 pixel, lebar border kanan sebesar 30piksel, lebar border bawah sebesar 40 piksel, dan lebar border kiri sebesar 40 piksel. Anda dapat pula menentukan lebar keseluruhan border menggunakan script seperti :
body {border-width: 30px;}
anda dapat pula menentukan lebar border dengan kata bantu "thick","medium","thin", dan "none" seperti di bawah ini :
body {border-top-width: thick; border-right-width: medium; border-bottom-width: thin; border-left-width: none;}
atau, tentukan lebar keseluruhan border dengan menggunakan salah satu kata bantu yang ada, seperti contoh di bawah ini:
body {border-width: thick;}
Dalam CSS kita juga dapat mengatur warna border halaman web yang di buat dengan menggunakan property "border-color". Seperti terlihat dalam contoh berikut:
- <html>
- <head>
- <title> Warna Border </title>
- <style type="text/css">
- body {border-color: green; border-width: 50px; background: lime;}
- </style>
- </head>
- <body>
- Bagaimana mengatur warna border?<br>
- Dengan menggunakan Property border-color
- </body>
- </html>
Dalam contoh di atas, warna border akaan menjadi kuning dengan ketebalan border keseluruhan sebesar 10 piksel dan warna background lime. Sayangnya, property ini tidak di dukung dalam browser netscape, Namun jika anda menggunakan borwser internet explorer, akan terlihat berbeda cobalah lihat sendiri untuk hasilnya.
Padding Dalam CSS
Padding adalah pemberian jarak atau batas antara suatu objek dengan objek-objek yang berada di dalam objek tersebut. Padding dalam CSS dapat di atur menggunakan property pengaturan padding seperti padding-top padding-bottom padding-right, dan padding left perhatikan contoh script di bawah ini :
- <html>
- <head>
- <title> Mengatur Padding </title>
- <style type="text/css">
- body {border-color: green; border-width: 50px; background: lime; padding-bottom: 30px; padding-top: 30px; padding-right: 40px; padding-left: 40px;}
- </style>
- </head>
- <body>
- Bagaimana mengatur padding? <br>
- Dengan menggunakan property padding
- </body>
- </html>
Catatan: Untuk mengeksekusi di sarankan mengguakan browser firefox dan lihatlah hasilnya sendiri
Ok sampai di sini dulu untuk penjelasan mengenai layout, mudah-mudahan artikel ini dapat membantu anda semua. Salam Sukai Penulis
0 Komentar