Dasar Dasar CSS

Pengertian CSS (Cascading Style Sheet)

Dalam penjelasannya di kutip dari wikipedia, CSS adalah kumpulan kode yang di gunakan untuk mendefinisikan desain dari bahasa markup dimana bahasa markup ini salah satunya adalah HTML.

CSS biasanya selalu di kaitkan dengan HTML karena kedua bahasa ini saling melengkapi. HTML digunakan untuk memformat struktur halaman web sedangkan CSS di gunakan untuk membuat tampilan halaman web. CSS bukan merupakan bahasa pemrograman.

Di dalam CSS kita dapat merubah berbagai macam ukuran gambar, text, jenis font, warna text, warna tabel, ukuran border dan lain sebagainya masih banayak lagi. Dengan CSS kita bisa menmapilkan halaman yang sama namun dengan format yang berbeda.

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).

Berikut penjelasannya

• Selector adalah HTML element yang ingin dibuat style nya.

• Declaration  merupakan isi dari property dan nilai dari CSS.

• Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

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

CSS Coment

Komentar digunakan untuk menandai dan menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code. Komentar ini akan diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″

#para1
{
text-align:center;
color:red;
}

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”

Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :

.center {text-align:center;}

Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :

p.center {text-align:center;}