CSS

CSS Syntax: Tutorial – Contoh – dan Cara Membuatnya

Syntax css umumnya terdiri dari beberapa element yang kita sebut selektor dan deklarasi. 

h1 { color: white; text-align: center;}

Keterangan :
H1 : Selektor 
Color : Property 
Text-align : Property
White : Value
Center : Value
  • Selektor menunjuk ke elemen HTML yang ingin kita ubah tampilannya.
  • Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh tanda titik koma.
  • Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.
  • Deklarasi CSS selalu diakhiri dengan tanda titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.

Contoh Syntax CSS

Contoh ini kita akan membahas dua penyesuaian gaya / tampilan pada elemen.

  • Elemen paragraf (<p>) kita ubah menjadi warna merah dan text berada di tengah
  • Elemen heading 1 (<h1>) kita ubah menjadi warna putih dan jenis fontnya verdana
<!DOCTYPE html>
<html>
<head>
 <!-- ini adalah baris kode css -->
<style>
body{
  background-color: lightblue;
}
h1 { color: white; font-family: verdana;}
p {color: red; text-align: center;}

  </style>
  <!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf yang telah di ubah stylenya, huruf warna merah dan posisi text di tengah.</p>
  
</body>
</html>

Komen Pada Syntax CSS

Komen pada syntax css digunakan untuk memberikan keterangan pada baris kode, untuk memudahkan kita melacak fungsi tersebut.

Komen ini tidak akan terbaca oleh browser.

  • Komen di awali oleh tanda /* dan di akhiri */
p {
  color: red;
  /* Komen satu baris */  text-align: center;
}

/* komen 
dapat berupa 
beberapa baris */ 
<!DOCTYPE html>
<html>
<head>
<style>
body{
  background-color: lightblue;
}
  /* ini komen, keterangan untuk heading*/h1 { color: white; text-align: center;
}
p {font-family: verdana; font-size: 20px;}

 </style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraf yang telah di ubah stylenya.</p>
  
</body>
</html>

Properti dan value yang ada pada css umumnya akan disuggest secara otomatis pada editor yang anda gunakan.


Sutiono S.Kom., M.Kom ., M.T.I

Hi, i'm lecturer, technopreneur, investor, businessman, of course an IT Maniac. Have more than 12 years experience in as professional, and 10 years as technopreneur.

Share