Penjelasan Tentang Kode Skrip Yang Ada Pada CSS

HALOOOO Semuaa kali ini saya bakal ngasih penjelasan tentang kode skrip yang ada pada CSS, Jadi pastikan baca hingga akhir oke!!!.


Berikut kode yang berada pada CSS yang akan saya jelaskan. 

1. Margin

    Margin berguna buat apa sih? digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Margin juga memiliki 4 macam penjabaran yang digunakan secara terpisah sendiri-sendiri yaitu: 
margin-top, margin-right, margin-bottom dan margin-left.

Jadi, margin adalah shorthand (kependekan) untuk mendeklarasikan keempat penjabaran tersebut secara serentak (sekaligus) dalam satu baris.

CSS margin memiliki values (nilai/isian) satu, dua, tiga dan empat deret nilai menggunakan unit sebagai berikut:

length (panjang)

Menentukan batas tepi (margin) dalam satuan: px, mm, cm, in, pt, pc (Absolute length units); em, ex, ch, rem (Relative length units). Contoh: margin: 1rem;

Percentage (persentase)

Menentukan batas tepi (margin) dengan hitungan persentase berdasarkan lebar containing block element (blok element di dalamnya). Contoh: margin: 30%;

Auto (Otomatis)

Diperhitungkan secara otomatis oleh browser. Contoh: margin: 0 auto;

inherit

mengikuti element sebelumnya (parent). Contoh: margin: inherit;

Negative value (nilai negatif) juga diperbolehkan. Contoh: margin: -20px;


Contoh CSS margin

margin:     atas kanan bawah kiri

p {
  margin:  5px 10px 15px 20px;
}



2. Padding

    adalah sebutan untuk spasi atau ruang di antara konten dan batas pada Cascading Style Sheet (CSS) dalam website.

CSS ini berfungsi untuk mengatur tampilan elemen yang tertulis dan juga memisahkan konten dari tampilan visual dalam sebuah website.

Tiap elemen HTML memiliki empat sisi padding, yaitu padding atas, padding kanan, padding bawah, dan padding kiri.

Sintaks Padding

berikut sintaks padding yang perlu diketahui sebagai dasar pembuatan padding:
  • padding-top : length | percent ;
  • padding-right : length | percent ;
  • padding-bottom : length | percent ;
  • padding-left : length | percent ;
Adapun keterangan dari sintaks padding tersebut adalah:
  • Value default untuk masing-masing properti adalah “0”
  • Value yang bisa digunakan untuk mengatur nilai margin bisa berupa nilai panjang dan persen.
  • Value berupa panjang, bisa menggunakan satuan px, em, atau cm. Namun, yang umum digunakan adalah menggunakan satuan px (pixel).
  • Value berupa persen, akan menghasilkan nilai margin yang dihitung dari persentasi area yang berada di sekelilingnya.

Meringkas Penggunaan Property Padding


Berikut contoh sintaksnya:
padding:< padding-top> < padding-right> <padding-bottom> <padding-left>;
Berikut ini adalah keterangan dari sintaks di atas:
  • Properti padding digunakan untuk menentukan nilai padding dari keempat sisi elemen HTML.
  • Value dari properti ini bisa terdiri dari satu sampai empat nilai, yang penggunaannya sama dengan Property Margin dan Property Border.

Contoh Pembuatan Padding


.artikel {
background : #CCF ;
margin : 0 20px ;
border-style : dashed dotted ;
ADVERTISEMENT

border-width : 2 px;
border-color : #FFF;
padding : 5px 15px;



3. Float 

    Apasih float dalam CSS? Property float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya.

Tujuan utama float adalah untuk mengatur text agar melipat di sekitar elemen image (gambar). Akan tetapi, float juga bisa digunakan untuk layout dan style lainnya.

Values
Nilai CSS float

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.


Contoh kode float pada CSS

article {
  float:left
}
aside {
  float:right
}
footer {
  clear: both;
  text-align: center
}


4. Absoulte
    
    Apasih gunanya absoulte? digunakan untuk membuat suatu elemen bisa dipindahkan dan membuat elemen mengambang ke atas dibanding element lain.

Contoh code absoulte

.red {
    background-color: red;
    position: absolute;
    top: 10px;
    }
 

5. Border

    Border dalam CSS berfungsi untuk membuat garis tepi sebuah objek HTML.

 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 mengubah warna dari border. 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.


6. Display 
    

Properti display biasanya digunakan untuk menentukan bagaimana sebuah elemen akan ditampilkan.

Nilai tampilan default untuk sebagian besar elemen adalah blok atau baris.

 

Elemen Block-level

Selalu dimulai dengan baris baru dan akan menempati lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

 Contoh elemen block-level pada HTML :
  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Elemen Inline

Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar yang diperlukan berkebalikan dengan elemen block-level.

Contoh elemen inline pada HTML :

  • <span>
  • <a>
  • <img>

7. Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah “box model” digunakan untuk desain dan tata letak website kita.

Box model CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Box model ini terdiri dari: margin, border, padding, dan konten .

Penjelasan bagian konten, sebagai berikut:

Content – Konten kotak, tempat teks dan gambar muncul
Padding – Menghapus area di sekitar konten. Paddingnya transparan
Border – Batas yang mengelilingi padding dan konten
Margin – Membersihkan area di luar perbatasan. Marginnya transparan

Model kotak memungkinkan kita untuk menambahkan batas di sekitar elemen dan untuk menentukan ruang antar elemen.

Contoh 

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

<h2> Mendemonstrasikan Box Model </h2>

<p> Model kotak CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Ini terdiri dari: border, padding, margin, dan konten sebenarnya. </p>

<div> Teks ini adalah isi kotak. kita  tambahkan padding 50px, margin 20px dan border hijau 15px. lorem ipsum....</div>

</body>
</html>



Source 

https://www.apacara.com

https://kumparan.com

https://zackstam.medium.com/

https://tipa.co.id/

https://dosenit.com/

Komentar

Posting Komentar

Postingan populer dari blog ini

Operator Penugasan, Perbandingan, Logika, dan Ternary pada PHP

Gambar
 Assalamualaikum, Halo semuanyaa! Apakabar?? Sehat kan? Semoga semua sehat-sehat aja yaa!     Oke jadi kali ini saya ingin memberikan sebuah penjelasan tentang operator seperti operator penugasan, perbandingan, logika, dan ternary dan juga pasti dengan contohnya. Kurang dong kalo ngasih teori tanpa ada praktek! Jadi simak terus yaaa! Apasih Operator itu?? Operator adalah suatu simbol yang memberikan sebuah compiler atau interpreter untuk bisa melakukan operasi tertentu seperti operasi matematika, rasional atau logis agar bisa menghasilkan hasil akhir seperti yang diinginkan.  Operator juga bisa dibilang sebagai dasar dari sebuah bahasa pemrograman jenis apapun. 1. Operator Penugasan Operator penugasan  “=”  ini berfungsi untuk memberikan nilai pada suatu variabel. Macam-macam operator penugasan Contoh : Pengisian dan Penambahan Pengisian dan Pengurangan Pengisian dan Perkalian Pengisian dan Pemangkatan Pengisian dan Pembagian Pengisian dan Sisa bagi 2. Oper...
Baca selengkapnya

Tugas PART 2

Gambar
  VARIABEL adalah suatu wadah/tempat untuk menyimpan data sementara. Data variabel sewaktu waktu bisa dipanggil, ditampilkan, diubah atau diganti nilainya. Jadi selama browser belum di tutup, maka data variabel masih tersimpan di memory komputer. Data yang di simpan di variabel tidak permanen. Cara  menulis Variable : Variabel diawali dengan tanda dolar $ Nama variabel tidak boleh ada spasi Nama variabel lebih dari satu kata dipisah menggunakan underscore/garis bawah _ Karakter pertama setelah $ tidak boleh menggunakan angka hanya boleh dengan huruf dan underscore/garis bawah _ Didalam variabel tidak boleh mengandung karakter-karakter khusus seperti : % @  #  ;  ! Nama Variabel bersifat case sensitive karena PHP membedakan huruf besar dan kecil. Disini saya akan memberikan contoh cara menggunakan variable pada PHP, berikut conoth codingnya. <?php $nama = "Salman Ramadhan A" ; $umur = "OTW 17" ; $jeniskelamin = "Pria" ; $sekolah = "SMK N 1 JKT...
Baca selengkapnya

FORMULIR SEKOLAH MAS SALMAN

Gambar
  < html > < head >< tittle >FORMAT FORMULIR SEKOLAH SALMAN</ tittle ></ head > < body >     < form method = "Post" >         < table border = 0 width = "75%" > < tr >             < td width = "20%" >NISN</ td >             < td >< Input Type = "Text" Name = "NISN" MaxLength = "10" Size = "11" ></ td > < tr > </ tr >                 < td width = "20%" > Nama Peserta Didik</ td >                 < td >< Input Type = "Text" Name = "Name Peserta Didik" MaxLength = "25" Size = "25" > </ td ></ tr > < tr >                     < td width = "20%" >Alamat</ td >               ...
Baca selengkapnya