CSS Dasar


CSS (Cascade Style Sheet) digunakan untuk dapat menambahkan style halaman kita, meningkatkan dan memperbaiki penyajian isi halaman. CSS juga dapat bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen XHTML yang diberikan. Warna, font, text size, background, susunan elemen pada halaman dan seluruh aspek presentasi isi, dikontrol oleh CSS.

CSS dibangun berdasarkan aturan-aturan yang berisi set intruksi yang dapat memerintahkan browser mengikuti aturan untuk mengubah penampilan elemen XHTML didasarkan pada nilai-nilai yang diberikan.

Untuk dapat menggunakan CSS kita harus menghubungkan style sheet ke dokumen HTML kita. Cara menggabungkan CSS ke dokumen HTML ada 3 cara, yaitu: 
  1. Inline Style
  2. Embedded Style Sheets
  3. External Style Sheets
  4. Inline Style


Kita dapat memasukkan deklarasi CSS dalam gaya opsional atribut sari setiap elemen dan markup. Tidak dibagun sebagai aturan, dan tidak ada selector karena properti dan nilainya melekat langsung pada elemen.




<h2 style="color: red; border-bottom: 1px">
Good eats for hungry geeks
</h2>
<p style="color: gray; margin-left: 10px">

Our fresh pizzas, hearty pasta dishes, and succulent desserts are sure to please.
And don't forget about our daily chalkboard specials!

</p>

Embedded Style Sheets Kita dapat menanamkan aturan CSS dalam elemen head dari dokumen, yan gaturan tersebut dapat digunakan pada dokumen yang sama dimana dideklarasikan. Embedded style sheet (kadang disebut internal style sheet).




<head>
                <style type="text/css">
                h2 { color: red; }
                p { color: gray; }
                .info {background:#cccccc; border:1px}
                .label {margin:5px; color:#efefef}
                </style>
</head>
External Style Sheets Model ini adalah yang terbaik yaitu menempatkan aturan CSS terpisah dengan dokumen XHTML, style sheet external langsung terhubung dengan dokumen. Kode CSS tersebut disimpan dalam file yang terpisah dengan extensi .css. Pendekatan ini benar-benar memisahkan antara presentasi dan isi dan struktur. Sebuah dokumen XHTML menghubungkan ke external style sheet melalui elemen head.

<head>
       <link rel="stylesheet"     type="text/css" href="styles.css" />
</head>

0 komentar:

Posting Komentar