Menggunakan CSS (Cascading Style Sheet) 2

Setelah saya menulis artikel "Menggunakan CSS (Cascading Style Sheet) 1", sekarang saya akan membahas bagaimana cara menulis kode CSS nya.

Kode CSS itu banyak banget, untuk banyak fungsi juga. Bisa buat mengatur font, layout, warna situs web, warna hyperlink dan banyak lagi. Di sini saya akan membahas yang dasar2nya aja.

Penulisan CSS itu diawali dengan "nama CSS", dilanjutkan "kurung buka kurawal { ", dilanjutkan "properti CSS" yang ditutup dengan "titik koma ; " di setiap akhir properti, terakhir ditutup "kurung tutup kurawal } ".

Jadi formatnya begini.

-----------------mulai kode css----------------------

"nama CSS"
"kurung buka kurawal"
"properti css""titik koma"
"properti css""titik koma"
"kurung tutup kurawal"


-----------------akhir kode css----------------------

itu formatnya, penulisan benernya seperti ini

-----------------mulai kode css----------------------

.style1
{
font-family: Arial;
font-size: 12pt;
color: #FF9900;
}

-----------------akhir kode css----------------------

Tipe CSS itu ada beberapa, seperti:

-A- CSS yang terikat dengan tag HTML.
CSS ini langsung menentukan properti sebuah tag HTML dan tidak bisa digunakan tag lain.
Jadi kode CSS ini hanya bisa dipakai satu jenis tag saja. Misal, tag <h1> saja atau tag <p> saja dsb.

contoh:

-----------------mulai kode css----------------------

h1
{
font-family: Arial;
font-size: 24pt;
color: #FF0000;
}

-----------------akhir kode css----------------------

keterangan:
++ kode css di atas hanya bisa digunakan oleh tag <h1> saja. Jadi semua tag <h1> akan memiliki properti font Arial ukuran 24pt dengan warna merah.
++ jadi css tipe ini penulisan namanya langsung menggunakan tag HTML.

contoh di bawah akan merubah tag <p> dengan properti (font: tahoma, ukuran 10, warna hitam) dan <h2> dengan properti (font: verdana, ukuran 16, warna biru).

-----------------mulai kode css----------------------

p
{
font-family: Tahoma;
font-size: 10pt;
color: #000000;
}

h2
{
font-family: Verdana;
}

-----------------akhir kode css----------------------

oke, lanjut ke tipe berikutnya.

-B- CSS yang tidak terikat tag
CSS ini bisa menentukan properti tag yang menggunakan nama "class" atau "id" CSS yang sama.

Contoh:

-----------------mulai kode css----------------------

.gaya1
{
font-family: Arial;
font-size: 24pt;
color: #FF0000;
}

#gaya2
{
font-family: Arial;
font-size: 24pt;
color: #FF0000;
}

-----------------akhir kode css----------------------

keterangan:
++ tidak terikat tag HTML tertentu. jadi tag <p> atau <h1> atau <hr> atau <a> bisa menggunakannya.
++ kode CSS yang "gaya1" menggunakan tipe "class" karena nama style nya diawali karakter "titik" [.].
++ nanti di tag HTML nya ditambah atribut "class" supaya bisa menggunakan CSS nya.
++ misal kita mau menggunakannya di <p> rubah tagnya jadi <p class="gaya1">
++ misal mau pakai di <h2> rubah tagnya jadi <h2 class="gaya1">.
++ yang "gaya2" menggunakan tipe "id" karena nama stylenya diawali karakter "pagar" [#].
++ untuk penggunaanya cukup rubah "class" jadi "id"
++ misal kita mau pake di <p> rubah jadi <p id="gaya2">
++ bedanya "class" dan "id" adalah, "class" bisa dipakai banyak tag sedangkan "id" tidak bisa.
++ jadi kalau sudah ada satu tag yang menggunakan style "gaya2", tag lain tidak bisa menggunakannya lagi.

lanjut lagi..

-C- CSS yang terikat dengan tag dan nama class/id nya

tipe ini kombinasi -A- dan -B-. Tipe ini menentukan satu jenis tag saja yang menggunakan nama class yang sama.

-----------------mulai kode css----------------------

h1.merah
{
font-family: Arial;
font-size: 24pt;
color: #FF0000;
}

h1.biru
{
font-family: Arial;
font-size: 24pt;
color: #0000FF;
}

p.kecil
{
font-family: Arial;
font-size: 8pt;
color: #000000;
}

p.besar
{
font-family: Arial;
font-size: 12pt;
color: #000000;
}

-----------------akhir kode css----------------------

keterangan:
++ css yang "h1.merah" hanya berlaku pada tag <h1 class="merah"> saja.
++ css yang "h1.biru" hanya berlaku pada tag <h1 class="biru"> saja.
++ css yang "p.kecil" hanya berlaku pada tag <p class="kecil"> saja.
++ css yang "p.besar" hanya berlaku pada tag <p class="besar"> saja.

Gimana? Bingung ya?

Nah, di bawah ini ada kode lengkapnya dengan HTML nya. Saya menggunakan cara penulisan kode CSS internal, yaitu kode CSS nya "nyatu" sama HTML nya.

-----------------mulai kode html----------------------

<html>
<head>
<title>Belajar CSS</title>

<style type="text/css">

h1
{
font-family: Arial;
font-size: 24pt;
color: #000000;
}

h1.stylemerah
{
font-family: Arial;
font-size: 24pt;
color: #FF0000;
}

.biru
{
font-family: Arial;
font-size: 24pt;
color: #0000FF;
}

.orange
{
font-family: Arial;
font-size: 12pt;
color: #FF9900;
}

a.keren
{
font-family: Arial;
font-size: 12pt;
color: #990000;
text-decoration: none;
}

a.keren:hover
{
font-family: Arial;
font-size: 12pt;
color: #CC0000;
text-decoration: underline;
}

</style>

</head>

<body>
<h1>ini adalah teks h1 yang diatur css terikat</h1>
<h1 class="stylemerah">ini adalah teks h1 yang diatur css kombinasi</h1>
<h1 class="biru">ini adalah teks h1 yang diatur css tak terikat</h1>
<p class="biru">ini adalah teks yang diatur css tak terikat</p>
<p class="orange">ini adalah teks yang diatur css tak terikat</p>
<a href="#">link ini tidak diatur style</a>
<br />
<br />
<a href="#" class="keren">link ini diatur style</a>
</body>
</html>

-----------------akhir kode html----------------------

Yak, sekian dulu artikel CSS nya. Mudah2an bisa ngerti yah... Read More...