Pemanggilan div class dan ID pada CSS
Thursday, December 26, 2019
Edit
Setelah materi kemarin tentang div class dan id
Link: https://ombrennofficial.blogspot.com/2019/12/materi-dasar-dari-html-tentang-div.html?m=1
Sekarang Demon mau memberikan pengetahuan sedikit tentang pemanggilan div class/ID dari bahasa CSS
A. Pemanggilan class
Pemanggilan class pada CSS menggunakan tanda .(titik) di depannya misal dari coding HTML pure ini:
<html>
<head>
<title>Belajar gabungan css tentang div id dan div class
</title>
<style type="text/css">
</style>
</head>
<body>
<h1>pembedaan div class dan div ID
</h1>
<div class="demon">demon1</div>
<div class="demon">demon2</div>
<div class="demon">demon3</div>
</body>
</html>
Nah, class di panggil di CSS dengan .(titik), karena saya menggunakan class bernama demon maka saya panggil di css dengan .demon
Contoh:
.demon
{
padding: 50px;
background-color: orange;
width: 100px;
margin: 40px;
}
Yang kalian sisipkan diantara <style type...> dengan </style>
Seperti gambar:
Link: https://ombrennofficial.blogspot.com/2019/12/materi-dasar-dari-html-tentang-div.html?m=1
Sekarang Demon mau memberikan pengetahuan sedikit tentang pemanggilan div class/ID dari bahasa CSS
A. Pemanggilan class
Pemanggilan class pada CSS menggunakan tanda .(titik) di depannya misal dari coding HTML pure ini:
<html>
<head>
<title>Belajar gabungan css tentang div id dan div class
</title>
<style type="text/css">
</style>
</head>
<body>
<h1>pembedaan div class dan div ID
</h1>
<div class="demon">demon1</div>
<div class="demon">demon2</div>
<div class="demon">demon3</div>
</body>
</html>
Nah, class di panggil di CSS dengan .(titik), karena saya menggunakan class bernama demon maka saya panggil di css dengan .demon
Contoh:
.demon
{
padding: 50px;
background-color: orange;
width: 100px;
margin: 40px;
}
Yang kalian sisipkan diantara <style type...> dengan </style>
Seperti gambar:
B. Pemanggilan ID
Pemanggilan ID pada CSS menggunakan tanda #(pagar) di depannya, misal dari codingan HTML pure ini:
<html>
<head>
<title>Belajar gabungan css tentang div id dan div class
</title>
<style type="text/css">
.demon
{
padding: 50px;
background-color: orange;
width: 100px;
margin: 40px;
}
</style>
</head>
<body>
<div id="demon">Demon jelek</div>
</body>
</html>
Nah karena ID di panggil dengan tanda # di depannya, jadi saya panggil di CSS dengan perintah #demon yang css nya adalah:
#demon
{
padding: 100px;
background-color: yellow;
width: 400px;
margin: 60px;
}
Gambar nya:
[26/12 14.20] Demon: Dan keseluruhan coding nya adalah:
<html>
<head>
<title>Belajar gabungan css tentang div id dan div class
</title>
<style type="text/css">
.demon
{
padding: 50px;
background-color: orange;
width: 100px;
margin: 40px;
}
#demon
{
padding: 100px;
background-color: yellow;
width: 200px;
margin: 60px;
}
</style>
</head>
<body>
<div class="demon">demon1</div>
<div class="demon">demon2</div>
<div class="demon">demon3</div>
<div id="demon">Demon</div>
</body>
</html>
Dengan hasil gambar:
