tutorial lengkap Cascading Style Sheets (CSS)

mengungkap rahasaia css

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,

4.    Posisi text, gambar, tabel, dan elemen lainnya,

5.    Marjin, border, dan padding,

Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS_{2 ­}(CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS₁, serta diperluas dengan penekanan pada International accesibility and capability khususnya media-specific CSS.

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

B.   Pengertian & Manfaat CSS

Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:

“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”

Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri.

Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script  yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.

Manfaat dari CSS:

1.    Kode HTML menjadi lebih sederhana dan lebih mudah diatur,

2.    Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,

3.    Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,

4.    Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,

5.    Digunakan dalam hampir semua web browser.

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 roperty bagi suatu roperty, 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),

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 (“).

Atribut ID

Aturan penamaan ID:

1.    Dapat mengandung huruf, angka, atau karakter garis bawah,

2.    Karakter pertama harus berupa huruf atau karakter garis bawah,

3.    Diawali dengan tanda #,

4.    Jangan memberi nama id sama dengan value,

5.    Jangan memberi nama id dengan tag html kemudian diikuti tanda #.

contoh 4:

<html>

<head>

<style type = "text/css">

<!--

#tebal { font-weight : bold;

color : blue; }

#miring { font-style : italic;

color: pink; }

-->

</style>

</head>

<body>

<h1>Contoh</h1>

<h2 id = "miring">

The quick brown fox jumps over the lazy dog

</h2>

<h3 id = "tebal">

And then it falls into the well

</h3>

</body>

</html>

Penempatan kode CSS dalam HTML

Ada tiga cara penempatan kode CSS dalam HTML:

1.    Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

<html>

<head>

<style type=”text/css”>

p {color: white; }

body {background-color: black; }

</style>

</head>

<body>

<p>Menguak Rahasia CSS</p>

</body>

</html>

2.    Eksternal CSS

Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css. contoh:

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”test.css”/>

</head>

<body>

<h3>Menguak Rahasia CSS</h3>

</body>

</html>

3.    Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>

<head>

</head>

<p style=”background: red; color: black;”>Menguak Rahasia CSS</p>

</body>

</html>

Selamat! Anda baru saja berhasil menguak rahasia pertama dari CSS. Setelah membaca bab pertama ini, Anda telah memiliki pengetahuan dasar untuk melanjutkan ke rahasia berikutnya: Kumpulan Tag CSS.

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 properti dan ‘nilai’ dari CSS:

a. Text

Property	Deskripsi	Values
color	Mengeset warna teks	color
direction	Mengeset arah teks	ltr rtl
line-height	Mengeset jarak antar garis	normal number length %
letter-spacing	Menambah atau mengurangi jarak antar karakter	normal length
text-align	Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada elemen	left right center justify
text-decoration	Menambah dekorasi pada teks	none underline overline line-through blink
text-indent	Mengindentasikan baris pertama teks pada elemen	length %
text-shadow		none color length
text-transform	Mengontrol huruf pada elemen	none capitalize uppercase lowercase
unicode-bidi		normal embed bidi-override
white-space	Mengeset bagaimana ruang putih di dalam elemen ditangani	normal pre nowrap
word-spacing	Menambah atau mengurangi jarak antar kata	normal length

Contoh penggunaan tag dan property text:

<html>

<head>

<style type="text/css">

p.satu {color: #FF0000; letter-spacing:length;}

p.dua {color: #000080; text-decoration:underline;}

p.tiga {text-align:justify; direction:rtl;}

</style>

</head>

<body>

<p class="satu">Everything that humans can imagine</p>

<p class="dua">is a possibility in reality</p>

<p class="tiga">Willy Karen - psychologist</p>

</body>

</html>

b. Pseudo-elements

Pseudo-element	Kegunaan
:first-letter	Menambahkan style spesial pada huruf pertama sebuah teks
:first-line	Menambah spesial style pada baris pertama sebuah teks
:before	Menyisipkan suatu konten sebelum elemen
:after	Menyisipkan suatu konten setelah elemen

Contoh penggunaan tag dan property pseudo-elements:

<html>

<head><style>

p {font-size: 12pt}

p:first-letter {font-size: 200%; float: left}

</style></head>

<body>

<p>Tulisan pertama dalam suatu paragraph.</p>

</body>

</html>

c. Font

Property	Deskripsi	Values
font	Mengeset semua properti untuk font(huruf) dalam satu deklarasi	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar
font-family	Prioritas list untuk font family dan/atau generic pada suatu elemen	family-name generic-family
font-size	Mengset ukuran dari font	xx-small x-small small medium large x-large xx-large smaller larger length %
font-size-adjust	Menspesifikasi aspek nilai untuk sebuah elemen yang akan mempertahankan tinggi-x dari font pilihan pertama	none number
font-stretch	Memadatakan atau melonggarkan font-family yang digunakan	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded
font-style	Mengeset style dari font	normal italic oblique
font-variant	Menampilkan teks dalam small-caps font atau normal font	normal small-caps
font-weight	Mengeset ketebalan huruf	normal bold bolder lighter 100 200 300 400 500 600 700 800 900

Contoh penggunaan tag dan property font:

<html>

<head>

<style type="text/css">

p.italic {font-style: italic; font-family:"courier"; font-size:16;}

p.oblique {font-style: oblique}

</style>

</head>

<body>

<p class="italic">Menguak Rahasia CSS</p>

<p class="oblique">Kumpulan Tag</p>

</body>

</html>

d. Background

Property	Deskripsi	Values
background	Mengeset semua properti background dalam satu deklarasi	background-color background-image background-repeat background-attachment background-position
background-attachment	Mengeset kondisi posisi background; antara dapat discroll atau tidak dapat digerakkan dalam halaman	scroll fixed
background-color	Mengeset warna latar background suatu elemen	color-rgb color-hex color-name transparent
background-image	Mengeset sebuah gambar menjadi sebuah background	url(URL) 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 background akan diulang	repeat repeat-x repeat-y no-repeat

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>

e. Table

Property	Deskripsi	Values
border-collapse	Mengeset apakah border tabel collapse pada satu border atau terpisah sesuai standar HTML	collapse separate
border-spacing	Mengeset jarak yang memisahkan border sel (khusus untuk model separate-border)	length length
caption-side	Mengeset posisi dari judul tabel	top bottom left right
empty-cells	Megeset apakah sel kosong ditampilkan pada tabel atau tidak (khusus untuk model separate-border)	show hide
table-layout	Mengeset algoritma yang digunakan untuk menampilkan sel tabel, baris, dan kolom	auto fixed

Contoh penggunaan tag dan property table:

<html>

<head>

<style type="text/css">

table

{border-collapse: separate;

empty-cells: show}

</style>

</head>

<body>

<table border="1">

<tr>

<td>Q1</td>

<td>Q2</td>

</tr>

<tr>

<td colspan=2 align=center>Q3</td>

</tr>

</table>

</body>

</html>

f. Padding

Property	Deskripsi	Values
padding	Mengeset semua properti untuk padding (bloknot) dalam satu deklarasi	padding-top padding-right padding-bottom padding-left
padding-bottom	Mengeset pad bagian bawah dari elemen	length %
padding-left	Mengeset pad bagian kiri dari elemen	length %
padding-right	Mengeset pad bagian kanan dari elemen	length %
padding-top	Mengeset pad bagian atas dari elemen	length %

Contoh penggunaan tag dan properti padding:

<html>

<head>

<style>

p { padding-left: 45px; border: 1px solid black; }

h2 { padding-top: 80px; border: 1px solid black; }

ul { padding: 25px; border: 1px solid black; }

</style>

</head>

<body>

<h2>CSS Padding</h2>

<p>The header has a top padding of 45px and this paragraph has a padding-left of 80px.  This gives

a nice indendation to the paragraph.</p>

<ul>

    <li>This list has a uniform</li>

    <li>25 pixel margin</li>

    <li>Padding is useful for creating necessary white space.</li>

</ul>

</body>

</html>

 

 

g. List & Marker

Property	Deskripsi	Values
list-style	Mengeset semua properti untuk sebuah list dalam satu deklarasi	list-style-type list-style-position list-style-image
list-style-image	Mengeset gambar sebagai list-item marker	none url
list-style-position	Mengeset dimana list-item marker ditempatkan pada list	inside outside
list-style-type	Mengeset tipe dari list-item marker	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
marker-offset		auto length

Contoh penggunaan tag dan properti list:

<html>

<head>

<style>

 

ul { list-style-image: disc; }

ol { list-style-type: upper-roman; }

 

</style>

</head>

<body>

<h2>CSS Lists</h2>

<ul>

   <li>This list has a picture</li>

   <li>in the place of bullets</li>

   <li>The spacing doesn't look very good.</li>

</ul>

 

<ol>

   <li>This list is </li>

   <li>in Upper Roman </li>

   <li>These are good for outlines </li>

</ol>

</body>

</html>

h. Border

Property	Deskripsi	Values
border	Mengeset semua properti untuk 4-border (yang tertutup) dalam satu deklarasi	border-width border-style border-color
border-bottom	Mengeset semua properti untuk bottom-border (yang bawah aja) dalam satu deklarasi	border-bottom-width border-style border-color
border-bottom-color	Mengeset warna dari bottom-border	border-color
border-bottom-style	Mengeset style dari bottom border	border-style
border-bottom-width	Mengeset ketebalan dari garis bottom-border	thin medium thick length
border-color	Mengeset warna dari keseluruhan border	Color
border-left	Mengeset semua properti untuk left-border (yang kiri aja) dalam satu deklarasi	border-left-width border-style border-color
border-left-color	Mengeset warna dari left-border	border-color
border-left-style	Mengeset style dari left-border	border-style
border-left-width	Mengeset ketebalan dari garis left-border	thin medium thick length
border-right	Mengeset semua properti untuk right-border (yang kanan aja) dalam satu deklarasi	border-right-width border-style border-color
border-right-color	Mengeset warna dari right-border	border-color
border-right-style	Mengeset style dari right-border	border-style
border-right-width	Mengeset ketebalan dari garis right-border	thin medium thick length
border-style	Mengeset style dari keseluruhan border	none hidden dotted dashed solid double groove ridge inset outset
border-top	Mengeset semua properti untuk top-border (yang atas aja) dalam satu deklarasi	border-top-width border-style border-color
border-top-color	Mengeset warna dari top-border	border-color
border-top-style	Mengeset style dari top-border	border-style
border-top-width	Mengeset ketebalan dari garis top-border	thin medium thick length
border-width	Mengeset ketebalan dari keseluruhan border; terdapat empat jenis ketebalan	thin medium thick length

Contoh penggunaan tag dan property border:

<html>

<head>

<style type="text/css">

p.pertama {border-style: dashed;border-color: #0000ff}

p.kedua {border-style: solid;border-color: #ff0000 #0000ff}

p.ketiga

{

border-style: dotted;

border-color: #ff0000 #00ff00 #0000ff

}

p.keempat

{

border-style: solid;

border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)

}

</style>

</head>

<body>

<p class="pertama">Border dengan satu macam warna</p>

<p class="kedua">Border dengan dua macam warna</p>

<p class="ketiga">Border dengan tiga macam warna</p>

<p class="keempat">Border dengan empat macam warna</p>

<p><b>catatan:</b> "Perhatikan warna border-nya"</p>

</body>

</html>

i. Positioning

Property	Deskripsi	Values
Bottom	mengeset sejauh mana pojok bawah elemen di atas atau di bawah dari pojok bawah parent element	auto % length
clip	Mengeset bentuk dari elemen. Elemen diclip menjadi bentuk ini, dan ditampilkan	shape auto
left	Mengeset sejauh mana pojok kiri dari elemen di kiri/kanan tepi kiri parent element	auto % length
overflow	Mengeset apa yang terjadi jika konten dari elemen melebihi area elemen	visible hidden scroll auto
position	Menempatkan elemen dengan posisi static, relative, absolute, atau fixed	static relative absolute fixed
right	Mengeset sejauh mana pojok kanan dari elemen di kiri/kanan dari pojok kanan parent element	auto % length
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %
z-index	Sets the stack order of an element	auto number

Contoh penggunaan tag dan properti positioning:

<html>

<head>

<style>

h3 {

position: absolute;

top: 200px;

left: 150px;}

p {

position: absolute;

top: 75px;

left: 75px;}

</style>

</head>

<body>

<h3>Menguak Rahasia CSS</h3>

<p>~anonim~</p>

</body>

</html>

j. Classification

Property	Deskripsi	Values
clear	Mengeset sisi dari sebuah elemen dimana elemen ngambang lainnya tidak diperbolehkan	left right both none
cursor	Menspesifikasi kursor yang ditampilkan	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
display	Mengeset apakah/bagaimana suatu elemen ditampilkan	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption
float	Mengeset dimana sebuah gambar atau teks dimunculkan pada elemen lain	left right none
position	Mengeset penempatan elemen sebagai posisi yang static, relative, absolute atau fixed	static relative absolute fixed
visibility	Mengeset apakah suatu elemen ditampilkan atau tidak	visible hidden collapse

k. Pseudo-classes

Pseudo-class	Kegunaan
:active	Menambahkan spesial style kepada elemen yang aktif
:focus	Menambahkan spesial style kepada elemen selama elemen sedang focus
:hover	Menambahkan spesial style kepada elemen saat cursor berada di atas elemen tersebut
:link	Menambahkan spesial elemen kepada link yang belum kena hit
:visited	Menambahkan spesial style kepada link yang telah dihit
:first-child	Menambah spesial style pada elemen yang merupakan child pertama dari gabungan beberapa elemen lainnya
:lang	Membolehkan pemilik(author) untuk menentukan bahasa yang digunakan pada elemen tertentu

Contoh penggunaan tag dan properti pseudo-classes:

<html>

<head>

<style>

a:link{ text-decoration: none;

    color: gray;

}

   

a:visited{ text-decoration: none;

    color: gray;

}

a:hover{ text-decoration: none;

    color: green;

    font-weight: bolder;

    letter-spacing: 2px;

}

</style>

</head>

<body>

<h2>CSS Pseudo Classes or Links</h2>

<p>Arahkan kursor Anda <a href="">ke sini </a> !</p>

</body>

</html>

catatan: Warna ‘ke sini’ akan berubah saat Anda mengarahkan kursor ke atasnya.

 

l. Dimension

Property	Deskripsi	Values
height	Mengeset tinggi dari sebuah elemen	auto length %
line-height	Mengeset jarak antar garis pada elemen	normal number length %
max-height	Mengeset tinggi maksimal dari elemen	none length %
max-width	Mengeset lebar maksimal dari elemen	none length %
min-height	Mengeset tinggi minimal dari elemen	length %
min-width	Mengeset lebar minimal dari elemen	length %
width	Mengeset lebar dari suatu elemen	auto % length

m. Generated Content

Property	Deskripsi	Values
content	Membuat konten dalam dokumen. Digunakan bersama pseudo-element :before dan :after	string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote
counter-increment	Mengeset berapa banyak suatu counter menambahkan pada tiap aksi pada selektor	none identifier number
counter-reset	Mengeset nilai yang counter set pada tiap aksi pada selektor	none identifier number
quotes	Mengeset tipe dari quote	none string string

n. Outlines

Property	Deskripsi	Values
outline	Mengeset semua properti untuk outline dalam satu deklarasi	outline-color outline-style outline-width
outline-color	Mengeset warna dari outline elemen	color invert
outline-style	Mengeset style outline dari elemen	none dotted dashed solid double groove ridge inset outset
outline-width	Mengeset ketebalan outline dari elemen	thin medium thick length

Setelah Anda menguasai seluruh tag dan properti – beserta value-nya, maka Anda telah menguak rahasia CSS cukup dalam. Tentu saja masih ada beberapa rahasia CSS lagi yang lebih dalam dan kompleks, yang menunggu untuk ditemukan.

Namun, disarankan agar Anda terus melatih diri terlebih dahulu untuk mengenal dan memahami setiap fungsi dari tag-tag, dan mempraktikkannya secara nyata di media komputer. Selamat meneruskan!

oleh fsakti FASANA IT | Tutorial Computer Updated at : 23.33

Baca Selenkapnya...