Aturan Penulisan Kode CSS

Posted by on
Pada kali ini,saya akan menjelaskan tentang aturan penulisan kode CSS ke dalam kode HTML.Selamat membaca !


Sama seperti HTML,ada aturan-aturan tertentu untuk memasukkan kode CSS agar menghasilkan tampilan website sesuai dengan keinginan kita.Berikut adalah contoh kode HTML dan CSS sederhana yang akan membantu untuk memahami aturan penulisan CSS :

<!DOCTYPE HTML>
<html>
<head>
<title>Aturan Penulisan CSS</title>
<style type="text/css">
body {font-size:30px; color:aqua;}
h1,h2 {text-decoration: underline;font-size:40px;color:red;}
p {font-size:14px;}
</style>
<head>

<body>

<h1>GAME ONLINE DUNIA</h1>

<h2>Game Online</h1>
<p>Gaming di zaman modern ini sudah sangat booming di kalangan masyarakat luas baik dari kalangan anak-anak sampai orang dewasa</p>

<h2>Game Offline</h2>
<p>Game offline juga sering diminati oleh pekerja yang mengisi waktu luang jika pekerjaan lagi senggang</p>

</body>
</html>

Hasilnya adalah sebagai berikut :

Gambar Dapat Diklik

Kode HTML di atas mengandung kode CSS yang dimasukkan menggunakan metode Internal Style Sheet,jika belum mengetahui metode-metode memasukkan CSS ke dalam HTML ,klik disini.Kemudian untuk kode HTML di atas,kode CSS yang dimasukkan adalah :

<style type="text/css">
body {font-size:30px; color:aqua;}
h1,h2 {text-decoration: underline;font-size:40px;color:red;}
p {font-size:14px;}
</style>

Berikut penjelasan secara tertulis untuk kode CSS di atas :

  • Pertama-tama,contoh selector ditulis pada awal penulisan kode CSS.Untuk contoh di atas,selector yang dimaksud adalah body,p,h1 dan h2
  • Jika kita ingin menggunakan lebih dari 1 selector,maka untuk memisahkan selector-selector itu,digunakan tanda koma (h1,h2)
  • Setelah selector,kita tulis property beserta valuenya.Seluruh property dan value(nilai) nya wajib ditulis di antara tanda kurung kurawal { dan }
  • Di antara satu property dan property lainnya,dipisahkan dengan tanda ;
  • Untuk di baris terakhir kita dapat mengabaikan tanda ; walaupun tetao disarankan sebaiknya memakai tanda ;
  • Untuk mengatur value dari sebuah property ,pisahkan dengan tanda : (property:value)
  • Jika property terdiri dari 2 suku kata maka pisahkan dengan tanda(-),contoh : background-color dan border-right
Sekian pembahasan mengenai aturan dasar penulisan kode CSS.Jika ada yang kurang jelas,bisa ditanyakan di kolom komentar,dan semoga ilmu yang dibagikan dapat bermanfaat  bagi yang membutuhkan ^ ^.Terima kasih !

Comments

Post a Comment