Mengenal CSS Dasar


Tutorial kali ini tentang memahami CSS. Seperti yang Anda ketehui, sebelum memasuki ke tahap CSS Anda harus sudah paham dengan penggunaan script di HTML.

CSS adalah kependekatan dari Cascanding Style Sheet. CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstruktur komponen-komponen web yang beragam.

Langsung saja ke syntax CSS :

Syntax CSS

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


Sector : HTML element yang ingin dibuat style-nya.
Declaration : Isi dari property dan nilai dari CSS.
Sedangkan pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; ).

Contoh penulisan CSS :

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}

CSS Koment

Komentar digunakan untuk membuat keterangan/menjelaskan kode. Komentar tidak akan tampil di web browser. Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*contoh komentar yang akan digunakan*/
p
{
text-align:center;
/*ini adalah komentar lainnya*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id biasanya digunakan untuk menentukan style untuk sebuah 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, sebagai penentuan style untuk lebih dari satu atau sekelompok elemen. Selctor class berbeda dengan pemilih id. Dengan ini memungkinkan anda untuk menentukan style dan elemen HTML dengan class yang sama.

Berikut Contoh dengan class = "center"
.center {text-align:center;}
Atau bisa menuliskannya seperti dibawah ini :
p.center {text-align:center;}
ps : untuk penulisan class sebaiknya dengan huruf dan tidak dengan angka.

Sumber : masih kosong
Mengenal CSS Dasar Mengenal CSS Dasar Reviewed by Ardy S on May 27, 2015 Rating: 5

No comments:

Powered by Blogger.