Sintaks Css

Tata Cara Penulisan Atau Sintaksis CSS

Setiap bahasa pemrograman komputer mempunyai aturan penulisan (sintaksis) yang berbeda. Bila Anda membuat program dengan Java, kode program harus ditulis dengan sintaksis Java. Anda tidak dapat menulis program Java menggunakan sintaksis dari bahasa pemrograman lain seperti Delphi atau menulis semaunya tanpa sintaksis. Bila demikian, kode program tidak dikenali dan tidak dapat dieksekusi oleh compailer Java.

Demikian halnya ketika Anda menulis kode CSS untuk memberi style (gaya) pada tag HTML tertentu atau untuk keseluruhan laman web, CSS juga mempunyai aturan penulisan (sintaksis) sendiri. Bila sintaksis CSS salah, browser tidak dapat menterjemahkan atau diterjemahkan secara keliru. Karena itu, penting untuk menggunakan sintaksis CSS yang benar agar kode CSS dapat diterjemahkan oleh web browser.

Artikel menarik lainnya:

• Mengenal Vendor (Browser) Prefixes Di CSS
• Beberapa Cara Mendefinisikan Warna Di CSS
• Tiga Cara Menggunakan CSS Dengan HTML

Kode CSS sendiri terdiri dari tiga elemen yaitu selector, property dan value. Selector adalah elemen HTML yang mana saja, property adalah tipe atribut yang ingin diterapkan pada tag HTML dan value adalah nilai yang diberikan ke property. Adapun sintaksis CSS adalah sebagai berikut:

selector {property-name:value;}

Sebagai contoh, Anda dapat memberi style (gaya) untuk paragraf atau tag <p> dengan warna merah dan dicetak miring.

p {color:red; font-style:italic;}

Dari sintaksis CSS di atas, antara property-name dan value dipisah oleh tanda titik dua (colon) dan setelah value diakhiri oleh titik koma (semicolon. Property-name dan value diletakkan di dalam kurung kurawal ({}). Sintaksis CSS mempunyai dua blok yaitu blok selector dan blok deklarasi. Blok deklarasi adalah kurung kurawal beserta dengan property dan value di dalamnya sebagaimana gambar di bawah ini.

Selector CSS tidak hanya berupa elemen HTML namun bisa berupa pola (pattern) yang digunakan untuk menyeleksi elemen yang ingin diberi style atau gaya. Pola-pola dari selector CSS sebenarnya cukup banyak. Berikut ini beberapa contoh selector CSS:

1. Element Selector.

Element selector adalah tipe selector yang umum digunakan dan mungkin banyak ditemui ketika mengedit file CSS untuk merubah tampilan laman web. Sebagai contoh, Anda dapat memberi style pada paragraf yaitu elemen p atau tag <p> dengan warna merah dan rata tengah.

p {color:red; text-align:center;}

2. Universal Selector.

Universal selector (*) digunakan untuk menyeleksi semua elemen HTML. Sebagai contoh, Anda memberi warna latar (background) kuning pada semua elemen HTML.

* {background-color:yellow;}

3. Descendant Selector.

Descendant selector termasuk yang umum digunakan dan banyak ditemukan di file CSS. Selector descendant digunakan ketika Anda ingin memberi style (gaya) pada elemen tertentu yang ada di dalam elemen lainnya. Sebagai contoh, style berupa warna biru hanya berlaku untuk elemen em atau tag <em> jika elemen atau tag <em> berada di dalam elemen p atau tag <p>.

p em {color:blue;}

4. Grouping Selector.

Grouping selector umum ditemukan di file CSS. Grouping selector digunakan untuk memberi style (gaya) pada lebih dari satu elemen HTML. Anda cukup memisahkan elemen-elemen HTML yang akan diberi style sama dengan menggunakan tanda koma.

h1, h2, h3 {color:blue; font-weight:normal; text-transform:lowercase;}

5. class Selector.

class selector digunakan untuk menyeleksi elemen menggunakan atribut class spesifik. Untuk menyeleksi elemen HTML dengan class spesifik, gunakan tanda titik (.) diikuti nama class. Sebagai contoh, semua elemen HTML dengan class="bluecenter" diberi warna biru dan rata tengah.

.bluecenter {color:blue; text-align:center;}

6. id Selector.

id selector digunakan untuk menyeleksi elemen HTML menggunakan atribut id spesifik. Dalam satu laman web, id harus unik dan digunakan untuk menyeleksi satu elemen unik. Untuk menyeleksi elemen dengan id, gunakan tanda pagar (#) diikuti elemen. Sebagai cobtoh, elemen HTML dengan id="red" diberi warna merah.

#red {color:red;}

Cara Membuat Halaman Web Sederhana dengan Notepad

Info penyusun

Membuat Halaman Web Sendiri

1. 
   1
   Bukalah Notepad. Penyunting teks ini merupakan program bawaan yang tersedia di setiap komputer Windows, dan dapat ditemukan di menu Start. Setelah Notepad terbuka, klik File > Save As, lalu pilih All Files pada kolom File Type. Simpan berkas buatan Anda dalam format HTML. Umumnya, halaman utama sebuah situs memiliki nama berkas "index.html", dan berisi tautan ke seluruh halaman pada situs.
2. 
   2
   Pahami HTML. Tanda (tag) pada HTML (Hypertext Markup Language) berada dalam <kurung sudut>.
   Tanda tersebut berfungsi untuk membangun situs web Anda. Untuk mengakhiri kode HTML, gunakan tanda penutup (end tag), seperti </text>.Tanda penutup tersebut berguna untuk menutup berbagai tanda, seperti tanda huruf tebal atau paragraf.
3. 
   3
   Awali halaman web Anda dengan memasukkan tanda <html> di bagian atas berkas.
4. 
   4
   Gunakan tanda <head> untuk memasukkan berbagai informasi. Tanda <title> berguna untuk mengatur judul halaman, sementara tanda <meta> (opsional) berfungsi untuk memasukkan penjelasan mengenai isi halaman web. Tanda <meta> tersebut kemudian akan dibaca oleh mesin pencari, seperti Google.
5. 
   5
   Setelah memasukkan tanda <head>, beri judul halaman dengan tanda <title>, misalnya <title>wikiHow HTML</title>
6. 
   6
   Akhiri kepala situs dengan menggunakan tanda </head>
7. 
   7
   Gunakan tanda <body> untuk memasukkan isi halaman. Ingatlah bahwa tidak semua warna didukung oleh peramban. Misalnya, warna abu-abu gelap mungkin tidak didukung.
8. 
   8
   Tuliskan isi halaman web di antara tanda <body>. Misalnya, mulailah dengan membuat kepala situs. Kepala situs adalah bagian situs dengan huruf berukuran besar, dan dibuat dengan tanda <h1> hingga <h6>. Tanda <h1> dapat Anda gunakan untuk membuat kepala situs dengan ukuran huruf terbesar. Cobalah menggunakan tanda tersebut tepat di bawah tanda <body>, seperti <h1>Selamat datang di situs saya!</h1>. Pastikan Anda menutup tanda <h1> di akhir kalimat.
9. 
   9
   Buatlah paragraf di halaman dengan tanda <p>. Misalnya, tulislah <p>Tes paragraf!</p> Untuk membuat baris baru, gunakan tanda <br>, atau break.
10. 
    10
    Anda tentu tidak ingin halaman web yang Anda buat hanya berisi teks polos. Gunakan berbagai tanda berikut ini untuk memformat teks pada halaman web: <b> untuk menebalkan teks, <i> untuk memiringkan teks, dan <u> untuk menggarisbawahinya. Setelah menggunakan tanda di atas, jangan lupa untuk menutupnya!
11. 
    11
    Tambahkan gambar dengan tanda <img>untuk memperindah situs dan menambahkan informasi yang tidak dapat dijelaskan dalam bentuk teks. Tanda <img> memerlukan informasi tertentu agar berfungsi. Sintaksis lengkap tanda <img>mungkin berbentuk seperti ini: <img alt=dog src="dog.jpg" width=200 height=200>.
    Parameter src pada tanda berfungsi untuk menulis nama berkas gambar, dan width serta height berfungsi untuk menjelaskan panjang dan lebarnya.
12. 
    12
    Buatlah tautan yang mengarah ke halaman lain dengan tanda <a>, misalnya <a href="otherpage.html">Halaman lain</a>. Teks di tengah tanda adalah teks yang akan muncul di halaman, sementara parameter href berisi halaman tujuan. Dengan tautan, pengunjung dapat berpindah ke berbagai halaman di situs Anda dengan mudah.
13. 
    13
    Setelah selesai mengisi situs, akhiri halaman dengan menutup tanda </body>. Terakhir, tutup kode HTML dengan </html>
14. 
    14
    Simpan halaman web buatan Anda dengan ekstensi .html, dan bukalah di peramban favorit Anda untuk mengujinya.
15. 
    15
    Bacalah panduan berikut ini untuk mengunggah situs Anda ke internet.