Materi belajar css selanjutnya adalah tentang id CSS dan class CSS. Id CSS digunakan untuk menentukan style dari elemen yang unik. Id selector menggunakan atribut id elemen dan didefinisikan dengan “#” html. Sebagai contoh aturan id dibawah ini akan diaplikasikan pada id elemen “belajar1” :
#Belajar1
{
text-align:center;
color:red;
}
CSS juga mengijinkan kita untuk menyatukan elemen-elemen html secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class CSS. Selector class CSS menggunakan atribut html dan didefinisikan dengan “.”Pada contoh di bawah, semua elemen HTML dengan class = “center” akan menjadi center-aligned:
?1 .center {text-align:center;}
Anda juga bisa menentukan hanya pada elemen html khusus yang akan dibuat class CSS, Pada contoh di bawah, semua elemen p dengan class = “center” akan menjadi center-align :
?1 p.center {text-align:center;}
Satu dari beberapa kehebatan tekhnologi css ini adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda. Jadi jika anda ingin merubah tampilan situs anda tinggal mengedit satu file saja. Maka jangan ragu-ragu untuk terus belajar css.
Okey, mari kita lanjutkan tentang bagaimana cara kode css ke dalam situs kita. Ada 3 jalan untuk memasukkan style sheet yaitu external style sheet, internal style sheet dan inline style.
External sheet ideal diaplikasikan pada banyak halaman. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Style sheet eksternal dapat ditulis dalam editor teks apapun. File tersebut seharusnya tidak berisi tag html. Style sheet Anda harus disimpan dengan ekstensi css.. Seperti contoh di bawah ini:
?1
2
3
4
5 Hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Internal style sheet digunakan pada dokumen tunggal yang unik. Kita mendefinisikan internal style pada head dalam halaman html menggunakan <style> seperti contoh dibawah ini :
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Sedangkan untuk menggunakan Inline style kita dapat menggunakan atribut style yang dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Ayo sekarang dicoba! Sampai disini kalian masih bersemangat belajar css kan? Nah css juga menawarkan berbagai macam cara untuk mengganti warna. Penasaran kan bagaimana caranya? Kalau begitu kita lanjutkan ke belajar css seri 3.