Anda di halaman 1dari 7

Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel

tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang
disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan
sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.
Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style,
Internal Style Sheets, dan External Style Sheets.

Metode Inline Style


Metode Inline Style adalah cara menginput CSS langsung kedalam tag HTML yang
diperlukan dengan menggunakan atribut style, contoh penggunaan Metode Inline Style
CSS adalah sebagai berikut:
1
2 <!DOCTYPE html>
3 <html>
<head>
4
<title>Contoh Inline Style CSS</title>
5 </head>
<body>
6
<h2 style="background-color:black; color:white" >
7
Text ini akan bewarna putih dan background warna hitam
8
</h2>
9
</body>
10 </html>
11

Pengertian Selector CSS


Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,
CSS membutuhkan suatu cara untuk mengaitkan atau menghubungkan kode CSS
dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri. Efisiensi dari selector
ini tergantung dari desain dan kemampuan programmer dalam memakainya.
Mengenai selector, akan kita bahas secara lebih detail dalam tutorial CSS selanjutnya.

Pengertian Property CSS


Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag
HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan
hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai
untuk seluruh selector. Contoh dari properti seperti: font, boder, padding, dan
background-color.

Pengertian Value CSS

Value CSS adalah nilai dari property. Misalkan untuk property background-color yang
digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau
nilainya dapat berupa red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada
gambar dibawah ini:

Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag
header (<h2>), paragraf(<p>), dan list (<ol>). Bagi anda yang belum memahami
HTML, keseluruhan tag ini telah kita bahas pada Tutorial Belajar HTML.
Perhatikan juga pada bagian <head> dari belajar_css.html tersebut saya juga
menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari
tag HTML yang ada juga telah memiliki atribut seperti class dan id yang siap
di-style menggunakan CSS.
Tujuan pertama kita, adalah:
1. Membuat seluruh tag header <h2> berwarna biru

Karena kita menginginkan seluruh tag berwarna biru, maka tinggal menggunakan CSS
Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bagian
head:
1 h2 {
color: blue;
2
}
3

Tujuan kedua adalah :


2. Membuat seluruh tag header <h3> juga berwarna biru

Untuk keperluan ini, kita tinggal menambahkan kode CSS seperti contoh <h2>
sebelumnya, sebagai berikut:

1 h2 {
2
color: blue;
}
3
4 h3 {
color: blue;
5
}
6

Namun CSS memiliki cara yang lebih efisien jika yang kita inginkan adalah style yang
sama untuk kedua tag. Kita bisa menggabungkan kode CSS diatas menjadi:
1
2
3

h2 , h3 {
color: blue;
}

Tanda koma (,) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag
akan berwarna biru. Tidak ada batasan seberapa banyak selector yang bisa digunakan.
Katakan kita ingin seluruh tag header dari <h1> sampai <h6> bewarna biru, maka
kode CSSnya adalah:
1 h1 , h2, h3 , h4, h5 , h6{
color: blue;
2
}
3

Tujuan ketiga :
3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna merah

Jika yang kita maksud adalah seluruh tag <strong> dimanapun berada, maka kode
CSSnya cukup sebagai berikut:
1
2
3

strong {
color:red;
}

Namun jika ditambahkan syarat hanya yang berada di dalam tag <p>, maka kita harus
menyeleksinya menjadi:
1
2
3

p strong {
color:red;
}

Maksud dari kode p strong adalah seluruh tag <strong> yang berada di dalam tag
<p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi.
Untuk contoh extreme, katakan kita memiliki halaman HTML yang cukup rumit,
sehingga kita menginginkan warna merah untuk seluruh tag <i> yang berada di dalam
tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>, maka kode
CSSnya adalah:
1
2
3

h2 span i {
color:red;
}

Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang
paling terakhir, dimana dalam contoh diatas, hanya tag <i> saja yang akan bewarna
merah.
Tujuan keempat kita:
4. Seluruh tag <h2> yang memiliki class judul, dan seluruh tag yang
memiliki class paragraf menjadi italic (huruf miring)

Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali
ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah:
1 h2.judul , .paragraf {
font-style: italic;
2
}
3

h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan
.paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun
tag tersebut.
Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini:
5. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id
belajar_html, tag p dengan id belajar_css dan seluruh tag h3 yang
memiliki class subheader

Tujuan diatas terkesan rumit, namun jika anda telah paham tujuan 1 sampai dengan 4
sebelumnya, maka kode CSS berikut akan menjelaskannya:
1 #belajar_html, p#belajar_css, h3.subheader {
font-size:14pt;
2
}
3

Sebagai penutup, hasil akhir dari halaman HTML belajar_css.html kita adalah sebagai
berikut
1 <!DOCTYPE html>
2 <html>
<head>
3
<title>Belajar CSS</title>
4
5
<style type="text/css">
6
h2 , h3{
7
color: blue;
8
}
p strong {
9
color:red;
1
}
0
h2.judul , .paragraf {
1
font-style: italic;
1
}
1
#belajar_html, p#belajar_css, h3.subheader {
2

1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3

font-size:14pt;
}
</style>
</head>
<body>
<h2>Belajar CSS</h2>
<p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>
<p id="belajar_html" >Saya sedang belajar HTML dari
<a href="http://www.duniailkom.com" target="_blank">Duniailkom</a>
akan terbuka pada tab baru</p>
<p id="belajar_css">
Saya sedang belajar CSS, mohon jangan diganggu</p>
<br />
<h3>Daftar Belanjaan</h3>
<ol>
<li><em>Minyak Goreng</em></li>
<li>Sabun Mandi</li>
<li>Deterjen</li>
<li>Shampoo</li>
<li>Obat Nyamuk</li>
</ol>
</body>
</html>

6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4

Sebagai contoh, anda tentunya tidak bingung membaca kode CSS berikut:
1 table#daftar_hadir, table#daftar_kuliah {
2
font-size:14pt;
}
3
4
5 div.header, div.footer, div#main_menu {
width:960px;
6
}
7
Terlepas dari maksud property CSS seperti font-size:14pt; dan width:960px; (yang akan
kita pelajari nantinya), contoh selector CSS yang kedua ini merupakan selector yang
sering digunakan untuk manipulasi tag div dalam merancang desain web,
Untuk lebih mudah memahami, dibawah ini adalah contoh kode CSS:
1
2 body {
font-size: 14px;
3
color: navy;
4
}
5 p {
background-color:white;
6
color:black;
7
font-weight:bold;
8
}
9 h1, h2 {
10
text-decoration: underline
}
11
12
Seperti yang dapat kita lihat dari contoh diatas, aturan penulisan CSS adalah:

Selector di tempatkan pada awal penulisan CSS. Dalam contoh diatas, body, p,
h1 dan h2 adalah selector. Khusus untuk selector yang lebih dari 1 (seperti pada

contoh selector terakhir: h1,h2) untuk memisahkan kedua selector tersebut,


digunakan tanda koma (,)

Setelah penulisan selector, seluruh isi dari property dan valuenya (nilainya),
berada di antara kurung kurawal { dan }.

Diantara property satu dengan yang lainnya, dipisahkan dengan tanda titik
koma (;)

Diantara property dengan value (nilai), dipisahkan dengan anda titik dua (:).

Untuk property yang memiliki 2 kata , spasi diantaranya digantikan dengan


tanda hubung (-), contohnya: background-color dan border-left.

Untuk properti yang berada pada baris terakhir, kita boleh mengabaikan tanda
; sebagai tanda tutup, tetapi disarankan agar tetap menggunakan tanda ;,
karena bisa saja kita lupa menuliskan tanda titik koma pada saat menambahkan
properti lainnya. Contoh property tanpa tanda ; dapat di lihat pada contoh
text-decoration: underline.