Begini ternyata code script Properti di CSS !!

Haloo readerzz, kali ini kita akan membahas mengenai Code script & Penjelasannya mengenai Property di CSS seperti Margin, Padding, Float, Absolut, Border, Display, dan Box model. Silahkan disimak berikut ini!. 


1. Margin 

Margin merupakan salah satu dari properti di CSS yang digunakan untuk memberikan spasi di area disekitar elemen. Properti Margin ini akan mengatur ukuran spasi diluar dan dalam border. 

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
  }
maka, setelah di running akan tampil sebagai berikut ini 


2. Padding 

Padding berfungsi sebagai pemberi ruang / space pada elemen di sekitar sekitarnya. Padding bisa di daur ulang atau digunakan lagi. Padding berfungsi mengatur jarak dan konten.

Padding terbagi atas 4 bagian; yaitu 

A. Padding Top ; Berfungsi menjadi pemberi space / ruas dibagian atas. 

B. Padding Right : Berfungsi sebagai pelebar/pemberi space di bagian kanan 

C. Padding Left : Berfungsi sebagai Pelebar/pemberi space di bagian kiri

D. Padding Bottom : Berfungsi sebagai pemberi space di bagian bawah 



div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
  }
 

3. float

float berfungsi sebagai pembuat layout. Layout akan digunakan di sisi demi sisi misal di sisi kiri atau kanan standar website.  

contoh codingan bawah ini merupakan contoh codingan float kanan (dilambangkan right) 

Jika ingin menampilkan Float kiri, maka perlu ganti Codingan FLOAT dari right ke left 

img {
    float: right;
  }
 

Contoh letak float jika ingin right atau left


4. Absolute

Absolute dapat memposisikan dirinya bebas dengan wadah . Ia merupakan deklarasi posisi di CSS, Contoh saja di bagian mana posisi itu. Absolute memiliki kembaran, yaitu Relative. Untuk lebih jelasnya bisa dilihat contohnya.


div {
    padding: 20px;
}

5. Border 

border dalam bahasa indonesia adalah batas/pinggir yang berfungsi sebagai pengatur design tampilan website sperti warna, Style dan lebar selain itu, border merupakan baris barisnya atau batas batasnya. Biasanya batas batasnya ada beberapa macam. Seperti dotted (titik titik), Dashed (Garis garis), Solid (yaitu garis solid), Double (dua garis) DLL. 

Contoh ; 

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

6. Display

Display berfungsi sebagai penentu bagaimana suatu elemen ditampilkan. Fungsi property CSS Display ini hampir mirip dengan property CSS Visibility, kedua-duanya memiliki fungsi untuk menyembunyikan suatu elemen. Display ini akan dilihat oleh pengunjung website kita. Oleh sebab itu, agar penikmat/pembaca web, kita harus memperbagus Display kita

.a {
    display: contents;
    border: 2px solid red;
    background-color: #ccc;
    padding: 10px;
    width: 200px;
  }
 
  .b {
    border: 2px solid blue;
    background-color: lightblue;
    padding: 10px;
  }
 


7. Box Model

Box model berfungsi sebagai tempat design atau tata letak di website kita. Box model CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Box model ini terdiri dari: margin, border, padding, dan konten.





<style>
    {
     
   :
   ;
   }
   </style>
   
   <body>
   
   <div>
   Lorem ipsum dolor sit amet,
   consectetur adipiscing elit,
   sed do eiusmod tempor incididunt
   ut labore et dolore magna aliqua.
   </div>
   
   </body>


Begitulah penjelasan yang bsisa diberikan tenatang code script serta penjelasan tentang property CSS 






Comments

Post a Comment

Popular posts from this blog

TERKUAK!!! begini cara buat tabel HTML yang sangat meng-ez abiez

Image
Halo readderzzz,  Pada kesempatan kali ini, saya akan memberikan tips and tricks cara termudah membuat tabel di bahasa pemograman HTML.    A. Pengertian tabel di HTML  Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell.  Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.   B. Cara membuat tabel HTML dari yang termudah ke yang ter lumayan sulit   Tabel mudah :  adapun contoh tabel mudah yaitu :  Contoh Coding-an HTML nya :  Tabel mudah, cuma ditambahin Colspan & Rowspan Colspan atau column span merupakan atribute HTML y
Read more

PHP Part 4 : Operator Aritmatika

  Operator Aritmatika Dalam PHP : Operator sering digunakan untuk program yang mengandung perhitungan atau suatu kondisi juga digunakan untuk memanipulasi atau mengubah suatu nilai pada variabel yang sudah ditentukan.  Operator Aritmatika banyak digunakan dalam dunia AKUTANSI baik akutansi keuangan dan akutansi Ekonomi. contoh nya 100.000 - 50.000          100.000 dan 50.000 biasa disebut operasi dan tanda - adalah operasi.   Dalam bahasa pemrograman PHP, terdapat 3 operasi utama yaitu : Operator Binary Operator Unary Operator Ternary Operator Aritmatika : Penjumlahan <?php     $yudhis = 2 ;     $udin = 3 ;     //tampilkan melalui echo     echo ( $yudhis + $udin ); <?php        2. Pengurangan <?php     $yudhis = 2006 ;     $udin = 2005 ;     //tampilkan melalui echo     echo ( $yudhis - $udin ); <?php        3. Perkalian <?php     $yudhis = 20043 ;     $udin = 200245 ;     //tampilkan melalui echo     echo ( $yudhis * $udin ); <?php         4. Pembagian <?
Read more

Ini dia 4 operator PHP : Dasar-dasar

Image
1. OPERATOR PENUGASAN Operator penugasan atau assisment adalah suatu operator yang memberi nilai kepada suatu variabel/kode. Nilainya sendiri itu bisa nilai tunggal yang jelas.  <?php $angka3 = 2022 ; echo "contoh penugasan 'isi nilai pengurangan' adalah  2022 - 2006 = " .( $angka3 -= 2006 ). "<br/>" ; //contoh saja di koding saya ini. nilai variabel $angka3 adalah 2022 //echo untuk menampilkan awalan dan ".($angka3 -= 2006) adalah perintah nya // dan hasilnya akan muncul seperti ini. 2. OPERATOR PERBANDINGAN  Operator ini berfungsi untuk membandingkan 2 nilai yang berbeda, hanya ada 2 nilai yaitu TRUE jika hasil perbandingannya sama dan FALSE jika nilainya tak sama atau berbeda   <?php //deklarasi variabel dulu dongs $angka1 = 99 ; $angka2 = 100 ; //lanjut ke perintah nya if ( $angka1 < $angka2 ){     echo "awikwok kecil coegg aokwokko" ; } else {     echo "diluar nalar akal sehat" ; } //echo awikwok dan echo diluar
Read more