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

BEGINI KAH CARA MENGENAL CLASS DAN ID CSS HTML???

  Halo Rederszzz, seperti yang kita tau, bahwa CLASS dan ID sangat penting di HTML. Oleh sebab itu, di Tutorial kali ini saya akan memberikan informasi/Materi tentang CLASS dan ID.  •. CLASS dan ID apa itu?    Class & ID bisa dibilang suatu penanda kode pada HTML, 'penanda' sendiri itu merupakan Elemen - elemen HTML dengan diberinya tanda CLASS dan ID (class & id)    Class digambarkan dengan titik (.), sedangkan id digambarkan dengan (#). Untuk apa sih diberi penanda/elemen? untuk dapat dimanipulasi CSS dan  JavaScript. Analoginya, anda punya 9 kotak berwarna merah, kemudian anda ingin mengubah warna satu - dua lebih kotak. Maka Class & id disini berfungsi sebagai penanda memberikan tanda / nama pada kotak agar bisa anda ubah dan kotak lain tidak ikut berubah  •Kelebihan Class ketimbang id  Class dapat diberikan dan menerima banyak elemen elemen HTML dan dapat dipanggil sekaligus, sedangkan id hanya dapat bekerja pada satu penanda...
Read more

Bab 4 Style halaman web dan client side scripting

Image
Halo readerzzz di kesempatan kali ini saya ingin memberikan Materi BAB 4 MATA PELAJARAN PPdPB  A. Style pada halaman Web  CSS sebagai sebuah bahasa style  sheet yang digunakan dalam mengatur tampilan dokumen. dengan adanya dengan adanya CSS maka tampilan halaman yang sama akan memiliki format yang berbeda. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft word yang dapat mengatur beberapa style misalnya heading sub bab body text footer image dan style lainnya untuk digunakan bersama-sama dalam beberapa berkas atau file 1. Konsep Layout dalam halaman web  konsep layout dalam halaman web memiliki 5 elemen yaitu  a. Element header  Elemen Header ini berisi judul dan penjelasan lain dokumen. Elemen ini biasanya diisi dengan logo website, Menu - Menu biasa (semisal Login, Logout, Menu's dll)  b. Element navigation  Elemen ini memberikan akses Navigasi ke halaman halaman web lainya (contoh seperti Gambar dokumentasi, Tentang Apa yang d...
Read more