Download Source Code Aplikasi Restoran CaffeMIX

CaffeMIX adalah aplikasi restoran berbasis WEB yang menggunakan Framework PHP
CodeIgniter sebagai proses sistemnya dan Framework Bootstrap sebagai User Interfacenya
Adapun fitur dan plugin yang digunakan CaffeMIX sebagai berikut :

Feature CaffeMIX :

1. Multi Level users
2. Login With API Facebook
3. Create QR CODE
4. Scan QR CODE
5. Automatic Token input per hours
6. Auto Complete input form
7. Live Notification
8. Date and Time Indonesian language
9. Drag to edit position table
10. Live CRUD ( no reload page )
11. Search Active with Pagination
12. Full Responsive Page
13. Grafik

Tools and Plugin :

1. PHP Framework Codeigniter 3
2. CSS Framework Bootstraps 4
3. Chart JS
4. DataTables latest version
5. Fonts Default Popper
6. Icon Fonts Awesome latest version
7. Webcodecamjs
8. PHP 7.3
9. MySql 5.7
10. HTML 5
11. CSS 3
12. JavaScript ( jQuery 3.2.1 and jQueryUI )
13. Facebook SDK 4

Berikut beberapa screenshoot dari aplikasi CaffeMIX:

Aplikasi ini saya buat ketika mengikuti Uji Kompotensi, Untuk cara penggunaannya sudah ada dibuku panduan didalam file CaffeMIX, aplikasi ini masih dalam tahap pengembangan jika ada kendala jangan segan untuk komen dibawah.

DOWNLOAD

Download Sublime Text 3 versi terbaru 2019

Sedikit penjelasan : Sublime Text adalah aplikasi text editor yang mendukung berbagai bahasa pemrograman dan markup salah satunya yaitu PHP. Selain itu Sublime Text juga memiliki fungsi yang dapat ditabahkan oleh pengguna dengan plugin.

Versi	Link Download	Size
3.2.1 (Build 3207)	OS X (10.7 or later is required)	15,2 Mb
3.2.1 (Build 3207)	Windows 32 bit	9,83 Mb
3.2.1 (Build 3207)	Windows 64 bit	10,40 Mb
3.2.1 (Build 3207)	Linux 32 bit	13,16 Mb
3.2.1 (Build 3207)	Linux 64 bit	13,03 Mb

Tutorial Dasar Pemrograman PHP Dengan Penjelasanya

PHP adalah bahasa pemrograman yang di rancang untuk pengembangan web. Awalnya PHP merupakan singkatan dari Personal Home Page, tapi sekarang PHP merupakan singkatan dari akronim “rekursif” yaitu PHP: Hypertext Preprocessor. Saat ini PHP telah menginjak versi 7 dan tetap dapat di gunakan secara gratis, selain itu PHP mendukung pemrograman berorientasi obyek (PBO) atau object oriented programming (OOP) sehingga saat ini banyak bermunculan Framework PHP.

Untuk Anda yang belum mengenal jauh bahasa pemrograman PHP dan tertarik untuk mempelajarinya, ada baiknya Anda mengenal terlebih dahulu kode kode PHP dan fungsinya untuk menambah pengetahuan mengenai dasar-dasar bahasa pemrograman PHP, berikut ulasannya:

1. IF – ELSEIF – ELSE

Seperti namanya, kode PHP ini berfungsi sebagai penyeleksi kondisi “jika kondisi terpenuhi” (IF), “jika kondisi lain yang terpenuhi (ELSEIF, dari kata ELSE IF yang digabung), dan “jika semua kondisi tidak terpenuhi” (ELSE). Sebagai contoh, kode di bawah ini berisi dua variabel yang berisi nilai ber-type data integer (angka) dan nantinya akan di bandingkan menggunakan operator pembanding.

<?php
if ($a > $b) {
    echo "$a lebih besar dari $b";
} elseif ($a == $b) {
    echo "$a sama dengan $b";
} else {
    echo "$a lebih kecil dari $b";
}
?>

2. SWITCH – CASE

Fungsi SWITCH – CASE mirip dengan fungsi IF – ELSEIF – ELSE yaitu untuk menyeleksi kondisi yang bercabang. Hanya saja SWITCH – CASE lebih cocok di gunakan untuk menyeleksi nilai satu variabel yang memiliki banyak kemungkinan, sebagai contoh kode di bawah ini berisi satu variabel bernama “profesi” dengan  tiga kemungkinan nilai variabel yaitu “Polisi”, “Guru”, dan “Pilot”.

<?php
switch ($profesi) {
    case "polisi":
        echo "Profesi Saya adalah POLISI";
        break;
    case "guru":
        echo "Profesi Saya adalah GURU"; 
        break;
    case "pilot":
        echo "Profesi Saya adalah PILOT"; 
        break;
}
?>

Struktur Perulangan

3. FOR

Kode FOR pada PHP di gunakan untuk melakukan perulangan atau proses secara berulang hingga kondisi akhir yang di persyaratkan tercapai, kode ini umumnya di gunakan untuk mencetak record dari database sehingga semua record di tampilkan ( satu per satu ) hingga kondisi akhir yang di persyaratkan tercapai yaitu record yang terakhir, misalnya dalam suatu table pada database terdapat 100 record, maka untuk menampilkan semua record di perlukan proses perulangan hingga 100 kali.

Struktur utama fungsi FOR adalahs ebagai berikut:

for (ekspresi1; ekspresi2; ekspresi3){
    pernyataan;
}

• Ekspresi pertama (ekspresi1) di evaluasi atau di jalankan tanpa syarat pada awal perulangan, “ekspresi1” biasanya berupa variabel yang memiliki nilai yang di gunakan sebagai nilai awal suatu perulangan.
• Ekspresi kedua (ekspresi2) di evaluasi pada awal setiap perulangan, jika hasil evaluasi bernilai TRUE ( kondisi terpenuhi ) maka perulangan di lanjutkan, jika hasil evaluasi bernilai FALSE ( kondisi tidak terpenuhi ) maka perulangan di hentikan.
• Ekspresi ketiga (ekspresi3) di evaluasi pada akhir setiap perulangan, “ekspresi3” berisi perintah yang harus di lakukan apabila hasil evaluasi “ekspresi2” bernilai TRUE dan perulangan di lanjutkan.

Silahkan perhatikan contoh sederhana perulangan dengan FOR di bawah ini, kode di bawah ini akan menampilkan angka 1 sampai 10:

<?php
for ($i = 1; $i <= 10; $i++) {
    echo $i;
}
?>

• $i = 1 merupakan ekspresi pertama yang berisi nilai awal suatu perulangan, artinya perulangan di mulai dari angka “1”.
• $i <= 10 merupakan ekspresi kedua yang akan di evaluasi pada awal setiap perulangan, jika variabel $1 memiliki nilai lebih dari sama dengan ( < = ) 10 maka perulangan akan dilanjutkan, jika tidak maka perulangan akan di hentikan. Artinya perulangan akan terus di lakukan selama nilai dari variabel $i tidak lebih dari 10.
• $i++ merupakan ekspresi ketiga yang berisi perintah untuk mengembalikan nilai $i kemudian di tambah 1 apabila ekspresi kedua bernilai TRUE, itu berarti apabila ekspresi kedua bernilai 8 ( TRUE, karena 8 <=10 ) maka variabel $i bernilai 8+1. tanda “++” di depan variabel $i merupakan operator increment (post-increment).

4. FOREACH

Perulangan menggunakan FOREACH memudahkan perulangan sebuah array, biasanya di gunakan untuk mengambil semua nilai yang ada pada suatu array dan menyimpannya ke sebuah variabel secara berulang, struktur dasar FOREACH adalah sebagai berikut:

<?php
foreach (array_expression sebagai $value)
     pernyataan
?>

atau

<?php
foreach (array_expression sebagai $key => $value)
     pernyataan
?>

Perhatikan kode di bawah ini, sebuah array bernama “$anggota” memiliki tiga nilai, dan FOREACH di gunakan untuk menyimpan setiap nilai yang ada pada “$anggota” ke “$nama_anggota” secara berulang, artinya variabel “$nama_anggota” akan di isi dengan satu nilai dari array “$anggota” secara berulang ( ingat, variabel hanya memiliki satu nilai, sedangkan array bisa memiliki lebih dari dua nilai ).

<?php
$anggota = array("Ahmad", "Budi", "Cahya");

foreach ($anggota as $nama_anggota) {
    echo "Nama Anggota: $nama_anggota<br />\n";
}
?>

5. WHILE

Perulangan dengan WHILE adalah perulangan yang paling sederhana di PHP. Bentuk dasar dari perulangan menggunakan WHILE adalah sebagai berikut :

while (ekspresi) {
   pernyataan
}

Perulangan WHILE hanya membutuhkan satu ekspresi yang akan di periksa setiap awal perulangan di lakukan, sehingga apabila sejak awal ekspresi tidak memenuhi kondisi yang di persyaratkan ( bernilai FALSE ), maka pernyataan tidak akan di proses sama sekali.

Lihat contoh kode PHP untuk perulangan sederhana di bawah ini, variabel $i bernilai 1 dan ekspresi ( kondisi yang di persyaratkan ) adalah variabel $i bernilai kurang dari sama dengan 10, artinya variabel $i harus bernilai 1 hingga 10, jika tidak maka ekspresi bernilai FALSE dan perulangan akan di hentikan / tidak akan di jalankan.

<?php
$i = 1;
while ($i <= 10) {
    echo $i++;
}
?>

6. DO – WHILE

Perulangan dengan DO – WHILE sebenarnya sangat persis dengan perulangan menggunakan WHILE, hanya saja ekspresi di periksa pada akhir setiap perulangan, perbedaan utama dari perulangan WHILE adalah adanya “jaminan” perulangan pertama akan di jalankan ( jika menggunakan perulangan DO – WHILE ) karena status ( TRUE atau FALSE ) ekspresi hanya di periksa pada akhir setiap perulangan saja.

Perhatikan potongan kode berikut:

<?php
$i = 0;
do {
    echo $i;
} while ($i > 0);
?>

Variabel $i bernilai 0, sedangkan ekspresi yang di syaratkan bernilai “$i > 0” ( artinya hasil pemeriksaan ekspresi bernilai FALSE ), namun nilai variabel $i tetap di tampilkan ( lihat baris ke 4 “echo $i” ), inilah perbedaan utama antara WHILE dengan DO – WHILE, yaitu tahapan perulangan dan ekspresi, perulangan WHILE memeriksa ekspresi terlebih dahulu kemudian melakukan perulangan, sedangkan DO – WHILE melakukan (do) perulangan terlebih dahulu baru memeriksa ekspresi.

Fungsi Validasi

7. EMPTY

Kode EMPTY pada PHP merupakan salah satu fungsi built-in yang berfungsi untuk memvalidasi nilai suatu variabel apakah kosong atau telah memiliki nilai, jadi fungsi EMPTY memeriksa nilai dari variabel yang sudah ada, bukan memeriksa apakah suatu variabel ada atau tidak ada.

<?php
$usia = 0;
if (empty($usia)) {
    echo 'Variabel usia bernilai kosong atau 0';
}

8. ISSET

Kode ISSET pada PHP merupakan salah satu fungsi built-in yang berfungsi untuk memvalidasi eksistensi suatu variabel apakah ada atau tidak ada, berbeda dengan fungsi EMPTY yang memeriksa nilai dari variabel yang sudah ada, fungsi ISSET memeriksa apakah variabel eksis ( ada ) atau tidak ada tanpa menghiraukan nilai yang ada dalam variabel tersebut ( kecuali NULL ).

Perhatikan potongan kode di bawah ini:

<?php
$nama = '';
if (isset($nama)) {
    echo "Variabel nama ada, evaluasi bernilai TRUE";
}

if (isset($alamat)) {
    echo "Variabel alamat tidak ada, evaluasi bernilai FALSE";
}
?>

9. UNSET

Kode UNSET pada PHP merupakan salah satu fungsi built-in dengan fungsi utama untuk menghilangkan suatu variabel termasuk nilai yang ada di dalamnya.

Perhatikan potongan kode di bawah ini:

<?php
 $nama='';
 if (isset($nama)) {
  echo "Variabel NAMA ada.<br>";
 } else {
  echo "Variabel NAMA tidak ada.";
 }

 unset($nama);

 if (isset($nama)) {
  echo "Variabel NAMA ada.";
 } else {
  echo "Variabel NAMA tidak ada.";
 }
?>

Variabel $nama ( lihat baris ke-2 ) di deklarasikan walaupun tidak memiliki nilai, artinya variabel $nama eksis atau ada, kemudian di periksa menggunakan fungsi ISSET ( lihat baris ke-3 ) dan tentu saja hasilnya TRUE ( “Variabel NAMA ada.” ), kemudian variabel nama di hilangkan dengan fungsi UNSET ( lihat baris ke-9 ) dan di periksa menggunakan fungsi ISSET ( lihat baris ke-11 ), hasilnya FALSE ( “Variabel NAMA tidak ada.” ).

Pemeriksaan Variabel

10. IS_ARRAY

Kode IS_ARRAY merupakan salah satu kode PHP yang berfungsi untuk memeriksa suatu variabel apakah berjenis array atau bukan, sebagaimana telah kita singgung sebelumnya bahwa variable hanya dapat berisi satu nilai sedangkan variable yang memiliki banyak nilai di sebut array.

Perhatikan kode di bawah ini:

<?php
   $penulis = array('Adam','Benny','Carla');
   $domain = "DosenIT.com";

   if (is_array($penulis)) {
       echo "Variabel 'penulis' adalah ARRAY.";
    } else {
       echo "Variabel 'penulis' BUKAN ARRAY.";
    }

 echo "<br/>";

    if (is_array($domain)){
        echo "Variabel 'domain' adalah ARRAY.";
    } else {
        echo "Variabel 'domain' BUKAN ARRAY.";
    }
?>

Terdapat dua variabel dengan nama $penulis yang di atur sebagai array ( memiliki banyak nilai, dalam hal ini tiga nilai ) dan variabel dengan nama $domain yang hanya berisi satu nilai ( berjenis data string ) di deklarasikan pada baris ke-2 dan ke-3, variabel tersebut kemudian di periksa ( di validasi ) menggunakan fungsi IS_ARRAY ( lihat baris ke-5 dan baris ke-13 ) dan variabel “penulis” bernilai TRUE ( “Variabel ‘penulis’ adalah ARRAY.” ) sedangkan variabel “domain” bernilai FALSE ( “Variabel ‘domain’ BUKAN ARRAY.” ).

11. IS_INT

Integer merupakan tipe data yang berisi nilai bilangan bulat, fungsi IS_INT memeriksa apakah suatu variabel memiliki nilai bertipe data integer atau bukan, perhatikan contoh kode di bawah ini, terdapat empat variabel dengan nilai yang bervariasi, variabel pertama ($variabel1) bertipe data integer, variabel kedua ($variabel2) bertipe data string, variabel ketiga ($variabel3) bertipe data float, dan variabel keempat ($variabel4) bertipe data string.

<?php
 $variabel1 = 23;
 $variabel2 = "23";
 $variabel3 = 23.5;
 $variabel4 = "23.5";
 
 if (is_int($variabel1)){
    echo "Variabel 1 merupakan integer, TRUE.";
 } else {
    echo "Variabel 1 bukan integer, FALSE.";
 }
 
 echo "<br/>";
 
 if (is_int($variabel2)){
    echo "Variabel 2 merupakan integer, TRUE.";
 } else {
    echo "Variabel 2 bukan integer, FALSE.";
 }
 
 echo "<br/>";
 
 if (is_int($variabel3)){
    echo "Variabel 3 merupakan integer, TRUE.";
 } else {
    echo "Variabel 3 bukan integer, FALSE.";
 }
 
 echo "<br/>";

 if (is_int($variabel4)){
    echo "Variabel 4 merupakan integer, TRUE.";
 } else {
    echo "Variabel 4 bukan integer, FALSE.";
 }
?>

12. IS_FLOAT

Secara sederhana, tipe data float ( juga di kenal sebagai “floating-point”, “double”, atau “real number” ) merupakan tipe data yang memuat nilai numerik pecahan, berbeda dengan tipe data integer, float mendukung nilai pecahan dengan titik sebagai pemisahnya ( nilai pecahan di tulis 12.34 bukan dengan koma 12,34 ).

Perhatikan contoh kode di bawah ini, struktur kode sengaja Saya samakan dengan validasi IS_INT:

<?php
 $variabel1 = 23;
 $variabel2 = "23";
 $variabel3 = 23.5;
 $variabel4 = "23.5";
 
 if (is_float($variabel1)){
 echo "Variabel 1 merupakan float, TRUE.";
 } else {
    echo "Variabel 1 bukan float, FALSE.";
 }
 
 echo "<br/>";
 
 if (is_float($variabel2)){
    echo "Variabel 2 merupakan float, TRUE.";
 } else {
    echo "Variabel 2 bukan float, FALSE.";
 }
 
 echo "<br/>";
 
 if (is_float($variabel3)){
    echo "Variabel 3 merupakan float, TRUE.";
 } else {
    echo "Variabel 3 bukan float, FALSE.";
 }
 
 echo "<br/>";

 if (is_float($variabel4)){
    echo "Variabel 4 merupakan float, TRUE.";
 } else {
    echo "Variabel 4 bukan float, FALSE.";
 }
?>

13. IS_BOOL

Boolean merupakan tipe data yang merepresentasikan nilai ‘true’ atau ‘false’ dari suatu variabel, fungsi IS_BOOL memeriksa nilai suatu variabel apakah bernilai ‘true’ / ‘false’ atau tidak, perlu di garis bawahi bahwa penulisan ‘true’ atau ‘false’ bersifat case-insensitive sehingga penulisan ‘TRUE’ dengan ‘true’ di anggap sama.

<?php
 $variabel1 = TRUE;
 $variabel2 = "TRUE";
 $variabel3 = FALSE;
 $variabel4 = "FALSE";
 
 if (is_bool($variabel1)){
 echo "Variabel 1 merupakan boolean, TRUE.";
 } else {
    echo "Variabel 1 bukan boolean, FALSE.";
 }
 
 echo "<br/>";
 
 if (is_bool($variabel2)){
    echo "Variabel 2 merupakan boolean, TRUE.";
 } else {
    echo "Variabel 2 bukan boolean, FALSE.";
 }

  echo "<br/>";
 
 if (is_bool($variabel3)){
    echo "Variabel 3 merupakan boolean, TRUE.";
 } else {
    echo "Variabel 3 bukan boolean, FALSE.";
 }
 
 echo "<br/>";

 if (is_bool($variabel4)){
    echo "Variabel 4 merupakan boolean, TRUE.";
 } else {
    echo "Variabel 4 bukan boolean, FALSE.";
 }
?>

Demikian pembahasan mengenai kode kode PHP dan fungsinya, semoga bermanfaat untuk menambah pengetahuan Anda khususnya yang membutuhkan , selamat mencoba.

Source

Download XAMPP versi terbaru 2019

Sedikit penjelasan : XAMPP adalah Aplikasi untuk membuat server localhost yang terdiri dari Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.

Nama XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah untuk digunakan yang dapat menampilkan halaman web yang dinamis. Dan berikut beberapa definisi program lainnya yang terdapat dalam XAMPP.

Apache
Fungsi dari Apache yaitu menampilkan halaman web sesuai dengan script php yang telah di buat sebelumnya.

PHP
Merupakan bahasa pemograman yang sering di gunakan untuk web server. PHP memungkinkan pengguna atau user untuk membuat web dinamis (dapat di ubah). PHP dapat berkerja di berbagai macam Operating System seperti, windows, linux, mac os, dan lainnya. Untuk lebih detail nya bisa kalian baca disini Pengertian CSS dan Fungsinya

MySQL
SQL atau Structured Query Language merupakan software yang khusus di gunakan untuk mengolah database. Hal ini memungkinkan SQL untuk dapat menambah, mengubah, menghapus data yang terdapat dalam database. SQL merupakan software yang bersifat rational atau dalam artian program ini menggunakan tabel data untuk memisahkan beberapa data yang memungkinkan untuk menghindari duplicate data.

PHPmyAdmin
Dengan fitur PHPmyAdmin ini, kita akan dapat dengan mudah membuat baris data ataupun database tanpa harus mengingat perintah-perintahnya.
Server HTTP Apache atau Server Web/WWW Apache merupakan server web yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.

Versi	Link Download	Size
7.1.30 / PHP 7.1.30	Download (64 bit)	144 Mb
7.2.20 / PHP 7.2.20	Download (64 bit)	148 Mb
7.3.7 / PHP 7.3.7	Download (64 bit)	149 Mb

Pengertian CSS dan Fungsinya

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheets. Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language. Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website.

Kalau kamu sudah mengenal HTML, nah itulah salah satu contoh bahasa mereka. HTML atau Hypertext Mark Up Language tergolong sebagai bahasa pemrograman yang paling standar dan lazim digunakan dalam pembuatan halaman web. HTML ini istilahnya ada di “balik layar” tampilan halaman web yang kamu akses. Tatanan sebuah situs web akan berantakan tanpa adanya bahasa pemrograman seperti HTML.
Jika kalian belum tahu apa itu HTML kalian bisa baca disini.

CSS dan HTML

Lalu, apa hubungannya HTML dengan CSS? Keduanya sangat berhubungan erat. CSS adalah kode-kode yang dipakai untuk mendesain sebuah laman HTML. Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah pakaian yang membuat penampilan menjadi semakin menarik. CSS akan membantu para web designer untuk mengubah tampilan teks (baik dari bentuk dan ukuran font maupun warnanya), menambahkan gambar, hingga mengubah latar belakang sebuah halaman HTML.

Keberadaan CSS bisa terlihat dengan adanya atribut warna teks. Di sini CSS memberi perintah berupa teks berwarna biru melalui tag dengan atribut class=”warna”. Jadi setiap tag muncul, teks yang mengikutinya akan berwarna biru. Pun demikian saat kamu ingin mengganti warnanya. Tinggal mengganti CSS pada tag -->
Setelah memahami hubungan antara CSS dengan HTML, mari lanjutkan belajar CSS ke poin selanjutnya yaitu tentang fungsi.

Belajar CSS lebih mudah dengan mengetahui fungsinya

Sebenarnya untuk fungsi CSS kamu sudah bisa mengetahuinya dari penjelasan sebelumnya. Pada dasarnya, CSS berfungsi untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website. CSS dapat bekerja dan berlaku melalui tag HTML. Dengan adanya CSS, tag HTML yang sederhana dapat diubah sehingga tampilan laman website pun menjadi terlihat lebih menarik dan efisien.

Peran CSS

Dari sini kamu bisa menyimpulkan bahwa peran CSS untuk website sangatlah penting. Tanpa adanya CSS, tampilan website akan membosankan atau bahkan membutuhkan waktu lama untuk loading. Bayangkan saja kamu hanya bisa bergantung pada HTML untuk membuat sebuah situs. Bukan cuma tampilan situs akan “hambar” tapi kamu juga butuh waktu lebih lama karena harus berulang kali mengetikkan perintah. Untuk lebih mengethui tentang property CSS bisa kalian lihat disini Kumpulan Property Yang Digunakan Pada CSS Beserta Fungsinya

Source

Kumpulan Property Yang Digunakan Pada CSS Beserta Fungsinya

Jika kalian tidak tahu apa itu CSS sebaiknya kalian pahami terlebih dahulu disini Pengertian CSS dan Fungsinya .karena belajar bukan hanya dari perakteknya saja tapi kalian harus tahu juga pengertianya dan apa maksud tujuan tersebut. Jika sudah paham boleh langsung kalian peraktekanya langsung diproject kalian.

Aturan Penulisan CSS

Syntax CSS dibagi dalam 3 bagian :

selector {property : value;}

1. selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
2. property : atribut yang akan diubah (color, font-size, dll)
3. Property dan nilai dipisahkan dengan titik dua (:) dan nilai diakhiri dengan titik koma (;) Property dan nilai diapit dalam kurung {}

Contoh property dan values pada background

Property	Values	Keterangan
Background-image	Url	Alamat gambar yang sudah di uploud
Background-repeat	Repeat	Gambar diulang dalam halaman
	Repeat-y	Gambar diulang dalam sumbu y
	Repeat-x	Gambar diulang dalam sumbu x
	no-Repeat	Gambar tidak diulang hanya muncul 1 gambar

Contoh property dan values pada font

Property	Values	Keterangan
font-family	Arial;	Jenis font adalah arial
Font-size	small;	kecil
	medium;	menengah
	large;	besar
	12px;	besar 12 pixel (Bisa diganti 12pt)
Font-style	Normal;	Font normal
	Italic;	Font miring
Font-weight	Normal;	Ketebalan font normal
	Bold;	Font Tebal
	100-900	Ketebalan font dengan nilai dari 100-900

Contoh Property Dan Value pada Text

Property	Values	Keterangan
Text-decoration	none;	Menampilkan text asli
	Underline;	Menampilkan Text bergaris bawah
	Overline;	Menampilkan text bergaris atas
	line-through;	Menampilkan text tercoret
	blink;	Menampilkan text berkedip
Text-transform	uppercase;	Menampilkan text huruf besar
Text-align	left;	Text rata kiri
	right;	Text rata kanan
	center;	Text rata tengah
	justify;	Text rata kanan kiri

Contoh Selector Pada Link

Selector	Keterangan
a:link	Keadaan awal link
a:hover	Keadaan link saat dikenai mouse
a:active	Keadaan link saat di klik
a:visited	Keadaan link setelah dikunjungi

Contoh property dan value pada position

Property	Values	Keterangan
Position	Static;	Elemen render dalam rangka, seperti yang muncul dalam aliran dokumen
	Absolute;	Unsur diposisikan relatif terhadap posisi pertama (tidak statis)
	Fixed;	Unsur diposisikan relatif terhadap jendela browser
	Relative;	elemen diposisikan relatif terhadap posisi normal, sehingga "left: 20" menambahkan 20 pixel ke posisi KIRI elemen
	Inherit;	Nilai dari properti posisi diwariskan dari elemen induk

Contoh Property dan Value pada Border

Property	Values	Keterangan
Border	1px solid #000;	ukuran border bisa diubah dalam ukuran pixel. Border-style (contoh solid;dotted) merupakan style pada border setiap style tampilan berbeda. Border-color bisa menggunakan warna RGB juga Desimal. Property border bisa diganti dengan border-left; border-right; border-top; border-bottom;
	2px dotted #ff0000;
	3px double blue;
	5px groove #3300ff;
	5px ridge #3300ff;
	5px inset #3300ff;
	5px outset #3300ff;

Contoh property dan value pada border-radius

Property	Values	Keterangan
Border-radius	10px;	Garis melemgkung disemua sisi dengan ukuran 10px
border-top-left-radius	2em 0.5em;	Garis melengkung pada sisi atas dan kiri dengan ukuran berbeda
border-top-right-radius	3em 2.5em;	Garis melengkung pada sisi atas dan kanan dengan ukuran berbeda
border-bottom-right-radius	1em 2em;	Garis melengkung pada sisi bawah dan kanan dengan ukuran berbeda
border-bottom-left-radius	2em 1em;	Garis melengkung pada sisi bawah dan kiri dengan ukuran berbeda
border-bottom-left-radius	2em;	Garis melengkung pada sisi bawah dan kiri dengan ukuran sama

Margin dan Padding

• Margin adalah kode yang mengatur seleksi batas jarak luar, seperti misal memberi jarak antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang ada pada struktur header di sekitarnya.
• Padding adalah kode yang mengatur seleksi batas jarak dalam seperti memberi jarak pada header dengan batas tepi header misalnya padding:5px; jadi jarak header dengan batas tepinya 5px ke dalam.

Contoh property dan value pada margin dan padding

Property	Values	Keterangan
margin	10px 5px 0px 5px;	atas 5, kanan 5, bawah 0, kiri 10
margin-top	10px;	karak atas 10px
margin-right	5px;	jarak kanan 5px
margin-bottom	2em;	jarak bawah 2em
margin-left	3em;	jarak kiri 3en
padding	2em;	atas, kanan, kiri dan bawah 2em

Contoh property dan value pada display

Property	Values	Keterangan
DISPLAY	None;	Berfungsi untuk menghilangkan atau menyembunyikan elemen yang diberi kode tersebut
	Block;	Berfungsi untuk memberi blok baru atau baris baru seperti kode dan
	Inline;	Berfungsi sama seperti kode span, yang memberi desain background berbeda hanya pada elemen tersebut
	Inline-block;	jika layar tidak muat maka secara otomatis membuat baris baru.

Source