PENJELASAN MENGENAI KODE SCRIPT DARI PROPERTI CSS

 Halo semuanyaa!! Disini aku akan membagikan pengertian dari 7 properti CSS. Nah, kita langsung saja ke properti pertama di CSS.

1. Margin

    Margin merupakan properti css untuk memberikan jarak pada setiap elemen agar tidak berdempetan atau terlihat sempit. 

Margin dibagi menjadi 4 bagian, yaitu :

- margin top

- margin right

- margin bottom 

- margin left.

Nah, bagian-bagian di atas ini sudah berurutan. Jadi, di dalam coding nya nanti akan berurutann seperti ini.

Sebagai contoh, property margin: 10px 15px 5px 20px sama artinya dengan:

margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 20px;

Jadi, contoh mengurutkannya seperti itu. Jika yang ingin diberi jarak adalah yang sebelah kiri, masukkan format margin-left: 15px.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 50px;
     border: 2px solid red;
     background-color: green;
     margin: 20px 100px;
   }
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

spt itu salah satu contoh penggunaan margin.

2. Padding
        Padding adalah sebutan untuk spasi atau ruang diantara konten dan border. Property padding bisa diisi dengan satuan panjang seperti pixel, persen, em, dll. Sebagai contoh, untuk membuat padding sebesar 10 pixel, menggunakan kode sebagai berikut :

<div style="padding: 10px"></div>

Untuk contoh penggunaannya dalam HTML dan CSS spt :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.tanpa-padding {
   border: 2px solid red;
}
.dengan-padding {
   border: 2px solid red;
   padding: 10px;
}
</style>
</head>
<body>
<p class="tanpa-padding">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, cons.
</p>
<p class="dengan-padding">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.
</p>
</body>
</html>

Yang menghasilkan output spt :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi tortor, imperdiet sed hendrerit non, cons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat felis, sit amet ullamcorper elit vulputate in.

CSS juga menyediakan property terpisah agar kita bisa mengatur padding pada setiap sisi, yakni dengan property padding-toppadding-rightpadding-bottom, dan padding-left. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
p {
   border: 2px solid red;
   padding-top: 20px;
   padding-right: 5px;
   padding-bottom: 30px;
   padding-left: 0px;
}
</style>
</head>
<body>
<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.
</p>
</body>
</html>

Berikut hasilnya :


Jika kita menulis padding: 10px 5px, maka ini sama dengan:

1
2
3
4
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
Jika property padding ditulis dengan 3 nilai, seperti padding: 10px 5px 3px, ini sama artinya dengan:
1
2
3
4
padding-top: 10px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
3. Float
    Float berfungsi untuk mengatur letak element secara horizontal. 4 value yang bisa digunakan untuk property float yaitu left, right, inherit, dan none.
contoh :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Float dengan CSS di <br/> www.malasngoding.com</h1>
 
<div class="kotak">
<img class="gambar" src="malasngoding.png">
<p>
Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css. Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css.belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.
</p>
</div>
</body>
</html>
style.css
h1{
text-align: center;
}
 
.gambar{
width: 300px;
float: left;
margin-right: 10px;
}

Hasilnya jd spt ini :


4. Absolute
    Nilai absolute memungkinkan untuk menghapus elemen dari wadah div dengan deklarasi top, bottom, left, right.
contoh :
<div style=”width:300px; height: 100px; border: yellow solid 1px”></div>
<div style=”width:300px; height: 300px; border: 1px solid black;”>
    <div style=”width:300px; padding: 10px; border: 1px solid red; position: absolute; top: 0; right: 50px; text-align: center;”>        position: absolute; top: 0; right: 50px;
    <div>
</div>

5. Border
a. Border style CSS (Corak border)
    Ada banyak tipe border pada CSS, antara lain :
- dotted : untuk membuat border titik
- dashed : untuk membuat border garis
- solid : untuk membuat border garis tebal
- double : untuk membuat border double
- groove : untuk membuat border grooved 3D
- ridge : untuk membuat border 3D ridge
- inset : untuk membuat 3D border masuk kedalam
- outset : untuk membuat 3D border
- none : untuk membuat tidak ada border
- hidden : untuk membuat border tersembunyi
    untuk properti border-style ini mempunyai 4 nilai (top border, right border, bottom border, dan left border)
 contoh kode :
<!DOCTYPE html>
<html>
<head>
<style>
p.titik {border-style:dotted;}
p.garis {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.campur {border-style: dashed dotted solid double;}
</style>
</head>
<body>
<h1>Contoh Properti border-style</h1>
<p class="titik">Border titik</p>
<p class="garis">Border garis-garis</p>
<p class="solid">Border solid</p>
<p class="double">Border double</p>
<p class="groove">Border groove</p>
<p class="ridge">Border ridge</p>
<p class="inset">Border inset</p>
<p class="outset">Border outset</p>
<p class="none">Tidak ada border </p>
<p class="hidden">Border tersembunyi</p>
<p class="campur">Border campuran</p>
</body>
</html>

output :

b. Border Color
<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
border-style: solid;
border-color: green;
}
p.dua {
border-style: solid;
border-color: blue;
}
p.tiga {
border-style: solid;
border-color: green red yellow orange;
/*atas->hijau, kanan->merah, bawah->kuning, kiri->orange */
}
</style>
</head>
<body>
<h1>Contoh Properti border-color CSS</h1>
<p class="satu">Warna border hijau</p>
<p class="dua">Warna border biru</p>
<p class="tiga">Warna border asik</p>
</body>
</html>



6. Display
a. display inline
    Inline adalah display suatu elemen html yang bergerak memanjang secara Horizontal (Menyamping).
Contoh elemen yang memiliki display Inline secara default :
  • <strong></strong>
  • <a></a>
  • <em></em>
  • <span></span>
  • <button></button>
  • <input>
  • <label></label>

b. display block

Block adalah display suatu elemen html yang tetap bergerak Horizontal, tetapi otomatis menambahkan baris baru untuk elemen selanjutnya.
Contoh elemen yang memiliki display Block secara default :

  • <li></li>
  • <ul></ul>
  • <p></p>
  • <h1></h1> sampai <h6></h6>
  • <form></form>
  • <hr>
  • <div></div>
7. Box Model 
    terdapat 5 property CSS yang menyusun box model, yakni widthheightborderpadding, dan margin.
contoh :
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar CSS</title>
  <style>
    div, p {
      width: 300px;
      height: 50px;
      padding: 15px;
      border: 5px solid red;
      margin: 20px;
       
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div>Box 1</div>
  <p>Box 2</p>
</body>
</html>

output :











Komentar