Macam-macam Properti dalam CSS

 HALOO, hari ini kita akan mempelajari beberapa Properti dalam CSS sekaligus contoh kodenya.

Mari kita mulai!!!

• Margin 

Margin fungsinya mengatur jarak antara satu elemen dengan elemen lainnya pada HTML.
Sebagai contoh kita bisa melihat script kode berikut.

<h3 style="background-color: greenyellow; margin: 10px;">Menggunakan Margin</h3>

Maka akan menghasilkan tampilan seperti ini pada browser.

Pada gambar diatas, kita lihat kotak warna elemen HTMLnya jadi memiliki jarak selebar 10px. Adapun posisinya meliputi sudut kiri, atas, kanan, bawah sama-sama berjarak selebar 10px.

Selain dari itu, ada beberapa pembagian lagi dalam mengatur tiap sudutnya. Langsung aja kita perhatikan kode berikut ini.

<h3 style="background-color: greenyellow; margin-top: 20px;">Margin 1 Sisi Atas</h3>

<h3 style="background-color: greenyellow; margin: 50px 100px;">Margin 2 Sisi</h3>

<h3 style="background-color: greenyellow; margin: 5px 100px 10px;">Margin 3 Sisi</h3>

<h3 style="background-color: greenyellow; margin: 5px 50px 10px 60px;">Margin 4 Sisi berbeda</h3>

Maka akan menghasilkan tampilan seperti ini pada browser.

Dari kode tersebut, menghasilkan tampilan yang berbeda pada tiap elemen. Itu bisa dilihat pada gambar di atas.

Berikut ini ada deskripsi singkat mengenai ke empat margin pada script kode di atas.
-Margin 1 sisi, untuk 1 sudut margin. Dengan begini, salah satu sudut memiliki lebar atau jarak seperti yang ditentukan.
-Margin 2 sisi, untuk 2 sudut besar margin. Jadi pada contoh di atas, 50px untuk sudut atas dan bawah, dan 100px untuk kiri dan kanan.
-Margin 3 sisi, untuk 3 sudut. Jadi pada contoh di atas, 5px untuk sudut atas, 100px untuk sudut kiri dan kanan, dan 10px untuk sudut bawah.
-Margin 4 sisi berbeda, untuk 4 sudut margin jika per sudutnya beda ukuran. Jadi pada contoh di atas, 5px untuk sudut atas, 50px untuk sudut kanan, 10px untuk sudut bawah, dan 60px untuk sudut kiri. Jadi, urutan mengikuti pola segi empat, berawal dari atas, lalu kanan, kemudian bawah, hingga ke kiri.

• Padding

Padding merupakan sebutan untuk spasi atau ruang di dalam tag HTML. Untuk aturan penulisannya, mirip sekali dengan margin.

Mari kita coba contoh codingnya.

<h3 style="background-color: greenyellow; padding: 30px;">Padding sebesar 30px</h3>

Begini hasilnya saat dibuka di browser

Hasilnya spasi atau ruangan dalam konten tersebut melebar sebesar 30px tiap sudut.

Selain dari itu, ada beberapa pembagian lagi dalam mengatur tiap sudutnya. Langsung aja kita perhatikan kode berikut ini.

<h3 style="background-color: greenyellow; padding-left: 30px;">Padding Kiri</h3>

<h3 style="background-color: greenyellow; padding: 50px 100px;">Padding 2 Sisi</h3>

    <h3 style="background-color: greenyellow; padding: 10px 100px 50px;">Padding 3 Sisi</h3>

    <h3 style="background-color: greenyellow; padding: 5px 50px 10px 60px;">Padding 4 Sisi berbeda</h3>

Maka akan menghasilkan tampilan seperti ini pada browser.

Dari kode tersebut, menghasilkan tampilan yang berbeda pada tiap elemen. Itu bisa dilihat pada gambar di atas.

Berikut ini ada deskripsi singkat mengenai ke empat padding pada script kode di atas.
-Padding 1 sisi, untuk 1 sudut padding. Dengan begini, 1 sudut memiliki lebar atau jarak sesuai yang sudah ditentukan.
-Padding 2 sisi, untuk 2 sudut besar padding. Jadi pada contoh di atas, 50px untuk sudut atas dan bawah, dan 100px untuk kiri dan kanan.
-Padding 3 sisi, untuk 3 sudut. Jadi pada contoh di atas, 10px untuk sudut atas, 100px untuk sudut kiri dan kanan, dan 50px untuk sudut bawah.
-Padding 4 sisi berbeda, untuk 4 sudut padding jika per sudutnya beda ukuran. Jadi pada contoh di atas, 5px untuk sudut atas, 50px untuk sudut kanan, 10px untuk sudut bawah, dan 60px untuk sudut kiri. Jadi, urutan mengikuti pola segi empat, berawal dari atas, lalu kanan, kemudian bawah, hingga ke kiri.

• Float

Float merupakan properti CSS yang bisa kita manfaatkan untuk memposisikan suatu elemen, digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. nilai dari float sendiri adalah left, right, none, inherit.

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.

saya akan berikan contoh bagaimana penggunaan float pada suatu elemen yang akan diberikan posisi tertentu misalnya disebelah kiri atau kanan, pada kasus ini elemen yang akan diposisikan adalah gambar.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Fungsi Float pada CSS</title>

    <style>

        .container {

            width: 800px;

            margin: auto;

        }

        img {

            float: left;

            margin-right: 10px;

        }

    </style>

</head>

<body>

    <div class="container">

        <h2>Fungsi Float pada CSS</h2>

        <img src="https://static.wikia.nocookie.net/kamenrider/images/0/08/Revice_21.png/revision/latest/scale-to-width-down/1000?cb=20220206015942" width="400" alt="img-1">

        <p>gambar dari kamen rider revice episode 21, menunjukkan Hiromi Kadota yang telah siap untuk melawan Orteca meskipun dengan kondisi tubuhnya yang tidak memungkinkan untuk bertarung </p>

    </div>

</body>

</html>

Pada tag img telah diberikan properti float:left yang berarti elemen gambar telah diposisikan disebelah kiri, kemudian teks akan mengikuti elemen gambarnya.

• Absolute

Value absolute digunakan untuk membuat suatu elemen bisa dipindahkan dan membuat elemen mengambang ke atas dibanding element lain.
bisa dicoba dengan contoh coding ini.

<!DOCTYPE html>

<html>

  <head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>

  div {

     padding: 10px;

  }

  .green {

     background-color: green;

     position: static;

}

  .red {

     background-color: red;

     position: absolute;

     top: 10px;

 }

  .yellow {

     background-color: yellow;

     position: static;

  }

</style>

</head>

<body>

   <div class="green">Green</div>

   <div class="red">Red</div>

   <div class="yellow">Yellow</div>

</body>

</html>

• Border

Border adalah garis pembatas antar objek pada css. 

Properti border pada CSS membuat garis tepi pada objek HTML kita. Secara gelobal terdapat 3 properti untuk border:

1. border-color - spesifik untuk warna border.
2. border-style - jenis border, seperti : solid, dashed line, double line
3. border-width - spesifik untuk ketebalan garis border.

Sekarang kita akan melihat lebih detail dari beberapa properti diatas.

Properti border-color

properti ini memperbolehkan kita untuk merubah warna dari border. Anda bisa merubah warna secara keseluruhan ataupun hanya sebagian (garis atas, kanan, bawah atau kiri). untuk merubah warna sebagian sebagai berikut:

• border-bottom-color digunakan untuk merubah warna border bagian bawah.
• border-top-color digunakan untuk merubah warna border bagian atas.
• border-left-color digunakan untuk merubah warna border bagian kiri.
• border-right-color digunakan untuk merubah warna border bagian kanan.

Properti border-style

Pada properti border-style ini, Anda diperbolehkan memilih style / jenis garis yang hendak Anda pakai. Berikut adalah beberapa style yang bisa Anda pilih :

• none : Tidak ada border. (atau sama dengan border-width:0;).
• solid : Border single (tunggal) dan padat seperti garis menggunakan bolpoint.
• dotted : Border dalam bentuk titik-titik.
• dashed : Border dalam bentuk garis-garis pendek.
• double : Border dalam bentuk 2 garis solid/padat.
• groove : Border tampak seolah-oleh berukir.
• ridge : Border tampak seperti lawan dari groove.
• inset : Border membuat kotak seperti tertanam di halaman.
• outset : Border tampak menonjol keluar.
• hidden : Sama seperti none.

Anda juga bisa memberikan style border secara individu, misalkan untuk atas, kanan, bawah dan kiri hendak memiliki style yang berbeda menggunakan properti berikut:

• border-bottom-style merubah style untuk border sisi bawah.
• border-top-style merubah style untuk border sisi atas.
• border-left-style merubah style untuk border sisi kiri.
• border-right-style merubah style untuk border sisi  kanan.

Properti border-width

Dengan properti border-with kita bisa mengatur tingkat ketebalan border yang akan kita pakai. Nilai ketebalan border yang bisa kita gunakan px, pt atau cm. Kita juga bisa menggunakan thin, medium atau thick.

Sama seperti properti lain, border-width juga dapat dilakukan untuk sisi atas, kanan, bawah dan kiri.

• border-bottom-width merubah ukuran border sisi bawah.
• border-top-width merubah ukuran border sisi atas.
• border-left-width merubah ukuran border sisi kiri.
• border-right-width merubah ukuran border sisi kanan.

.