Belajar CSS 7

 BELAJAR LENGKAP CSS







Sintaks Padding

Berdasarkan buku CSS Tutorial oleh Muhamad Chotim, 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

Supaya penulisan nilai Padding sebuah elemen HTML lebih ringkas, bisa digunakan properti 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

Berikut adalah contoh pembuatan padding yang dikutip dari buku CSS Tutorial oleh Muhamad Chotim.
Editlah bagian CSS untuk Selector “.artikel” pada contoh sebelumnya sehingga menjadi seperti berikut ini:
.artikel {
background : #CCF ;
margin : 0 20px ;
border-style : dashed dotted ;
border-width : 2 px;
border-color : #FFF;
padding : 5px 15px;
Hasilnya akan terlihat seperti pada gambar berikut ini:
Ilustrasi Membuat Padding. Sumber: Buku CSS Tutorial oleh Muhamad Chotim
zoom-in-whitePerbesar
Ilustrasi Membuat Padding. Sumber: Buku CSS Tutorial oleh Muhamad Chotim
Berikut penjelasan dari gambar di atas:
Pada gambar d terlihat bahwa di antara Content (teks) dan Border terdapat jarak (Padding). Padding bagian atas dan bawah sebesar 5px, dan Padding bagian kanan dan kiri sebesar 15px.
Dalam mendesain sebuah halaman web, penggunaan nilai Padding sangat berpengaruh dalam hal kenyamanan pengguna saat membaca artikel yang kita sajikan.
Sebuah artikel yang diberikan jarak dengan garis tepi akan lebih nyaman dibaca daripada artikel yang posisinya menempel dengan garis tepinya.
Pertimbangkan besaran nilai Padding dengan konsep desain web yang diterapkan, sehingga akan menghasilkan sebuah tampilan halaman web yang elegan dan nyaman untuk dibaca.






Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya