Properti pada css digunakan untuk memberi nilai pada suatu code misalkan memberi warna, background color . penulisan properti bisa dengan diberi titik dua (:) setelah penulisan properti dan diakhiri dengan titik koma (;)

seperti margin: 40px ;

Berikut merupakan contoh-contoh properti yang bisa digunakan dalam CSS:

1. Margin 

Margin adalah sisi luar dari sebuah elemen. digunakan untuk mengatur jarak antar elemen.

memiliki format margin: jarak_ukuran

Untuk satuan ukurannya biasanya dengan format px, inc, cm, rem, dan lain-lain.

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





2. Padding 

untuk mengatur jarak didalam tag atau didalam elemennya.

padding-top
padding-right
padding-bottom
padding-left
Kita dapat memberikan nilai lebar padding dengan unit ; px, pt, em, rem %, inherit, dll. Tapi kita tidak dapat menggunakan angka negatif dalam menentukan ukuran padding


<h3 style="background-color: yellowgreen; padding: 50px;">Padding 50px</h3>


3.  Float

Float digunakan untuk mengatur posisi elemen secara horizontal, Value yang bisa anda gunakan untuk property float ini ada left,right,inherit, dan none. 

misalkan kita ingin mengatur elemen supaya kekiri kita bisa menggunakan float ini dengan format float: left;

Keterangan :

  1. Left : digunakan untuk mengatur posisi elemen berada disebelah kiri
  2. Right : digunakan untuk mengatur posisi elemen berada disebelah kanan
  3. inherit : agar posisi elemen mengikuti float yang ada di bagian parentnya
  4. none : digunakan untuk mengatur agar elemen tidak boleh di float
  <h3 style="float:left;">ini ke kiri guys</h3>
  <h3 style="float:right;">ini ke kanan guys</h3>
  <h3 style="float:inherit;">ini inherit guys</h3>
  <h3 style="float:none;">ini none guys</h3>


Position merupakan property css yang digunakan untuk menentukan sifat posisi suatu elemen di suatu dokument. Sifat di sini dalam artian elemen bisa berubah, tetap , dan lain lain 

4. Position absolute

Value absolute digunakan untuk membuat suatu elemen bisa dipindahkan dan membuat elemen mengambang ke atas dibanding element lain.

  <h3 style="background-color:royalblue ; position: relative;">ini relative guys</h3>
  <h3 style="background-color:gold ; position: absolute;">ini absolute guys</h3>
  <h3 style="background-color:rebeccapurple ; position: static;">ini static guys</h3>


5. Border
adalah garis pembatas antar objek pada css.
border style digunakan untuk membuat border yang lebih variasi seperti garis putus-putus atau lainnya.

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.


6. Border Color

untuk menambahkan warna pada border



7. Border Width

untuk mengatur ketebalan border bisa dengan format fx, pt dan cm bisa juga dengan thick, medium, thin

border-width: ukuran;

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.



8. Border Display

Display adalah salah satu property dalam CSS yang berguna untuk mengatur tampilnya suatu elemen.



<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow;
}
</style>
</head>
<body>

<h1>The display</h1>

<h2>display: inline</h2>
<span class="a">Aliquam</span> <span class="a">venenatis</span>

<h2>display: inline-block</h2>
 <span class="b">Aliquam</span> <span class="b">venenatis</span>

<h2>display: block</h2>
<span class="c">Aliquam</span> <span class="c">venenatis</span>
</body>
</html>



9. Box Model

jadi box dalam CSS merupakan gabungan dari content, padding, margin, border



Penjelasan dari bagian box tersebut :
Content : Adalah konten dari elemen. Biasanya berupa teks atau gambar
Padding : berguna untuk mengatur ruang (space) di sekitar konten
Border : batasan yang mengelilingi konten dan padding
Margin : berguna untuk mengatur ruang (space) di luar elemen

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightblue;
  width: 300px;
  border: 15px solid red;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Contoh Box Model</h2>


<div>Jalan-jalan naik kereta

Naik ke atas pakai tangga

Mari kita gapai cita-cita

Bahagia dunia, masuk ke surga.</div>

</body>
</html>










Neti Amalia

Thank you for reading

Posting Komentar

0 Komentar

Langsung ke konten utama