Penjelasan dan Code Script dari properti CSS

-
 Halo Teman-teman! saya akan menjelaskan dan menampilkan contoh dari properti CSS. Apa sih itu Properti CSS? Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. Apa saja isi dari Property CSS dan contohnya? ayo kita lihat.

1. Margin

Margin merupakan spasi atau ruang kosong di dalam Box Model. fungsinya mengatur jarak antara satu elemen dengan elemen lainnya pada HTML. Contoh code script dan hasilnya;

    .box1 {

    }
    .box2{
      margin-left: 20px;
    }

    /* ini digunakan agar posisi element block berada di tengah-tengah */
    .box3 {
      margin: 0 auto;
    }

Hasil dari code script di atas

2. Padding

Padding adalah sebutan untuk spasi atau ruang di antara konten dan batas pada Cascading Style Sheet (CSS) dalam website. Property ini berfungsi untuk mengatur tampilan elemen yang tertulis dan juga memisahkan konten dari tampilan visual dalam sebuah website. Contoh code script dan hasilnya;

.tanpa-padding {
   border: 2px solid red;
}
.dengan-padding {
   border: 2px solid red;
   padding: 10px;
}


3. Float

Property float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak.Tujuan utama float adalah untuk mengatur text agar melipat di sekitar elemen image (gambar). Akan tetapi, float juga bisa digunakan untuk layout dan style lainnya.

CSS property float memiliki value: left, right, none dan inherit. Secara default float memiliki nilai none

float: left;

Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kiri dari posisi containing block (elemen blok yang menampungnya).

float: right;

Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kanan dari posisi containing block (elemen blok yang menampungnya).

float: none;

Digunakan untuk menentukan bahwa sebuah elemen tidak boleh mengapung (float).

float: inherit;

value dari property float, mengikuti induk element sebelumnya.

Contoh code script dan hasilnya;

        .float-left img {
          float: left  ;
          margin-right: 20px;
        }

        .float-right img {
          float: right  ;
          margin-left: 20px;
        }


                          Hasil dari code script di atas

4. Absolute

Nilai absolute memungkinkan untuk menghapus elemen dari wadah div dengan deklarasi top, bottom, left, right.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Website Pembelian Tiket Pesawat dengan PHP dan SQL

-
Gambar
  Dalam sebuah system e-commerce tentunya harus terdapat database yang dapat menangani beberapa hal seperti: menangani database produk yang akan dijual, menangani pencatatan order yang masuk, produk apa yang di pesan, seberapa banyak produk tersebut dipesan. Tabel- Tabel dalam database yang kita perlukan untuk membuat Pembelian Tiket Pesawat : Tentu saja kita membutuhkan codingan PHP untuk membuat struktur design. Codingan yang akan kita perlukan : 1. koneksi.php 2.Tampilan User : - index.php                                      - login.php                                     - register.php                                       - pesanan.php  ...
Baca selengkapnya

Cara Menggabungkan Sel Tabel (Attribut Rowspan dan Colspan)

-
Gambar
Pertama-tama apa sih itu Attribut Rowspan dan Colspan? Atribut R owspan  digunakan untuk menggabungkan baris pada tabel. Sedangkan Atribut C olspan  digunakan untuk menggabungkan kolom pada tabel Contoh Penggunaan Rowspan dan Colspan :   < table class="table" border="2">   < thead class=" thead-dark ">     < tr >         < th rowspan="2">No</ th >         < th rowspan="2">First Name</ th >         < th rowspan="2">Last Name</ th >         < th colspan="3">Life Style</ th >     </ tr > Dalam contoh di atas, kita dapat melihat bahwa tag  th  yang memiliki Attribut  Colspan ,   akan membuat sel tabel  bersatu  dengan  kolom  disebelahnya. Sedangkan atribut  Rowspan  akan membuat sel tabel bersatu dengan  baris  dibawahnya. Kedua at...
Baca selengkapnya

Membuat program dengan 5 Struktur Kontrol pada bahasa PHP

-
Gambar
<?php while ( true ) {   echo "Hello \n " ;     break ; //saya menambah break dikarenakan loop yang dilakukan pada codingan diatas terlalu banyak } $siswa = array ( "Udin," , " Pesulap Merah" , " dan Gus Samsudin" ); foreach ( $siswa as $pelajar ) {   echo " $pelajar " ; } $favwarna = "hijau" ; switch ( $favwarna ) {   case "merah" :     echo "<br> Warna favorit anda adalah Merah <br>" ;     break ;   case "hijau" :     echo "<br> Warna favorit anda adalah Hijau <br>" ;     break ;   default :     echo "<br> Anda tidak memiliki warna favorit <br>" ; } for ( $x = 10 ; $x < 100 ; $x += 65 ) {         if ( $x == 10 ) {             continue ;         }     echo "Nilai rata-rata kalian: $x <br>" ; } $nilai = 75 ; if ( $nilai > 60 ) {   echo "Nilai kal...
Baca selengkapnya