HTML Cascading Style Sheet (CSS)

rani
Cascading Style Sheets (CSS) merupakan fasilitas untuk mengatur tampilan HTML dokumen pada browser. Mengatur tampilan dengan style lebih direkomendasikan dari pada penggunaan atribut elemen seperti color dan size. Karena lebih efektif dan pada HTML5 beberapa atribut tag yang tidak lagi didukung (support) digantikan dengan CSS.

Tampilan diatur CSS dengan menggunakan properti CSS yang mempunyai nama dan nilai. Nama dan nilai properti dipisahkan dengan titik dua (:). Satu properti dengan properti lainnya dipisahkan dengan titik koma (;).

Sintaks Umum:
element { property:value; property:value }

Berikut ini adalah contoh penulisan atribut pada elemen dan penulisan dengan CSS.
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<!-- Dengan Atribut -->
<p><font color="green" size="5">Penulisan dengan Atribut.</font></p>
<!-- Dengan CSS -->
<p style="color:green;font-size:24px;">Penulisan dengan CSS.</p>
</body>
</html>

Terdapat tiga cara penulisan CSS dalam dokumen HTML:
Contoh di atas menggunakan inline style sheet. Untuk melihat lebih detail tentang dan bagaimana contoh penulisannya, klik pada link masing-masing jenis penulisan di atas.

Berbeda dengan cara penulisan inline yang spesifik menuliskan style khusus untuk elemen yang bersangkutan. Pada Internal dan external pengalamatan untuk elemen mana style akan diterapkan, yaitu berdasarkan:
  • Jenis elemen tertentu, berlaku pada setiap elemen yang didefinisikan pada style seperti <p>, <h1>, <body>, dll
  • Id elemen, diperuntukan untuk sebuah elemen yang memiliki nama id. Satu id untuk satu halaman.
  • Class, untuk elemen tertentu yang memiliki nama class yang didefinisikan pada skyle. Pada satu halaman bisa beberapa elemen yang memiliki class yang sama.
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.


Tags
Reactions

Post a Comment

0 Comments

Post a Comment