Cara penulisan CSS

Penulisan CSS , Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h 1 { c o l o r : # 0 7 8 9 d e ; }


Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.

Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.

Selain itu ada tiga metode penulisan CSS atribut, yaitu : 1. Inline Style , Sheet CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan metode Inline Style Sheet :

< h t m l >
< h e a d >
< t i t l e > C o n t o h B e n t u k I n l i n e < / t i t l e >
< / h e a d >
< b o d y b g c o l o r = " # F F F F F F " >
< p i d = " c t h 1 " > I n i a d a l a h c o n t o h t a g P t a n p a d i f o r m a t m e n g g u n a k a n C S S < / p >
< p i d = " c t h 2 " s t y l e = " f o n t - s i z e : 2 0 p t " > T a g P i n i d i f o r m a t d e n g a n b e s a r f o n t 2 0 p o i n t < / p >
< p i d = " c t h 3 " s t y l e = " f o n t - s i z e : 1 4 p t ; c o l o r : r e d " > T a g P i n i d i f o r m a t d e n g a n b e s a r f o n t 1 4 p o i n t , d a n m e n g g u n a k a n w a r n a m e r a h < / p >
< / b o d y >
< / h t m l >

2. Embedded Style,
Sheet CSS didefinisikan terlebih dahulu dalam tag di atas tag . Pada pendefinisian ini disebutkan atribut- atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh penggunaan CSS dengan metode Embedded Style Sheet :
< h t m l >
< h e a d >
< t i t l e > C o n t o h B e n t u k E m b e d d e d / t i t l e >
< / h e a d >
< s t y l e > b o d y { b a c k g r o u n d : # 0 0 0 0 F F ; c o l o r : # F F F F 0 0 ; m a r g i n - l e f t : 0 . 5 i n } h 1 { f o n t - s i z e : 1 8 p t ; c o l o r : # F F 0 0 0 0 } p { f o n t - s i z e : 1 2 p t ; f o n t - f a m i l y : a r i a l ; t e x t - i n d e n t : 0 . 5 i n } < / s t y l e >
< b o d y > < h 1 i d = " c t h 1 " > J u d u l i n i b e r u k u r a n 1 8 d e n g a n w a r n a m e r a h ! < / h 1 >
< p i d = " c t h 2 " > T a g p i n i d i f o r m a t d e n g a n b e s a r f o n t 1 2 p o i n t d e n g a n t i p e f o n t A r i a l d a n m e m p u n y a i i d e n t a s i 0 . 5 i n c h < / p >
< p i d = " c t h 3 " > Y a n g p e r l u d i p e r h a t i k a n j u g a b a h w a b o d y d i s i n i t e l a h d i f o r m a t d e n g a n m a r g i n k i r i 0 . 5 i n c h d a n w a r n a b a c k g r o u n d b i r u < / p >
< / b o d y >
< / h t m l >


3. Linked Style,

Sheet Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS.
Kemudian berkas lain tersebut disimpan dalam format .css . Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag yang dituliskan di antara tag ... . Contoh (simpan dengan nama contoh.css) :


< s t y l e > b o d y { b a c k g r o u n d : # 0 0 0 0 F F ; c o l o r : # F F F F 0 0 ; m a r g i n - l e f t : 0 . 5 i n } h 1 { f o n t - s i z e : 1 8 p t ; c o l o r : # F F 0 0 0 0 } p { f o n t - s i z e : 1 2 p t ; f o n t - f a m i l y : a r i a l ; t e x t - i n d e n t : 0 . 5 i n }
< / s t y l e >



Sumber : wikipedia