HTML - Lembar Gaya

Cascading Style Sheets (CSS) menjelaskan bagaimana dokumen disajikan pada layar, dalam cetakan, atau mungkin bagaimana mereka diucapkan. W3C secara aktif mempromosikan penggunaan lembar gaya di Web sejak konsorsium didirikan pada tahun 1994.

Cascading Style Sheets (CSS) memberikan alternatif yang mudah dan efektif untuk menentukan berbagai atribut untuk tag HTML. Dengan menggunakan CSS, Anda dapat menentukan sejumlah properti gaya untuk elemen HTML tertentu. Setiap properti memiliki nama dan nilai, dipisahkan oleh titik dua (:). Setiap deklarasi properti dipisahkan oleh titik koma (;).

Contoh

Pertama mari kita pertimbangkan contoh dokumen HTML yang menggunakan tag <font> dan atribut terkait untuk menentukan warna teks dan ukuran font -

Note- Tag font tidak digunakan lagi dan seharusnya dihapus pada versi HTML mendatang. Jadi sebaiknya tidak digunakan, disarankan untuk menggunakan gaya CSS untuk memanipulasi font Anda. Namun tetap untuk tujuan pembelajaran, bab ini akan bekerja dengan contoh penggunaan tag font.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Kita dapat menulis ulang contoh di atas dengan bantuan Style Sheet sebagai berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Anda dapat menggunakan CSS dengan tiga cara di dokumen HTML Anda -

External Style Sheet - Tentukan aturan style sheet dalam file .css terpisah dan kemudian sertakan file tersebut dalam dokumen HTML Anda menggunakan tag <link> HTML.
Internal Style Sheet - Tentukan aturan style sheet di bagian header dokumen HTML menggunakan tag <style>.
Inline Style Sheet - Tentukan aturan style sheet secara langsung bersama dengan elemen HTML yang digunakan style atribut.

Mari kita lihat ketiga kasus satu per satu dengan bantuan contoh yang sesuai.

Lembar Gaya Eksternal

Jika Anda perlu menggunakan lembar gaya Anda untuk berbagai halaman, maka selalu disarankan untuk menentukan lembar gaya umum dalam file terpisah. File lembar gaya bertingkat akan memiliki ekstensi sebagai.css dan itu akan dimasukkan dalam file HTML menggunakan tag <link>.

Contoh

Pertimbangkan kita mendefinisikan file lembar gaya style.css yang memiliki aturan berikut -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Di sini kami mendefinisikan tiga aturan CSS yang akan berlaku untuk tiga kelas berbeda yang ditentukan untuk tag HTML. Saya sarankan Anda tidak perlu repot-repot tentang bagaimana aturan ini didefinisikan karena Anda akan mempelajarinya sambil mempelajari CSS. Sekarang mari kita gunakan file CSS eksternal di atas dalam dokumen HTML berikut -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Style Sheet Internal

Jika Anda ingin menerapkan aturan Style Sheet ke satu dokumen saja, Anda dapat memasukkan aturan tersebut di bagian header dokumen HTML menggunakan tag <style>.

Aturan yang ditentukan dalam lembar gaya internal menggantikan aturan yang ditentukan dalam file CSS eksternal.

Contoh

Mari kita tulis ulang contoh di atas sekali lagi, tetapi di sini kita akan menulis aturan style sheet dalam dokumen HTML yang sama menggunakan tag <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Style Sheet Inline

Anda dapat menerapkan aturan lembar gaya langsung ke elemen HTML apa pun menggunakan styleatribut dari tag yang relevan. Ini harus dilakukan hanya jika Anda tertarik untuk membuat perubahan tertentu di elemen HTML saja.

Aturan yang ditentukan sejajar dengan elemen menggantikan aturan yang ditentukan dalam file CSS eksternal serta aturan yang ditentukan dalam elemen <style>.

Contoh

Mari kita tulis ulang contoh di atas sekali lagi, tetapi di sini kita akan menulis aturan style sheet bersama dengan elemen HTML yang digunakan style atribut elemen tersebut.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Ini akan menghasilkan hasil sebagai berikut -