Tiga cara menyisipkan CSS

Singkatnya CSS terdiri dari dua bagian utama, yaitu: selector (pemilih) dan satu atau lebih declarations (deklarasi).
Selector digunakan pada elemen html yang ingin bergaya.
Setiap deklarasi terdiri dari properti dan nilai. properti ini adalah atribut yang ingin di ubah. Setiap deklarasi di akhiri tanda titik koma dan kelompok deklarasi dikelilingi kurung kurawal. contoh

p.center {text-align:center; color:black;}

p.center = selector
text-align = property
center = value (nilai)
text-align:center; = declarations

Pemilih ID & Class.
Pemilih dibagi menjadi dua: pemilih menggunakan “ID” dan pemilih menggunakan “Class”

Pemilih “ID” digunakan untuk menentukan gaya elemen tunggal yang unik. ID pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. contoh

#content {background:white; color:black; }

Pemilih “Class” digunakan untuk menentukan gaya sekelompok elemen. Berbeda dengan pemilih “ID”, pemilih Class lebih sering digunakan pada beberapa elemen. Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk setiap elemen HTML dengan kelas yang sama. Pemilih “Class” menggunakan atribut class HTML, dan didefinisikan dengan “.“. contoh

.center {text-align:center;}

Tiga cara untuk menyisipkan CSS
- internal style sheet
- external style sheet
- inline style sheet

Internal style sheet adalah CSS di tulis langsung dibagian kepala html diantara <head> dan </head>. contoh

<head>
<style type="text/css">
body {font-family:Arial, Helvetica; background:silver;}
p {color:black;}
</style>
</head>

External style sheet di tulis dalam file terpisah dengan ekstensi .css yang di link dibagian kepala html menggunakan tag <link>. contoh

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

Catatan: Jika internal style di tulis setelah external style sheet menggunakan selector dan properti yang sama maka yang akan bekerja adalah internal style sheet. Contoh

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
p {margin-bottom:15px; color:black;}
</style>
</head>

Inline style sheet ditulis langsung pada elemen html. Contoh

<p style="margin-bottom:15px; color:red;">Ini adalah paragraf teks merah</p>

Dengan menyisipkan CSS pada sebuah tag tertentu maka browser akan membaca CSS pada elemen ini sebagai poin tertinggi mengalahkan internal style sheet dan external style sheet.

CATEGORY : CSS Basic TAG : belajar, code, css, dasar, desain, standar at Thursday, 7 October, 2010