Kota Bontang: Berkenalan dengan CSS

CSS kalau diperpanjang menjadi Cascading Style Sheets ( dalam bahasa kita "Bahasa lembar Gaya" Lucu?). Dalam dunia design web agar lebih komunikatif, CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML agar tampilan suatu website menjadi lebih menarik dan terstruktur.

Lalu apa bedanya dengan HTML? Kalau HTML yang merupakan Markup Language, sedangkan CSS hanya berperan di atribut “style” di setiap markup HTML. CSS bisa dibuat dalam file terpisah dengan extension “.css” ataupun diterapkan langsung pada atribut “style” di setiap markup HTML.

Lalu bagaimana menghubungkan HTML dan CSS?
Terdapat 3 sistem penulisan CSS yaitu :

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 :
```
<p style="font-family: sans-serif; color: #3366CC;">
```
```
Inline Style Sheet
```
```
</p>
```

Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.Contoh :
```
<style type="text/css">
```
```
h1 { 
```
```
font-family: sans-serif;
```
```
color: #3366CC;
```
```
}
```
```
</style>
```
```
</head>
```
```
<body>
```
```
<h1>First Title</h1>
```
```
<p>A paragraph of interesting content.</p>
```
```
</body>
```

External Style Sheet
Metode ini hampir sama dengan metode Embedded Style Sheet, saja sintax CSS ditulis pada file berbeda yang kemudian di panggil pada file HTML yang memerlukan sintax tersebut.
Contoh :
File Style.css
```
h1 {
```
```
font-family: sans-serif;
```
```
color: #3366CC;
```
```
}
```
File HTML
```
<head>
```
```
<title>External Style Sheet</title>
```
```
<link rel="stylesheet" type="text/css" href="style.css" />
```
```
</head>
```

Menulis Kode CSS, berkenalan dengan Selector, Property, dan Value

Penulisan CSS dibagi menjadi tiga bagian: Selector, Property, dan Value. Selector bisa diisi oleh:

HTML Markup: p, a, div, table, dan lain-lain

Class, ditandai dengan tanda titik sebelum nama kelas: .first, .section, dll

ID, ditandai dengan tanda pagar sebelum nama ID: #first, #section, dll

Pseudo-Class, ditandai dengan tanda titik dua sebelum nama kelas, terdiri dari :active, :hover, :focus, dll

Setiap Markup HTML bisa memiliki Property yang berbeda-beda. Ada Property yang berlaku untuk semua Markup dan ada yang tidak. Berikut ini tabel yang bisa anda jadikan referensi untuk Property: http://www.w3.org/TR/CSS2/propidx.html

Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly.
Dengan adanya CSS dapat memberi keuntungan :

halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly

anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.

Kota Bontang

Advertisement 300 X 250

Beauty Of Bontang

Bontang Sekitarnya

Bontang in Memories

ScreenShoot

Friday, September 16, 2011

Berkenalan dengan CSS

Menulis Kode CSS, berkenalan dengan Selector, Property, dan Value

No comments:

Post a Comment