Meski banyak yang telah mengulas tentang CSS (Cascading Style Sheet) namun saya tak berkecil hati untuk mengulasnya di blog saya sendiri. Semoga bisa menambah referensi bagi Anda.
Melihat dari kepanjangannya CSS merupakan bahasa style sheet atau style language, yang merupakan bahasa komputer yang digunakan untuk mengatur bagaimana sebuah element dalam sebuah halaman web ditampilkan. Seperti ukuran huruf, warna, layout dan lain-lain.
Pada umumnya CSS digunakan untuk memformat tampilan halaman web yang menggunakan bahasa HTML dan XHTML. Sehingga dengan CSS kita bisa menampilkan halaman web yang sama dengan format/style berbeda seperti contohnya jika halaman web dilihat melalui layar monitor, layar handphone atau jika di cetak pada kertas(print).
Syntax CSS / penulisan CSS
h1 { color: #0789de; }Penjelasan: h1 dinamakan selector, sedangkan yang diapit oleh '{ }' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.
Selector ini mengacu pada HTML tag/markup.
color dinamakan property ; #0789de dinamakan value;
Jadi syntax dasarnya dari penulisan css diatas seperti ini:
selector { property : value; }
Setiap selector bisa mempunyai beberapa properti, setiap properti dan value(nilai) diakhiri dengan tanda titik koma / semicolon, lihat syntax dasar diatas, setelah penulisan value diakhiri dengan tanda semicolon.
Menggabungkan beberapa Selector
Penulisan selector tidak hanya untuk satu element HTML saja, Anda bisa menggabungkan lebih dari satu element HTML. Contohnya seperti berikut:
h1, h2, h3 {
color: #222222;
font-family : Tahoma, Verdana, sans-serif;
}
Penjelasan diatas, untuk tag HTML <h1>, <h2> dan <h3> akan mempunyai style yang sama yaitu berwarna abu-abu/gelap dan jenis huruf Tahoma untuk alternatif pertama dan Verdana untuk alternatif kedua, pemilihan jenis huruf ini bergantung pada komputer user. Jika huruf yang kita set di CSS tidak ada di komputer user, maka pilihan akan jatuh pada jenis huruf berikutnya.
Pewarisan / inheritance
Aduuh jadi inget OOP nih kalau denger kata pewarisan/inheritance hehe... Baiklah mungkin seperti ini penjelasan nya.. pada saat anda menuliskan style seperti berikut :body { font-family : Verdana }
maka semua tag HTML akan mempunyai jenis huruf yang sama, sampai anda melakukan perubahan untuk element tertentu dalam body html. Mari kita lihat contoh nya:<html> <head> <title> sample </title> </head> <body> <h1> judul dengan jenis huruf Tahoma </h1> <p> jenis huruf akan mengikuti body yaitu georgia </p> </body> </html>dengan css seperti berikut :
body { font-family : Georgia ; }
h1{font-family : Tahoma, Arial ; }
Penjelasan: tag <h1> dan <p> disimpan di dalam tag <body> dan <h1> mempunyai jenis huruf yang berbeda dengan body. Saya tidak memasang jenis huruf untuk <p> . Ini untuk memperlihatkan bahwa jenis huruf pada tag <p> akan sama dengan <body> . Semua tag HTML di dalam body akan mempunyai jenis huruf Georgia, kecuali untuk tag <h1>.
Tutorial berikutnya kita akan coba membahas tentang ID Selector dan Class Selector.
Selamat Mencoba..
2 comments:
Pertamax...nih....ya tambah ilmu...nih
blogwalking here,please visit me back dear, thanks :-)
Posting Komentar