CSS dibedakan menjadi dua, yaitu CSS internal dan CSS external. CSS internal adalah CSS yang diletakan bersama kode HTML, sedangkan CSS eksternal adalah CSS yang diletakan terpisah dengan file kode HTML.
CSS internal berada dipasangan tag <style>dan</style>. CSS eksternal berada di file berekstensi .css dan nama filenya disebutkan di dokumen HTML di tag <link>. di HTML5, tag <link> memerlukan dua atribut berupa href dan rel.
- href merujuk ke file berekstensi .css
- rel diisi dengan "stylesheet", yang memberitahukan browser bahwa file adalah stylesheet.
Untuk memulai memperaktikkan CSS eksternal, buatlah kode berikut dengan menggunakan editor text, berinama file dengan external.css
h1 {
color: white;
background-color: black;
}
#info{
width: 200px;
height: 100px;
border: 1px solid;
text-align: center;
}
Lalu anda buatlah file dengan nama external.html, lalu tulislah kode seperti berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<link rel="stylesheet" href="eksternal.css">
</head>
<body>
<h1>Tes css</h1>
<div id="info">hasil css eksternal</div>
</body>
</html>
Jika kode anda benar maka hasilnya akan seperti berikut:
Dan untuk penulisan CSS internal maka kodenya sebagai berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
<style>
h1 {
color: white;
background-color: black;
}
#info{
width: 200px;
height: 100px;
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<h1>Tes css</h1>
<div id="info">hasil css eksternal</div>
</body>
</html>
CSS internal bisa juga ditulis di atribut style pada elemen HTML yang akan di format, maka penulisannya sebagai berikut:
<!doctype html>
<html>
<head>
<title>belajar css</title>
</head>
<body>
<h1 style="color: white; background-color: black;">Tes css</h1>
<div id="info" style="width: 200px; height: 100px; border: 1px solid; text-align: center;">hasil css eksternal</div>
</body>
</html>
Namun, cara seperti itu tidak direkomendasikan karena membuat bagian tag HTML terlihat kompleks, kecuali kalau isi atribut style sederhana (berisi satu atau dua properti singkat).
0 comments for "BELAJAR CSS DASAR | penulisan kode"
Post a Comment