Mengenal dan Belajar CSS Dasar

Belajar CSS Dasar

CSS adalah script yang digunakan untuk memperindah desain tampilan web, sehingga web akan terlihat lebih menarik, CSS juga digunakan dalam pembuatan layout alternatif pengganti tabel, yaitu pembuatan layout tidak lagi menggunakan table, karena jika menggunakan table maka beratnya layout yang dihasilkan karena begitu banyak kode-kode dari hasil penggunaan table. Untuk yang terbaru CSS dikembangkan ke versi CSS3 yang mempunyai beberapa tambahan fitur misalnya membuat text shadow, box shadow, dan lain lain.

Syntax CSS

Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Atau berati juga Syntax/kalimat CSS adalah aturan atau kaidah penulisan text CSS.

Format Penulisan CSS
Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value. Dengan Format penulisan kalimat CSS :
selector { property: value }
Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:
Contoh 1 :
h1 { color:red }
Contoh di atas menunjukkan
- Selector: h1
- Property: color
- Value: red
Jika diterjemahkan ke kalimat bahasa yang sederhana, maksudnya adalah: Mengatur warna dari tag h1 ke warna merah (red).
Atau contoh 2 :
body {
    background-color: #cccccc;
    font-family: "Calibri", Verdana, Tahoma;
}
Kode CSS diatas bisa berarti elemen
body (tag < body >) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer/perangkat user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal "Times New Roman".

Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara memisahkannya dengan menggunakan koma. Misalkan anda mau mengatur
 agar tag h1, h2 sampai h6 semua
 menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3,h4,h5,h6 { color:red }
Perhatikan penulisan h1,h2,h3,h4,h5,h6 dipisahkan oleh koma.
 Jika diterjemahkan ke kalimat bahasa sederhana, maksudnya adalah:
Mengatur warna dari h1 sampai h6 ke warna merah (red).

Penggunaan Banyak Properties
Untuk menambahkan property lain dalam suatu selector, anda bisa menggunakan pemisah titik koma ( ; ).
Contoh :
h1,h2,h3,h4,h5,h6 {color: red;font-family:arial;  font-size:20px; }
Jika diterjemahkan ke kalimat bahasa sederhana, maksudnya adalah:
Mengatur warna dari h1 sampai h6 ke warna merah (red), dengan jenis Font Arial, Ukuran 20px.

Komentar Pada CSS
Ketika anda sedang desain layout website biasanya akan menggunakan banyak text CSS, untuk mempermudah mengenali text CSS yang anda buat sebaiknya anda tambahkan komentar diatas atau di samping Text CSS yang
 anda buat. Untuk menambahkan
 komentar pada CSS anda bisa menggunakan kode pembuka /* dan penutup */ , semua text CSS yang ada di antara tanda tersebut tidak akan dihiraukan dan tidak akan dijalankan oleh browser, tetapi hanya untuk cacatan pembuat website.

Kiranya cukup ini dulu untuk postingan kali ini, terima kasih telah berkunjung dan membaca artikel Mengenal dan Belajar CSS Dasar, semoga bermanfaat.
@ Salam Berbagi @