A. Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets
juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat
kembali menggunakannya bila diperlukan.
Baca Juga : Cara Memberi Jarak Konten/isi Elemen dengan CSS ( Padding CSS)
Fungsi CSS
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih
fungsional dan menarik.
Cara Kerja CSS
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.
B. Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS ( Margin )
Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar <div> dan tag-tag HTML lainnya.Sebagai contoh, buatlah file HTML baru dengan nama
margin_css.html, lalu tambahkan kode berikut:
Ketikkan koding berikut:
Berikut adalah tampilan yang akan anda dapatkan :
Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita menambahkan margin bawah (margin-bottom) sebesar 50px. Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat menghapus property margin-bottom dan perhatikan perbedaannya.
Anda juga dapat memberikan jarak dari kanan (right), kiri (left) dan atas (top). Misalnya :
margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS? Mungkin itu saja tulisan yang membahas tentang Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
Bagaimanakah cara Mengatur Jarak Element div , img , p dan lain sebagainya . . ( CSS margin , padding )
Apa Itu Margin ?, dan Apa Itu Padding ,,
margin adalah sebuah property dari css yang berfungsi untuk mengatur jarak Element dengan Element lain Sedangkan Padding property yang berfungsi untuk mengatur jarak content / isi dengan Element itu sendiri atau bisa kita samakan dengan ketebalan Element . Sedikit
penjelasan mengenai CSS margin , padding di atas .
baiklah , Tutorial kita kali ini yaitu cara mengatur jarak Element baik itu div , img , p dan lain sebagainya .oy , bagi sobat yang belum baca Artikel sebelumnya silahkan baca disini yaitu Tips Mengatur Letak Element
CSS FLOAT , CLEAR atau baca saja nanti setelah menyimak cara mengatur jarak Element .
Adapun beberapa property dan value untuk CSS margin , padding ini . selengkapnya silahkan lihat pada tabel di bawah ini :
margin | menyesuaikan jarak element dengan element lain |
margin-top | menyesuaikan jarak element hanya pada bagian atas element |
margin-right | menyesuaikan jarak element hanya pada bagian kanan element |
margin-bottom | menyesuaikan jarak element hanya pada bagian bawah element |
margin-left | menyesuaikan jarak element hanya pada bagian kiri element |
padding | menyesuaikan jarak element dengan isi element |
padding-top | menyesuaikan jarak element dengan isi element hanya pada bagian atas content |
padding-right | menyesuaikan jarak element dengan isi element hanya pada bagian kanan content |
padding-bottom | menyesuaikan jarak element dengan isi element hanya pada bagian bawah content |
padding-left | menyesuaikan jarak element dengan isi element hanya pada bagian kiri content |
px | menyesuaikan jarak Element menggunakan pixels |
em | menyesuaikan jarak Element menggunakan em |
pt | menyesuaikan jarak Element menggunakan pt |
cm | menyesuaikan jarak Element menggunakan centi meter |
dibawah ini adalah gambar border , content , margin , padding :
GAMBAR
Contoh 1 :
CSS di atas menyebutkan bahwa jarak element bagian atas dan bawah 8px , sedangkan pada bagian kiri dan kana adalah 0 .
contoh 2 :
Source CodePOSISI PADDING#box img {width:60px;height:60px;padding:0;margin:0;}
<style> #BOX {width:200px;height:200px;margin-top:20px;padding:0;border:1px solid black;position:relative;clear:both;} #BOX img{width:80px;height:80px;padding:0;margin:0;} </style> <div id="BOX"> <img src="//sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/> <img src="//sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/> </div>untuk CSS positioning silahkan baca disini yaitu cara mengatur posisi Element (CSS POSITION PROPERTY ) . dan mungkin saya rasa cukup disini pembahasan mengenai CSS margin padding di cara mengatur jarak Element . . Dan semoga Artikelnya bermanfaat untuk sobat ,,,,