Belajar CSS Membuat Kotak di Web WebSalam jagocopyer, pada kesempatan kali ini saya akan berbagi pengetahuan CSS dalam pemograman WEB, sering kita melihat website atau blog yang tampilannya begitu menarik, dibalik tampilan itu semua didesain menggunakan bahasa HTML, CSS, JS, dll, tapi pada kesempatan ini saya memaparkan CSS saja, sebelum masuk ke pembahasan sobat harus tau dulu apa sih CSS itu..?
CSS kepanjangan dari Cascading Style Sheet, CSS merupakan aturan koding untuk mengendalikan beberapa komponen dalam sebuah web sehingga lebih menarik, terstruktur dan seragam "CSS bukan merupakan bahasa pemograman" oa Sudah tahukan Apa itu CSS..? hahhahah!
dalam pembahasan ini kita akan belajar membuat sebuah kota pengganti table di html,
yang perlu kita ingat biasanya Css diapit oleh <head> </head> didiatas <Body> sebenarnya bisa ditaroh dimana saja tapi lebi defauldnya di head..
Catatan :
Nama Kota yang akan kita Biat adalah ganti_table
<html>
<head>
<title>Belajar Css</title>
</head>
<style type="text/css">
#ganti_table{ background:#999;
width:600px; height:400px;
border:2px solid #000;
}
</style>
<body>
<div id="ganti_table"> text didalam kota </div>
</body>
</html>
<head>
<title>Belajar Css</title>
</head>
<style type="text/css">
#ganti_table{ background:#999;
width:600px; height:400px;
border:2px solid #000;
}
</style>
<body>
<div id="ganti_table"> text didalam kota </div>
</body>
</html>
Kocy kode CSS diatas buka notepad | Star > All Program > Accessories> Notepad.
beri File Name : belajar.css
Save As Type All File > Save dimana anda akan simpan file css_nya
Open with file css tadi menggunakan Browser (Firefox atau Google Crome)
lihat hasilnya
Penjelasan :
<style type="text/css"> : adalah sintak CSS
}
background:#999; warna latar belakang
width:600px; : Lebar kotak
height:400px; tinggi kotak
border:2px solid #000; Kodyng untuk garis, 2px besar garis pinggir, solid tipe garis, #000; warna garis.
}
</style> Tutup kodyng CSS
Ini adalah Css yang sangat sederhana, anda bisa mengembangkannya lebih baik lagi..
semoga berhasil
thanks tutorialnya son! :D
BalasHapusiya so.. masama lah..
HapusMakasih banyak tutorialnya, sangat membantu ne gan.
BalasHapuskeren masbro...
BalasHapusmakasIh...! mas Broo
Hapus