Aturan Penulisan Kode CSS

belajar HTML dan CSS untuk pemula

Sesudah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS saat ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri.

Aturan dan Cara Penulisan Kode CSS

Untuk lebih gampang memahami aturan dan cara penulisan kode CSS, dibawah berikut ialah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih mendalam:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan CSS</title>
<style type="text/css">
body 
p 
h1, h2 
</style>
 
</head>
<body>
   <h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1>
   
   <h2>Lorem ipsum dolor amet</h2>
   <p>Lorem ipsum dolor amet, consectetur adipiscing elit.
   Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet.</p>
   
   <p>Eam facilis omittantur at, usu efficiantur neglegentur 
   delicatissimi et, in per vero splendide persequeris. 
   Semper persius his te, ea omnium aliquip alienum, 
   in gloriatur vituperata has. An per dicat clita oporteat, 
   explicari deterruisset. Liber tibique ullamcorper 
   ei duo, at hinc civibus oporteat his.</p>
   <p>Nam verear constituto, eu latine bonorum euripidis 
   vim. Quidam maiorum interesset pri, usu vero saepe 
   graeci ea. Prompta nominati oportere te usu. 
   A nulla accusamus.</p>
   
   <h2>Lorem ipsum dolor sit amet</h2>
   <p>Lorem ipsum dolor amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
   fermentum rhoncus leo. Curabitur mi vitae
   metus posuere laoreet.</p>
 
</body>
</html>

Kode HTML di atas mempunyai kode CSS di bagian head yang diinput memakai motode Metode Internal Style Sheets. Kita akan fokus terhadap bagian CSS saja:

body 
p 
h1, h2

Seperti yang bisa dilihat dari contoh diatas, aturan penulisan CSS yaitu sebagai berikut:

  • Selector di posisikan di awal penulisan CSS. Pada contoh diatas, body, p, h1 dan h2 ialah selector. Khusus untuk selector yang lebih dari 1 (seperti di contoh selector terakhir: h1,h2) untuk memisahkan kedua selector itu, dipakai tanda koma (,)
  • Sesudah penulisan selector, seluruh isi dari property dan valuenya (nilainya), terletak di antara kurung kurawal “”.
  • Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik koma (;)
  • Diantara property dengan value (nilai), dipisahkan dengan kamu titik dua (:).
  • Untuk property yang mempunyai 2 kata , spasi diantaranya digantikan dengan tanda hubung (-), misalnya: background-color dan border-left.
  • Untuk properti yang berada di baris terakhir, kita bisa mengabaikan tanda ‘;’ sebagai tanda tutup, namun dianjurkan supaya tetap memakai tanda ‘;’, sebab mungkin saja kita lupa menuliskan tanda titik koma di waktu menambahkan properti lainnya. Contoh property tanpa tanda ‘;’ bisa di lihat dalam contoh “text-decoration: underline”.

Untuk tutorial CSS selanjutnya, kita akan membedah secara rinci tentang Selector CSS dalam tutorial jenis-jenis dan arti dari selector CSS.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *