Sabtu, 12 Juli 2014

Mengenal CSS part 1

       CSS atau cascading style sheet adalah sebuah fitur untuk membuat sebuah dynamic HTML.
CSS yang akan mendeskripsikan bagaimana tampilah html di layar atau bisa juga kita sebut template.
css juga mengatur style dari semua content dokumen html anda,dan lagi css support pada semua browser.
penulisan dalam css bersifat case sensitife ini artinya camel dengan Camel di definisikan berbeda dalam css.
dan berbeda dengan html.penulisan property dalam css tidak bisa menggunakan tanda petik.
contoh:

color:green;

//color merupakan property dan ini case sensitive
//green adalah value.


CSS ini di gunakan dengan 3 cara.yaitu
-eksternal style sheet
-internal style sheet,dan
-inline style sheet.

Eksternal style sheet


eksternal style sheet merupakan CSS yang di tulis sebagai dokumen tersendiri dan terpisah dari dokumen html.
adapun cara penggunaannya dalam html adalah dengan menyisipkannya di antara tag head.dengan cara menggunakan tag
<link rel="stylesheet" type="text/css" href="style.css"/>

-link merupakan tag pembuka dan di akhiri dengan tag "/>"
-rel="stylesheet" merupakan penjelasan bahwa halaman tersebut akan menggunakan efek style sheet.
-type="text/css" merupakan penjelasan bahwa file yang di ambil adalah css
-href="style.css" merupakan lokasi dan nama file css yang digunakan.

Contoh:

buat lah file css pada notepad seperti di bawah ini:

body{
color:white;
background:green;
font-family:arial;
}


lalu save as style.css lalu simpan dalam sebuah folder baru.

setelah itu bikin script html seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>
contoh efek css</tytle>
<body>
ini merupakan file html dengan css eksternal pertama saya
</body>
</html>

simpan sebagai file html dalam folder yang sama dengan style.css lalu buka di browser anda.

usahakan anda mengetik ulang,smua script supaya anda terbiasa menulis dengan script.

internal stylesheet


Internal stylesheet merupakan script css yang di sisipkan dalam dokumen html.caranya adalah dengan menggunakan tag
<style type="text/css>
...definisi style
</style>

contoh:
buat sebuah dokumen html seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>css internal</title>
<style type="text/css">
body{
color:white;
background:green;
font-family:arial;
}
</style>
</head>
<body>
contoh penggunaan css internal dalam dokumen html.
</body>
</html>

inline css


yang terakhir adalah inline css,atau css yang di sisipkan pada tag html yang akan di beri efek css..
contoh:

<!DOCTYPE html>
<html>
<head>
<title>
inline css</title>
</head>
<body style="color:white; background:green; font-family:comic sans ms;">
<h2>Inline css</h2>
<p> ini adalah contoh penggunaan inline css</p>
</body>
</html>

Untuk penampakannya silahkan di coba sendiri ya :D
untuk pembahasanlebih lanjut bisa anda baca di postingan selanjutnya.
terima kasih.


0 komentar:

Posting Komentar