Menurut rekomendasi dari W3C, untuk pembuatan suatu
website, untuk menjadi kerangka dari web tersebut anda perlu menggunakan HTML
dan untuk design dari website anda dituntut untuk menggunakan CSS.
Sebagai
contoh :
Jika anda
akan membuat suatu artikel web dengan align center, maka pada penulisan pada
HTML anda tidak dianjurkan untuk membuat Tag ‘Align ‘ tetapi cukup hanya
menulis artikelnya saja dan untuk membuat supaya artikel tersebut sesuai dengan
design anda menggunakan CSS.
Kesimpulannya
adalah :
HTML untuk membangun dasar kerangka dan
penulisan artikel saja.
CSS berfungsi untuk mendesign halaman website .
Aturan penulisan CSS
Dalam penulisan CSS ada aturan yang digunakan, pada
CSS ada komponen utama dalam penulisannya yaitu Selektor dan Deklarator.
Perhatikan contoh dasar penulisan CSS dibawah ini :
Selektor { Deklarator};
Selektor merupakan Tag dari penulisan HTML semisal
H1,H2,p,b dll
Deklarator adalah yang memerintahkan browser untuk
membuat tampilan pada selector sesuai dengan perintah yang ada pada deklarator.
Sedangkan deklarator terdiri dari Property dan Value
Contoh kecil :
Biasanya pada penulisan artikel banyak digunakan
Tag <p> atau paragraph, jika anda ingin merubah penulisan font dari
artikel anda pada paragraph, pada CSS penulisannya adalah sebagai berikut :
p
{font-family: verdana};
Merupakan selektor
dari paragraph dan yang berada dalam kurung kurawal adalah deklaratornya yang
memerintahkan browser untuk menampilkan artikel paragraph dengan font verdana.
Sedangkan font-family adalah Property dan verdana adalah Value
Detailnya
rumusnya sebagai berikut ini :
Selektor { Property : Value };
|
Rumus diatas merupakan kunci anda untuk menguasai
CSS, dan terus anda ingat
Sebenarnya CSS itu sangat sederhana sekali dan
simple.
Selain selector yang bisa ditulis secara langsung
dengan menghilangkan tanda <…> semisal
<p> cukup anda tulis p saja, ada selektor lain yang tidak kalah
pentingnya yaitu selector ID dan selektor Class.
Coba anda bayangkan jika anda mau merubah tampilan
tag <p> dan tampilannya
berlainan semisal untuk font ,anda bisa menentukan tag <p> di CSS tetapi jika pada penulisannya p {font-family:arial} maka semua tag <p> akan dirubah menjadi font
Arial semua.
Bagaimana jika salah satu pada Tag
<p> anda menginginkan Font nya dirubah menjadi Verdana, untuk itu anda
membutuhkan Selector ID atau Class.
Selektor ID
Fungsi dari selektor Id adalah untuk memberi tanda
supaya pada tag HTML yang sudah diberi ID bisa di beri format lain.
Sebagai
contoh :
Penulisan pada Tag HTML
<p
id= “toc”> disini anda menulis artikel </p>
<p>
Tulisan artikel anda yang lain</p>
Disini anda memberi Selektor ID
dengan nama toc, dan pada CSS anda
bisa memberi code sebagai berikut ini : P (font-family:verdana}
#toc{ font-family:arial}
Pada selector ID penulisan ID ditandai menggunakan
tanda ‘ # ’
Yang berarti artikel pada p yang sudah diberi ID
akan dibaca font menjadi arial sedangkan sedangkan p yang lain dibaca
menggunakan font verdana.
Selektor Class
Untuk selektor Class fungsinya sama dengan selektor
ID namun pada selektor Class anda bisa memberi lebih dari satu selector class
tetapi pada selektor ID anda tidak bisa memberi nama ID yang sama.
Contoh
penulisan Selektor Class :
Pada Tag HTML
<p class=”media”>
artikel anda disini</p>
Pada CSS :
.media
{font-family:calibri}
Pada selektor Class penulisan Class ditandai
menggunakan tanda ‘ . ’
Kesimpulannya
adalah :
Pada kedua selektor ini fungsinya sama, namun yang membedakan
adalah pada selektor ID anda tidak bisa membuat lebih dari satu dengan kata
lain selector ID digunakan untuk yang spesifik.
Sedangkan selektor class anda bisa menaruh Selektor
Class pada Tag HTML lebih dari satu, namun semua itu nantinya tergantung akan
kebutuhan anda.
1 Comments
Akan langsung dicoba caranya ni gan.
ReplyDeletebagi agan yang berminat belajar komputer bisa dilihat di situs berikut ini Kursus Komputer di Denpasar