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:- Tag HTML,
Setiap Tag yang ada dalam HTML dapat dijadikan sebagai selector,
misal: tag H1 = tag ini untuk mengatur format dari judul / heading 1 - Class,
Penulisannya diawali dengan tanda titik (.) sedangkan pada HTML penulisannya dengan menambahkan class ( selengkapnya dibahas pada postingan Penggunaan Selector CSS Class, ID dan div) - 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)
- Tag HTML,
- 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
- Definisi/Pengertian CSS (Cascading Style Sheet)
- Cara Membuat Gambar Animasi dengan Efek Hover CSS
- Cara Membuat Blockquote pada Posting Blog dengan CSS
- Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog
- Cara Membuat Kode HTML Link Gambar pada Blogspot
- Cara Membuat Kode HTML Untuk Gambar Berjalan di Blog
- Cara Membuat Link Gambar Berkedip di blogspot
- Cara Membuat Tabel di Blog dengan Kode HTML
- Cara Mengganti Tampilan Kursor Mouse dengan Gambar Kustom pada Blog
- Cara Menyisipkan Gambar pada Postingan Blog
- Cara buat spoiler buka/tutup show/hidden dalam postingan blog
- Cara mudah dan praktis Membuat Gambar Animasi GIF Online
- Menampilkan Widget di Halaman Tertentu pada Blog
- Mengenal Kode Tag HTML Dasar pada Web / Blog
- Optimasi SEO On Page Blog pada Gambar
- Tips membuat Atribut HTML link pada Blogspot agar SEO Friendly
- Tips/Cara Memasang iklan di body / bawah judul postingan