Pemanggilan div class dan ID pada CSS

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:

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:

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel