CSS ( Cascading Style Sheets )

CSS ( Cascading Style Sheets )

CSS ( Cascading Style Sheets )

CSS ( Cascading Style Sheets )
CSS ( Cascading Style Sheets )

CSS adalah singkatan dari Cascading Style Sheets. Yang dimaksud CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Ada beberapa keuntungan dan kerugian dari CSS.

Dan keuntungan menggunakan CSS adalah jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Dan kekurangannya menggunakan CSS adalah tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Dalam CSS juga ada beberapa syntax. Berikut ini adalah syntax-syntax yang ada di CSS. Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

selector { property: value }

Format penulisan kalimat CSS:

h1 { color: red }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya. Contohnya adalah:

Contoh di atas menunjukkan: Selector: h1; Property: color;Value: red. Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

h1,h2,h3 { color: red }

Selector pun juga ada pengelempokannya. Kita dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

Yang perlu diperhatikan adalah penulisan h1,h2,h3 yang dipisahkan oleh koma.

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ). Contoh:

Maksud dari contoh di atas adalah, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan valuesnya di indent. Supaya terlihat lebih rapih dan mudah untuk dibaca, tetapi tidak diharuskan. Contoh:

Comment pada CSS adalah dengan menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda. Contoh:

/* Tulis komentar anda di sini */

p

{

text-align: justify;

/* Tulis komentar anda di sini */

color: blue;

font-family: arial;

}

Implementasi dalam CSS ada Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

Inline CSS
<P style=”color:blue”>
Isi paragraf.
</p>

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja. Contoh:

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Contoh:

Baca Juga :