Cara Bikin Website
 / CSS Dasar

Suryaning Bawono   / 17 - 01 - 2015, Banyuwangi,Jawa Timur



CSS digunakan untuk memudahkan kita menulis program HTML yang terstructure sehingga tidak perlu menulis kode yang sama secara berulang-ulang misalnya ukuran font, warna huruf dan sebagainya. Hal-hal tersebut dapat kita atur dengan CSS.Untuk tingkat dasar, kita berkenalan dulu dengan css dan untuk lebih mendalamnya ditingkat intermediet dipembahasan khusus css. Css dibagi menjadi 2 internal dan eksternal. Css Internal,ditulis didalam halaman html sedangkan css eksternal ditulis diluar halaman html.
Contoh CSS Internal :


<!doctype html>
<html>
<head>
<title>Belajar Bikin website</title>
<style>
body {background-color:yellow;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<p> Tulisan ini contoh menggunakan css internal </p>
<h1>Ini contoh judul (h1) dengan css internal </h1>
</body>
</html>


Contoh Tampilan pada text editor, (Saya menggunakan Notepad sebagai Text Editor)


Tampilan Pada Browser :




Contoh CSS Eksternal :


halaman css (simpan file dengan extention.css):

body {
background-color: lightgrey;
}

h1 {
color: blue;
}

p {
color:green;
}

Contoh Tampilan halaman css pada text editor, (Saya menggunakan Notepad sebagai Text Editor)


Contoh file css yang disimpan (save) dengan ektension css :
pada saat disimpan menggunakan extention css bukan .html :


contoh file css yang tersimpan dengan windows explorer :


Download contoh file css :
Download Klik disini

contoh kode html yang menggunakan css eksternal (bedakan dengan contoh kode html css internal diatas):

<!doctype html>
<html>
<head>
<title>Belajar Bikin website</title>
<link rel="stylesheet" href="contohfilecss.css">
</head>
<body>
<p> Tulisan ini contoh menggunakan css eksternal </p>
<h1>Ini contoh judul (h1) dengan css eksternal </h1>
</body>
</html>


Contoh Tampilan pada text editor, (Saya menggunakan Notepad sebagai Text Editor)



Tampilan Pada Browser :