Beranda » CSS Dasar » Tutorial Blogspot » Cara Menuliskan Kode CSS (CSS Syntax)

Cara Menuliskan Kode CSS (CSS Syntax)

Pada postingan kali ini saya yang masih belajar mengenai CSS ini akan menuliskan kembali apa yang telah saya baca dari berbagai sumber mengenai tips / cara untuk Menuliskan Kode CSS (CSS Syntax) dalam blog,
Style Sheet (CSS Syntax) terdiri dari sejumlah definisi style dimana cara menuliskan suatu definisi style dapat dijelaskan dengan gambar sebagai berikut:

Format Penulisan CSS terdiri dari

Selector : merupakan bagian yang hendak kita atur atau kita format dengan kode CSS ini,
Secara Umum Selector terdiri dari 3 macam yaitu:
1. Tag HTML,
  Setiap Tag yang ada dalam HTML dapat dijadikan sebagai selector,
  misal: tag H1 = tag ini untuk mengatur format dari judul / heading 1
2. Class,
  Penulisannya diawali dengan tanda titik (.) sedangkan pada HTML penulisannya dengan menambahkan class ( selengkapnya dibahas pada postingan Penggunaan Selector CSS Class, ID dan div)
3. ID
  Penulisannya diawali dengan tanda pagar (#) dan dapat untuk mendefinisaikan header, footer dll dengan mendefinisikan ID yang berbeda-beda, ( selengkapnya dibahas pada postingan Penggunaan Selector CSS Class, ID dan div)
Property: merupakan bagian dari selector (tag HTML) yang hendak diatur / format,
adapun penulisannya berada dalam tanda kurung kurawal dibuka dengan "{" dan ditutup dengan "}", dimana Tiap properti diidentifikasi oleh nama properti, kemudian diikuti oleh titik dua ( : ) dan nilai propertinya, kemudian diakhiri dengan titik koma ( ; ).
misal kita ingin mengatur besar/ukuran font, maka nama property nya font-size, sedangkan nilai yang kita inginkan untuk ukuran font judul misalnya 15 px
Pengelompokan selector
Jika terdapat beberapa selector yang mempunyai jenis property dengan nilai yang sama, maka kode CSS nya dapat digabung menjadi satu dengan format penulisan beberapa selector secara berurutan dengan pemisah tanda koma, misal kita hendak mengatur agar selector / tag h1, h2 dan h3 semua menggunakan warna merah, maka code CSS nya dapat kita tulis:

h1,h2,h3 { color: red }
Penulisan Property
Jika kita ingin menuliskan property lebih dari satu maka antara property dipisahkan oleh titik koma ( ; )
Contoh:
font-size:15px; color:blue;
Penulisan Properti yang lebih dari satu dapat ditulis secara sejajar.
Contoh:
H1 {font-size: 15pt; font-weight: bold; color:blue}
Atau dapat juga ditulis pada baris berikutnya contoh:
H1 {font-size:15pt;
font-weight:bold;
color:bold}
CSS Commet
Kita bisa menuliskan komentar atau keterangan untuk memudahkan kita dalam mengingat maupun mengedit cebuah CSS dimana Komentar atau keterangan ini tidak akan dibaca sebagai kode, dan juga tidak akan ditampilkan dalam halaman web tapi hanya sebagai catatan untuk diri kita saja.
Cara penulisan CSS comment ini ialah dengan menggunakan syntax pembuka /* dan penutup */ . sedangkan Keterangan yang hendak kita tulis diletakkan di antara tag /* dan */
Contoh:
```
/* Tulis komentar anda di sini */
p{
text-align: justify;
/* Tulis komentar anda di sini */
color: red;
font-family: arial;
}
```

Berikut ini adalah contoh Penulisan Kode CSS untuk memberi style heading 1 (H1), heading 2 (H2) dan paragraph (P):

H1 {font-size: 24pt; font-weight: bold; color: Blue}
H2 {font-size: 15pt;
font-weight: bold;
color: Black}
p {font-family:Arial;
font-size:12px;
color:red;
text-align:left; }

Tutorial Blogspot

HP/SMS/WA:	08561452465 / 085286352611

Alamat :	Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden, Kec. Jatisampurna ( masuk dari Jalan Raya Kranggan - Pondok Gede, Gang Camar) Kota Bekasi Jawa Barat