Penjelas code script dari properti css

-

Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang kode scipt dari

properti css


1.  Margin

Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar element. anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah kiri element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika anda hanya menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element. berikut ini adalah contoh penggunaan margin pada CSS

.box{
background: blue;
height: 200px;
width: 300px;
margin: 20px;
}
 
.box-dua{
background: red;
height: 100px;
width: 200px;
margin-left: 70px;
}


Hasilnya: 






2. padding

pengertian 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. – menetapkan bahwa padding harus diwarisi dari elemen induknya

Padding  adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. sama seperti yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan ‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’ adalah sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian dalam. berikut ini adalah 

Contohnya:
h1{
text-align: center;
}
 
.box{
background: blue;
height: 200px;
width: 300px;
padding: 20px;
}
 
.box-dua{
background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}

Hasilnya:





3. Float 
Float merupakan sebuah properti yang banyak digunakan di dalam pembuatan sebuah website,  ada 4 value yang biasa kita gunakan di dalam properti ini, yaitu Left, Right, Initial dan Inherit..
Jika diartikan Float memiliki arti "mengapung", Maksud mengapung disini berarti elemen yang memilik float tersebut akan dipindahkan ke halaman kiri (left) ataupun kanan (right), seperti yang disebutkan di penjelasan diatas..
 float: left; digunakan untuk mengatur bahwa elemen harus mengapung kesebelah kiri dari posisi block / elemen block yang menampung nya.
 float: right; digunakan untuk mengatur bahwa elemen harus mengapung kesebelah kanan dari posisi block / elemen block yang menampung nya.
 float: none; digunakan bahwa elemen tidak boleh mengapung (float).
 float: inherit;  value / nilai dari float mengikuti elemen induk yang menampung sebelumnya.

Contohnya:

h1{
text-align: center;
}
 
.gambar{
width: 300px;
float: left;
margin-right: 10px;

} 


4. Absolute 

Value absolute digunakan untuk membuat suatu elemen bisa dipindahkan dan membuat elemen mengambang ke atas dibanding element lain. Bedanya dengan property relative, pada property absolute layer bawahnya akan bergeser seolah olah berada di bawah layer dengan property relative. Untuk melihat efeknya mari kita ubah css dari class red menjadi seperti berikut

Contohnya:

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

Hasilnya:


5. Border

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

Contohnya:

#garis_1{
border-style:solid;
border-width: 5px;
}
#garis_2{
border-style: dotted;
border-width: 10px;
}
#garis_3{
border-style: dashed;
border-width: 3px;
}
#garis_4{
border-style: double;
border-width: 9px;
}
#garis_5{
border-style: groove;
border-width: 25px;
}
#garis_6{
border-style: inset;
border-width: 5px;
}
#garis_7{
border-style: outset;
border-width: 5px;
}
#garis_8{
border-style: ridge;
border-width: 50px;

}


Hasilnya:


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

a). 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>

dan masih banyak lagi.

KEKURANGAN MENGGUNAKAN DISPLAY INLINE :

  • Tidak dapat diatur tinggi dan lebar elemennya ( Hanya mengikuti isi konten yang ada didalamnya )
  • Margin dan Padding hanya dapat memengaruhi gerak elemen secara horizontal

b). 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>

PERILAKU BLOCK :

  • Secara default, ukuran lebar dari Block akan memenuhi page browser atau parent-nya.
  • Kebalikan dari Inline, elemen block ini akan otomatis membuat baris baru untuk elemen selanjutnya.
  • Kita dapat mengatur tinggi dan lebarnya.
c). Inline-block adalah display suatu elemen html yang tetap bergerak Horizontal, dan tidak menambahkan baris baru untuk elemen selanjutnya, tetapi ukuran Width dan Height dari masing-masing elemen dapat kita atur.

TIDAK ADA ELEMEN YANG SECARA DEFAULT MEMILIKI DISPLAY INLINE-BLOCK.

PERILAKU INLINE-BLOCK :

  • Secara default, ukuran lebar dari Inline-Block akan mengikuti isi konten dalam elemen.
  • Sama dengan Inline, elemen ini tidak akan membuat baris baru untuk elemen selanjutnya.
  • Kita dapat mengatur tinggi dan lebarnya.

7. Box Model

CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.

Sebagaimana layaknya ‘kotak’, masing-masing element HTML ini terdiri dari 4 lapisan, yakni: konten (isi), padding, border dan margin. Keempat ‘lapisan’ inilah yang membangun CSS Box Model.


2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>


Hasilnya:


Segitu dulu penjelasan Saya tentang code script CSS 

Semoga bermanfaat


Sumber: https://www.petanikode.com

Komentar

Posting Komentar

Postingan populer dari blog ini

Soal aplikasi server dan programan server side scripting

-
 A.  1. Halaman web dapat dikategorikan menjadi web statis dan dinamis  2. Fungsi utama dari web server untuk menyimpan, mengolah, dan menyampaikan suatu informasi berupa halaman web kepada client 3. Localhost adalah sebutan bagi server lokal yang ada di komputer user  4.    www.apachefriends.org  adalah situs resmi dari XAMPP 5. Appserv memiliki fungsi untuk menginstal beberapa program dengan waktu singkat, yaitu Apache, PHP, dan MySQL 6. Windows 7 bisa langsung menggunakan IIS dengan menginstal net framework  7. Personal home page nama PHP pertama kali dibuat pada tahun 1995 8. Coldfusion pertama kali dikembangkan Allaire Corporation 9.  Personal web bukan termasuk web container 10. PHP adalah salah satu program aplikasi server side programming yang banyak digunakan  11. Panjang sangat terbatas tidak termasuk aturan penulisan variabel pada PHP  12. Example operator tidak termasuk jenis-jenis operator  13. Komentar merupakan b...
Baca selengkapnya

PHP part 4 Operator

-
Gambar
 Pengertian Operator Pengertian operator pada php  adalah simbol yang digunakan untuk membuat instruksi atau memanipulasi data terhadap suatu nilai asal sehingga akan memberikan nilai hasil atas prose operasi.  Operand  adalah nilai asal yang digunakan didalam proses operasi, dalam bahasa pemrograman, operand php dapat didefinisikan ke dalam variabel atau konstanta. Dibawah ini adalah tabel daftar  urutan prioritas operator  pada php, dimana operator paling atas lebih diprioritaskan dari pada operator dibawahnya. Kemudian operator yang berada pada baris yang sama memiliki urutan prioritas yang sama. Jenis Operator Berdasarkan Jumlah Operand Berdasarkan jumlah operand, operator php dapat dibedakan menjadi 3 jenis yaitu operator unary, operator binary dan operator ternary. 1). Operator unary  adalah operator yang hanya memiliki 1 operand, misalnya simbol tanda minus (-). Tanda minus digunakan untuk membuat sebuah angka menjadi negatif, contohnya: -7, ata...
Baca selengkapnya

Membuat web E - Ticketing Peswat

-
Gambar
 1. Membuat database Tabel Flight Tabel Orders Tabel User Lanjut ke codinganya Connect <?php error_reporting ( E_ALL ); ini_set ( "display_errors" , 1 ); class Libcore {     public $pdo = null ;     /**      * Melakukan koneksi ke database      */     function connect ()     {         // Database credentials         $host = 'localhost' ; // your database host         $username = 'root' ; // your database username         $password = '' ; // your database password         $database = 'tugas_udintiket' ; // your database name         try {             $this -> pdo = new PDO ( "mysql:host= $host ;dbname= $database " , $username , $password );         } catch ( PDOException $e ) {             die...
Baca selengkapnya