Anda di halaman 1dari 8

DOWNLOAD SELENGKAPNYA di

http://www.ziddu.com/download/5170920/MenguakRahasiaCSS.pdf.html

(silakan copy link dari description)

Pengenalan CSS

Sebelum Anda dapat menguasai CSS, tentunya Anda harus memahami terlebih
dahulu pengertian dari CSS itu sendiri. Dalam bab ini, Anda akan mengetahui sejarah
singkat lahirnya CSS, kegunaannya, dan cara penggunaannya.

A. Sejarah Singkat CSS

Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan
CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web.
Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet
Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan
TAG sendiri untuk mengatur tampilan web.

CSS level 1 mendukung pengaturan tampilan dalam hal:

1. Font (jenis, ketebalan),

2. Warna teks, latar belakang, dan elemen lainnya,

3. Text attributes, misalnya spasi antar baris, kata, dan huruf,

Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan


standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2
ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada
International accesibility and capability khususnya media-specific CSS.

Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3
dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai
sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau
modul.

halaman 1

C. Sintaks & Penempatan Kode CSS

Sintaks CSS terdiri dari tiga bagian:

• selector

• property

• value

Selector adalah elemen atau tag HTML yang akan di-definisi-kan.

Property adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan
nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung
kurawal ({).

Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:

selector { property: value}

contoh 1:

p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik
(“). Untuk memberikan lebih dari satu 3roperty bagi suatu 3roperty, pisahkan setiap
kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya
lebih mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehingga
sintaksnya menjadi:

selector { property1: value; property2: “value_value”; … }

contoh 2:

p { text-align:center; font-family:“sans serif” }

Aturan-aturan yang berlaku dalam sintaks CSS:

1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
halaman 4

2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,

3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma
(;) untuk membatasi properti yang satu dengan yang lain (contoh 2),

4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang
sama, gunakan tanda koma (,).

contoh: h1,h2,h3 {color:green}

Class selector

Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style


untuk tag elemen html yang sama.
contoh 3:

Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata
kanan, dan yang lain rata kiri. Maka:

p.right {text-align: right}

dan

p.left {text-align: left}

Aturan Class selector:

1. Jangan memberi nama class dengan angka,

2. Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya


menggunakan tanda petik (“).

halaman 5

Bab II

Kumpulan Tag CSS

“One of the best ways to learn CSS is to jump right in and start to get into the
page layouts.”

~ www.css-mastery.com ~
Pada bab kedua ini, Anda dapat menemukan kumpulan lengkap tag CSS beserta
contoh-contoh penggunaannya pada beberapa bagian. Bila Anda serius ingin menekuni
CSS, sangat disarankan agar Anda terus mencoba setiap tag dan propertinya; selain
membantu Anda mengingat-ingat cara penulisan sintaks, metode mencoba akan
memperlihatkan kegunaan dari masing-masing tag.

Anda tidak harus menghapal semua tag bila ingin menjadi seorang ahli. Seorang
ahli yang sesungguhnya adalah orang yang bisa memanfaatkan tag-tag yang paling
sederhana sekalipun untuk menambah nilai estetika suatu website secara efisien.
Tidak jarang kita menemukan situs-situs di internet yang terlalu memaksakan
penggunaan CSS yang tidak perlu, sehingga malah mempersulit pengunjungnya untuk
sekedar membaca.

Berikut ini adalah table-tabel 5roperty dan ‘nilai’ dari CSS:

halaman 10

d. Background

Property Deskripsi Values


background Mengeset semua properti background-color
background dalam satu background-image
deklarasi background-repeat
background-attachment
background-position

background-attachment Mengeset kondisi posisi scroll


background; antara dapat fixed
discroll atau tidak dapat
digerakkan dalam halaman

background-color Mengeset warna latar color-rgb


background suatu elemen color-hex
color-name
transparent

background-image Mengeset sebuah gambar url(URL)


menjadi sebuah background none

background-position Mengeset posisi background top left


top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

background-repeat Mengeset apakah/bagaimana repeat


background akan diulang repeat-x
repeat-y
no-repeat

halaman 15

Contoh penggunaan tag dan property background:

<html>

<head>
<style>

body { background-color: black; }

p { background-color: gray; }

h2 { background-color: red; }

ul { background-image: url(pics/cssT/smallPic.jpg);

background-repeat: repeat-y; color: green; }

</style>

</head>

<body>

<h2>CSS Backgrounds</h2>

<p>This page has a black background. If you make a black


background be sure that

you change the font color from its default black value. On the
other hand, you could

just change the backgrounds of the HTML elements, as we have


done for the paragraph and the header.</p>

<ul>

<li>This list has a picture on the left</li>

<li>Because it was set to repeat-y</li>

<li>And not to repeat-x</li>

</ul>
</body>

</html>