1. INLINE STYLE
Inline Style adalah Cara menginput kode CSS langsung ke dalam tag HTML. Inline Terletak pada tag <body>
Contoh codingan Inline
<html>
<head>
<legend>Contoh codingan Inline</legend>
<body>
<h1 style="background-color:ye ; color:green">
Berikut adalah contoh penggunaan inline style </h1>
</body>
</head>
</html>
2. INTERNAL STYLE
Internal Style adalah digunakan untuk memisahkan File CSS dari tag HTML. internal terletak pada tag <Head> dengan menggunakan tag <Style>
Contoh codingan Internal
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<style type="text/css">
body{background-color: aqua;}
h1{
font-family: arial;
line-height: 2.75em;
font-size: 16px;
color: Red;:
}
p {
font-family: arial;
color: blue;
}
</style>
</head>
<body>
<h1>Halaman Anda</h1>
<p> bagian ini berisi Halaman web Anda yang menggunakan fungsi CSS. </p>
</body>
</html>
Berikut adalah hasil codingan jika di jalankan:
3.EXTERNAL STYLE
External Style digunakan untuk menggankat file CSS ke dalam file terpisah.Untuk memanggilnya menggunakan script html yang disisipkan antara tag head sebagai berikut:
<link rel="stylesheet" type="text/css" href="External.css">
Berikut adalah codingan External.CSS
i1{
font-family: sans;
color: orange;
}
i2{
font-family: sans;
color: rgb(76, 0, 255);
}
h2 {
font-family: sans;
color: red;
}
maka kode lengkap HTML nya akan menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="External.css">
</head>
<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk
percobaan saja.Percobaan untuk mendemokan <i1>External css</i1>.
Seperti namanya,<i2>External CSS</i2> adalah kode HTML yang ditulis
ke dalam file CSS yang berbeda.</p>
</body>
</html>
Berikut adalah hasil codingan jika di jalankan:
Mengenal Class dan id Pada HTML
Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik "." , dan id di panggil pada css atau javascript dengan tanda pagar " # " ada kelebihan di sini untuk class , yaitu class dapat di berikan pada banyak element html dan dapat di panggil sekaligus , sedangkan id hanya dapat bekerja pada satu penandaan saja , maksudnya satu nama id hanya bisa di berikan pada satu element saja , perhatikan pada contoh berikut untuk memberikan pemahaman lebih tentang class dan id pada html ini:
Codingan index.html :
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Class dan Id pada HTML</title>
<link rel="stylesheet" type="text/css" href="External.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML</h1>
<!-- contoh penggunaan class -->
<div class="kotak">kotak 1</div>
<div class="kotak2">kotak 2</div>
<div class="kotak3">kotak 3</div>
<!-- contoh penggunaan id -->
<div id="kotak">Kotak 4</div>
</body>
</html>
Codingan Style.css :
h1{
color: black;
font-family: sans-serif;
text-align: center;
}
.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: black;
}
.kotak2{
padding: 50px;
width: 100px;
color: green;
margin: 10px;
background: yellow;
}
.kotak3{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: aqua;
}
#kotak{
width: 400px;
color: #fff;
background: red;
padding: 50px;
}
Berikut Hasil codingan Jika Dijalankan
Komentar
Posting Komentar