HTML Internal Style Sheet

Menggunakan Internal Style Sheet berarti menuliskan property style dengan value-nya pada tag style yang ada di bagian head (tag <head>).

Internal style sheet bisa digunakan untuk mendefinisikan style elemen-elemen umum, elemen dengan id tertentu, dan elemen yang termasuk dalam class tertentu yang ada dalam sebuah halaman web.

Contoh:
1. Style untuk jenis elemen tertentu
<html>
<head>
<style>

  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>
<body>

  <h1>Judul Artikel</h1>
  <p>Isi paragraf artikel.</p>
</body>
</html>




2. Style untuk Id element
<html>
<head>
<style>

  p    {color:green}
  p#beda {
    color:blue;
    }
</style>
</head>
<body>
  <h1>
Judul Artikel</h1>
  <p>Isi paragraf artikel 1.</p>
  <p>Isi paragraf artikel 2.</p>
  <p id="beda">Isi paragraf artikel 3.</p>
  <p>Isi paragraf artikel 4.</p>
  <p>Isi paragraf artikel 5.</p>
</body>
</html>

3. Style untuk Class
<html>
<head>
<style>

    p.ganjil {
        color:red;
    }
    p.genap {
        color:blue;
</style>
</head>
<body>
  <h1>
Judul Artikel</h1>
  <p
class="ganjil">Isi paragraf artikel 1.</p>
  <p
class="genap">Isi paragraf artikel 2.</p>
  <p class
="ganjil">Isi paragraf artikel 3.</p>
  <p
class="genap">Isi paragraf artikel 4.</p>
  <p
class="ganjil">Isi paragraf artikel 5.</p>
</body>
</html>



Click here if you like this article.


Post a Comment

0 Comments