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:
.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 :
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:
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.