Selamat Datang

Belajar CSS Hari ke-1 “Fundamental”

Saya akan membagikan ilmu yang telah saya pelajari mengenai CSS, ini mungkin metode yang saya rasa sesuai bagi pemula jika ingin mempelajari mengenai CSS. Menurut saya CSS itu adalah sekumpulan “KOTAK” yang tersusun dengan baik, That’s It.

Jika kemauan anda untuk belajar dibawah 80%, saya sarankan anda meninggalkan artikel ini, karena dibutuhkan keseriusan yang cukup.

Hari ke-1 kita akan belajar mengenai sesuatu yang dasar mengenai CSS, yaitu “Box – Modeling”.

box modeling css

struktur Box-Modeling di CSS (w3school.com)

Coba perhatikan gambar diatas, disana terdapat posisi MARGIN – BORDER – PADDING – CONTENT. 

  • Item: Istilah yang saya definisikan, Item terdiri dari Padding dan Content,
  • Margin: Diluar kotak/Item, seperti ruang hampa di luar kotak/Item,
  • Border: Diluar kotak/Item, tetapi seperti menempel dengan Padding dan Content (pinggiran Item),
  • Padding: Didalam kotak/Item, seperti ruang hampa didalam kotak/Item,
  • Content: Didalam kotak/Item, Nah ini baru isi nya, seperti TEKS, GAMBAR/IMAGE, VIDEO, atau apapun yang anda masukkan.

Bisa anda liat ternyata sebuah objek teks, gambar, atau video yang anda masukkan dalam kode HTML dilapisi beberapa PROPERTIES seperti yang telah saya jelaskan.

Enough for theory, let’s get practice .

follow this steps, to make a box from a very scratch.

1) buat folder bernama “hari1” , didalam nya buat file kosong namanya “index.html” ,

2) buka file index.html menggunakan “Notepad”, kita akan membuat box-model dengan menggunakan file HTML ini.

3) buat kerangka dasar dalam file “index.html” seperti dibawah ini dan sebuah file css dengan nama style.css.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
</body>
</html>

4) setelah kita buat kerangka dasar, mari kita membuat “wadah” untuk “Item” /box-model 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<!-- wadah box model -->
	<div class="boxModel"></div>
			
</body>
</html>

5) Coba jalankan file tersebut di dalam browser. Maka akan belum nampak apa-apa.

6) Sekarang mari kita buat properties pada boxModel seperti tinggi, lebar, dan warnanya, tulis di file style.css.

	.boxModel{ 
		/* buat selector "class='boxModel'" ,pada tag div */
		width: 50px; /*properties lebar*/
		height: 50px; /* properties tinggi */
		background: red; /* properties background */

	}

7) setelah itu coba jalankan, tampilan nya seperti dibawah

box model 1

boxModel sudah terlihat

seperti yang kita pelajari sebelumnya bahwa sebuah “Item” mempunyai Margin, Border, Padding, dan Content. Warna merah disini mencakup part dari “Item”(Padding + Content) saja.

Pertanyaannya,
Mengapa kotak tidak menempel pada pojok atas dan pojok kiri layar? dan seperti ada ruang kosong disana?

Jawabannya mudah ,disana terdapat Margin.
tapi margin siapa?? “boxModel”?

tentu saja bukan, karna kita tidak mengeset nilai margin “boxModel” sebelumnya, berarti margin “Body” yang ter-set secara default dari settingan browser.

8) Mari kita buktikan bahwa Margin itu benar-benar ada, caranya kita hilangkan margin dengan me-set nilai nya 0.

	body{ 
	/*buat selector body*/
		margin:0; /*set nilai margin menjadi 0*/
	}		
	.boxModel{ 
		/* buat selector "class='boxModel'" ,pada tag div */
		width: 50px; /*properties lebar*/
		height: 50px; /* properties tinggi */
		background: red; /* properties background */

	}

coba jalankan kembali, maka tampilannya menjadi seperti ini.

box model 2

margin hilang

dan margin itu benar-benar ada, hanya saja tidak terlihat.

9) Sekarang mari kita set margin pada boxModel.

	body{ 
	/*buat selector body*/
		margin:0; /*set nilai margin menjadi 0*/
	}		
	.boxModel{ 
		margin:50px; /*set nilai margin*/
		
		/* buat selector "class='boxModel'" ,pada tag div */
		width: 50px; /*properties lebar*/
		height: 50px; /* properties tinggi */
		background: red; /* properties background */

	}

lalu jalankan kembali , maka margin pada boxModel akan terlihat.

box model 3

margin boxModel di set 50px

10) selanjut nya mari kita buat Border menampakkan wujudnya.

	body{ 
	/*buat selector body*/
		margin:0; /*set nilai margin menjadi 0*/
	}		
	.boxModel{ 
		border: 5px solid black; /* set nilai properties border, border memliki 3 parameter(tebal, style, warna)*/
		
		margin:50px; /*set nilai margin*/
		
		/* buat selector "class='boxModel'" ,pada tag div */
		width: 50px; /*properties lebar*/
		height: 50px; /* properties tinggi */
		background: red; /* properties background */

	}

silahkan di jalankan kembali, maka tampilannya akan seperti ini.

box model 4

border menampakkan wujudnya

11) Sekarang mari kita bedakan antara Padding dengan Content. Dengan memberikan teks pada boxModel dan me-set nilai padding.

	body{ 
	/*buat selector body*/
		margin:0; /*set nilai margin menjadi 0*/
	}		
	.boxModel{ 
		border: 5px solid black; /* set nilai properties border, border memliki 3 parameter(tebal, style, warna)*/
		
		margin:50px; /*set nilai margin*/
		
		padding: 50px; /*set nilai padding*/
		
		/* buat selector "class='boxModel'" ,pada tag div */
		width: 50px; /*properties lebar*/
		height: 50px; /* properties tinggi */
		background: red; /* properties background */

	}

Jalankan , dan anda akan melihat ini.

box model 5

Bagian yang tidak terisi text adalah Padding

Kesimpulannya ,

Margin, Border, Padding, dan Content merupakan satu kesatuan dari sebuah box-model yang anda buat menggunakan CSS, jadi jangan lupakan salah satu properties nya, atau anda akan mendapat kan kesulitan pada saat pembuatan sebuah template atau apapun yang berhubungan dengan CSS.

sekian,

have a nice day

by @kucingbelang4





Penulis :

I just love my mom , and Cat absolutely. View all posts by kucingbelang4

Comments

17 thoughts on “Belajar CSS Hari ke-1 “Fundamental”

  1. adis says:

    mantaf gan tutornya, apalagi untuk pemula seerti saya. keep posting gan, trims sharing ilmu nya :) cheers !

  2. Syam says:

    Bagian 2 mana niy ?

  3. kiki says:

    tutorialnya sangat membantu untuk saya.. terimakasih. di tggu lanjutan nya.

  4. sangat berguna buat menambah ilmu saya
    terima kasih gan

  5. hady says:

    mantep

  6. THX FOR UR COMMENT EVERY1 ! :)

  7. andika says:

    hadehhhh sangat rumit ya,tapi harus berusaha kalau mau bisa ,makasih mas

  8. agung says:

    thank’s gan tutorial nya sangat brguna , d lanjutan nya ni.

  9. ucok says:

    Mantep gan. Ini bener bener buka wawasan dasar banget, ane jadi tambah paham gan. nice posting (y)

  10. wai says:

    thanks berat gan

  11. Jaya Handika D says:

    Ini css framework skeleton atau css biasa gan ?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development