Showing posts with label CSS. Show all posts

Thursday, June 16, 2011

Wednesday, June 10, 2009

CSS Padding

Sebuah properti yang digunakan untuk membuat ruang kosong diantara border dan isi elemen.

Padding masing-masing sisi (atas, kanan, bawah, kiri) bisa diatur sendiri secara terpisah, bisa juga diatur sekaligus.

Properti padding mempunyai dua value yaitu:

Value

Keterangan

Mendefinisikan padding dalam % dari isi elemen

length

Mendefinisikan padding dengan nilai yang tertentu (pixels, pt, em, dll.)

lihat CSS unit

Contoh

<html>
<head>
<style type="text/css">
td.test1 {padding:15%}
td.test2 {padding:0.5cm 2.5cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td class="test1">
Sebuah Sel Tabel dengan padding 15% untuk semua sisi.
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
Sebuah Sel Tabel dengan padding atas dan bawah=0.5cm , kanan dan kiri= 2.5cm.
</td>
</tr>
</table>
</body>

</html>

Tampilannya akan sebagai berikut:

Sebuah Sel Tabel dengan padding 15% untuk semua sisi.

Sebuah Sel Tabel dengan padding atas dan bawah=0.5cm , kanan dan kiri= 2.5cm.

Sambil nyoba value laennya, lebih okehh kalau ngopi dulu ahh ....

Sunday, May 24, 2009

CSS Margin

Properti ini (margin) digunakan untuk membuat ruang kosong disekeliling elemen.
Dengan properti margin, kita bisa mengatur sekaligus empat sisi dari sebuah elemen. CSS juga menyediakan properti tersendiri bila kita ingin mengatur masing-masing sisi yaitu:
margin-top
margin-right
margin-bottom
margin-left

Keempat properti diatas, adalah merupakan nilai dari properti margin
sintaks :

p.margin {margin: 2cm 4cm 3cm 4cm}

value (nilai) properti margin terdiri dari 3 macam yaitu :

Value	Keterangan
auto	browser akan mengesetnya secara otomatis
length	lihat kembali CSS Units
%	mendefinisikan margin dalam % dari total lebar atau tinggi dokumen (left, right : % dari total lebar dokumen) (top, bottom : % dari total tinggi dokumen)

Contoh CSS margin

<html>
<head>
<style type="text/css">
p.margin {margin: 4cm 2cm 3cm 1cm}
</head>
<body>
<p>Paragraph dengan margin tidak ditentukan</p>
<p class="margin">Paragraph dengan margin yang ditentukan</p>
<p>Paragraph dengan margin tidak ditentukan</p>
</body>

</html>

Tampilan:

Paragraph dengan margin tidak ditentukan

Paragraph dengan margin yang ditentukan

Paragraph dengan margin tidak ditentukan

Value yang lainnya bisa dicoba sendiri...
Sorry agak pelit nih...

Tuesday, May 19, 2009

CSS Outline

Properti ini digunakan untuk membuat garis untuk mengelilingi sebuah elemen. Kalau dibarengi dengan border, maka outline ini akan terletak diluar garis border.
Sayangnya properti outline tidak bisa ditampilkan dalam browser IE.

bagi pemakai IE boleh tidur dulu....

Sintak dan Contoh pemakaian :
Seperti halnya border, outline mempunya tiga macam value (outline-width, outline-style dan outline-color) yang bisa deklarasikan sekaligus.


p
{
border: medium solid red
}

Contohnya borongan aja yaa (kasihan fans IE kelamaan nunggunya..)

<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline</p>

<p class="ridge">A ridge outline</p>

<p class="inset">An inset outline</p>

<p class="outset">An outset outline</p>
</body>
</html>

Sorry yaa, contohnya hanya outline-style aja..., outline-width dan outline-color nya bisa dicoba sendiri..

Tampilan:

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline

A ridge outline

An inset outline

An outset outline

Dah..cukup dulu yaa, pemakai IE jangan heran kalau outline nya kagak kelihatan, bukannya mata anda yang error tapi emang IE yang pelit kaga mau nampilin...

Untuk Opera ada beberapa jenis outline yang ditampilin sama...

Monday, May 18, 2009

CSS Border

Kita bisa menggunakan kode CSS untuk membuat bingkai atau border suatu elemen halaman html. Properti yang digunakan untuk keperluan ini ialah border
sintaks penulisan:

p
{
border: double
}

Sintaks diatas digunakan untuk membuat border dengan garis double dengan warna hitam (default).
Sebenarnya properti border ini bisa digunakan untuk mengatur lebar garis, style (bentuk) garis dan warna garis border sekaligus.
Properti border mempunyai tiga macam Value (nilai) yaitu:
1. border-width - mengatur lebar garis
2. border-style - mengatur bentuk garis
3. border-color - mengatur warna garis

Sintaks dengan tiga value sekaligus:

p
{
border: medium solid red
}

Susunan ketiga value tersebut bisa dibolak balik (

kayak ngegoreng pisang aja... )

Value untuk border-width

Value	Keterangan
thin	tipis
medium	menengah
thick	tebal
length	lihat CSS unit

Value untuk border-style

Value	Keterangan
none	tanpa border
hidden	border di sembunyikan
dotted	titik-titik
dashed	garis putus-putus
solid	garis tebal
double	garis double
groove	berlekuk
ridge	bergelombang
inset	tebal pada bagian atas dan samping kiri
outset	tebal pada bagian bawah dan samping kanan

Value untuk border-color

Value	Keterangan
color	masukkan warna sesuai kode atau namanya lihat kembal cara memasukkan warna pada background-color

Contoh properti border:

<html>
<head>
<style type="text/css">
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>

<body>
<p>Contoh border: width=medium,style=double,color=rgb(250,0,255)</p>
</body>

</html>

Contoh tampilan

Contoh border: width=medium,style=double,color=rgb(250,0,255)

Contoh Tampilan beberapa jenis border:

Border = thin dotted red


Border = thin dotted red


Border = thick solid green


Border = 3pk double green


Border = medium groove blue


Border = medium ridge blue


Border = thick inset black


Border = thick outset blue

Silakan Pilih - Silakan Pilih....(kaya dagangan aja...)

Sunday, May 17, 2009

CSS font-weight

Properti font-weight gunakan untuk mengatur seberapa tebal atau tipis suatu huruf akan ditampilkan.
Kalau dalam Word kita hanya mengenal mode normal dan bold saja, Maka disini kita bisa mengatur ketebalan huruf dengan variasi yang lebih banyak.

Sintaks penulisan CSS font-weight


p {font-weight: bold}

Nilai (value) yang bisa dipakai untuk font-weight :

Value	Keterangan
normal	Default, biasa aja
bold	Tebal
bolder	Lebih tebal dari bold
lighter	Lebih tipis dari normal
100 200 300 400 500 600 700 800 900	Mengatur ketebalan huruf dengan dari tipis sekali sampai tebal banget..., ukuran normal=400 dan bold=700

Contoh :

<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.tipis {font-weight: lighter}
p.tebel {font-weight: bold}
p.tebelan {font-weight: 900}
</style>
</head>

<body>
<p class="normal">Paragraph normal</p>

<p class="tipis">Paragraph tipis</p>

<p class="tebel">Paragraph tebel</p>

<p class="tebelan">Paragraph lebih tebel</p>
</body>

</html>

Tampilan browser:

Paragraph normal

Paragraph tipis

Paragraph tebel

Paragraph lebih tebel

Value yang lainnya coba sendiri aja yaa..., biar cepet mahir...

Thursday, April 30, 2009

CSS font-variant

Properti font-variant digunakan untuk membuat/memformat suatu text menjadi huruf kapital semua tetapi dengan ukuran sedikit lebih kecil dari ukuran huruf kapital yang normal.
Dari pada susah-susah ngebayanginnya, lebih baik kita praktekin aja langsung..

<html>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">PARAGRAPH DENGAN HURUF KAPITAL</p>
<p class="small">paragraph dengan font variant small-caps</p>
</body>

</html>

Tampilan di browser :

PARAGRAPH DENGAN HURUF KAPITAL

paragraph dengan font variant small-cap

karena font-variant ngga punya value lain, contohnya cukup satu aja yaaaaa...

CSS font-style

Setelah beberapa waktu agak repot, akhirnya sempet juga nerusin CSS...

Sekarang langsung aja yahh ke font-style...
Properti CSS font-style digunakan untuk memformat bentuk huruf sesuai dengan kebutuhan kita, tapi sayangnya hanya ada 3 nilai (value) untuk properti ini yaitu:
- normal : default
- italic : miring
- oblique : miring juga (saya coba ga ada bedanya dengan italic.... ga tahu deh bedanya apa...

)

Biarin dehh ntar kalo sempet kita cari sama-sama perbedaannya, sekarang langsung kita coba aja yaa...(jangan lupa siapin notepad dan browser kamu)

<html>
<head>
<style type="text/css">
/*kita coba ketiga valuenya sekaligus*/
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>

<body>
<h1>Header 1 dengan huruf italic</h1>
<h2>Header 2 dengan huruf normal</h2>
<p>Paragrap dengan huruf oblique</p>
</body>

</html>

Tampilan Browsernya :

Header 1 dengan huruf italic

Header 2 dengan huruf normal

Paragrap dengan bentuk huruf oblique

Sayang yaa.. value nya cuman 3 macam , coba kalau banyak khan tambah asyik jadinya....

Tuesday, April 7, 2009

CSS font-size

Sesuai dengan namanya, Property font-size digunakan untuk menentukan ukuran huruf tulisan halaman HTML kita. Nilai (value) yang bisa diterapkan untuk properti ini ialah:

Value (nilai)	Keterangan
xx-small x-small small medium large x-large xx-large	Untuk menentukan ukuran yang berbeda-beda dari yang sangat kecil (xx-small) sampai yang paling besar (xx-large) Nilai default-nya adalah medium
smaller	Membuat ukuran huruf lebih kecil sedikit dari ukuran aslinya
larger	Membuat ukuran huruf lebih besar sedikit dari ukuran aslinya
panjang	Membuat ukuran huruf dengan besaran tertentu lihat CSS Unit
%	Menentukan ukuran huruf dengan prosentase dari ukuran aslinya

Langsung contoh aja yaa

<html>
<head>
<style type="text/css">
h1 {font-size: 100%}
p.large {font-size: large}
p {font-size: 1cm}
</style>
</head>

<body>
<h1>Header 1 dengan ukuran huruf 100%</h1>
<p class="large">Paragrap dengan ukuran huruf large</p>
<p>Paragrap dengan ukuran huruf 1cm</p>
</body>

</html>

Pada contoh kode diatas, Ukuran huruf Header 1 diset 100%, ini berarti sebesar huruf normal pada paragrap. Bedanya hanya pada ketebalannya saja.

Hasil kode diatas

Header 1 dengan ukuran huruf 100%

Paragrap dengan ukuran huruf large

Paragrap dengan
ukuran huruf 1cm

biar cepet mahir, value yang lainnya harap dicoba sendiri... XxXxXx

sorry yaa, cuman cari alasan aja... padahal sih lagi rada males..

CSS font-family

Property CSS font-family digunakan untuk menentukan jenis huruf yang akan kita pakai dalam halaman HTML kita.

Cara penulisan :

p {font-family: courier}

Contoh kode CSS untuk menentukan jenis huruf

<html>
<head>
<style type="text/css">
h1 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>

<body>
<h2>Jenis huruf times untuk header 1</h2>
<p>Paragrap dengan huruf courier</p>
<p class="sansserif">Paragrap dengan huruf sansserif</p>
</body>

</html>

Hasil tampilan

Jenis huruf times untuk header 2

Paragrap dengan huruf courier

Paragrap dengan huruf sansserif

Nilai (value) dari property ini berisikan jenis-jenis huruf yang akan kita tentukan.

Selamat mencoba....

CSS font

Dengan menggunakan Property CSS Font kita bisa mengubah jenis huruf, ketebalan, ukuran huruf dan gaya penulisan.
Property yang berhubungan dengan font:

1. font-family

2. font-size

3. font-stretch

4. font-style

5. font-variant

6. font-weight

Nanti kita akan mencoba satu-persatu property tersebut, tapi agak sabar yaa....

Lagi agak sibuk nih...

CSS text-decoration

Sesuai dengan namanya, property text-decoration digunakan untuk mempercantik text halaman HTML kita.

Cara penulisan

p {text-decoration: overline}

Nilai (value) text-decoration ada 5 macam yaitu:

overline - untuk membuat tulisan dengan dekorasi garis diatasnya
line-through - untuk membuat tulisan dengan dekorasi garis ditengahnya
underline - untuk membuat tulisan dengan dekorasi garis bawah
blink - untuk membuat tulisan berkedip
none - untuk membuat tulisan tanpa dekorasi

Untuk lebih jelasnya kita coba aja yaa

<html>

<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<p><a href="http://4gratisfree.blogspot.com/">Sebuah link</a></p>
</body>

</html>

Contoh Tampilan dalam Browser

Header 1

Header 2

Header 3

Header 4

Sebuah link

Dalam contoh diatas, sebuah link yang biasanya selalu disertai garis bawah bisa kita buat tanpa garis bawah.

Nah.. udah deh, sekarang kita bisa mempercantik halaman HTML kita dengan text-decoration. Tapi bisa juga memperjelek yaa, coba kalau semua tulisan di over-through.....

Property text-transform

Dalam menulis halaman HTML, seringkali kita pengen membuat suatu tulisan dengan huruf besar semua atau dengan huruf kecil semua, tetapi kita sering kali lupa menekan tombol Caps Lock sehingga tulisan kita mesti dihapus dulu baru ditulis ulang sesuai keinginan. Sebenarnya ada suatu property yang memudahkan kita untuk keperluan tersebut yaitu property text-transform.

Dengan property ini kita bisa membuat tulisan dengan huruf Kapital semua, huruf kecil semua atau setiap kata diawali dengan huruf kapital tanpa takut salah ketik. Karena secara otomatis browser akan mengikuti perintah CSS kita sesuai dengan keinginan kita.

Contoh pemakaian text-transform

<html>

<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>

<body>
<p class="uppercase">Paragrap ini ditulis dengan huruf kapital</p>

<p class="lowercase">Paragrap ini DITULIS dengan huruf kecil semua</p>

<p class="capitalize">Setiap kata diawali huruf kapital</p>
</body>

</html>

Dalam contoh diatas, ketiga contoh paragrap sengaja ditulis dengan huruf besar dan kecil campur aduk. Kesengajaan ini hanya untuk melihat fungsi text-transform yang sebenarnya.

Tampilan Browser

Paragrap ini ditulis dengan huruf kapital

Paragrap ini DITULIS dengan huruf kecil semua

Setiap kata diawali huruf kapital

Sunday, March 29, 2009

CSS Paragrap

Kita akan coba menggunakan kode CSS untuk mengatur paragrap.

Property yang digunakan untuk mengatur paragrap yaitu :

1. text-indent (Mengatur Indentasi).

2. direction (Mengatur Arah Paragrap).

3. text-align (Mengatur Perataan).

CSS text-indent

Cara penulisan text-indent:

p {text-indent: 1cm}

untuk mengisi nilai (value) dari text-indent lihat pada bagian CSS Units.

Contoh Penggunaan

<html>

<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>

<body>
<p>
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
Ini adalah contoh paragrap dengan inden 1 cm.
</p>
</body>

</html>

Tampilan pada browser:

Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm. Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.Ini adalah contoh paragrap dengan inden 1 cm.

CSS Direction

Property direction mempunyai 2 macam nilai(value) yaitu:

1. ltr (left to right)

2. rtl (right to left)

Value ltr adalah default, sedang value rtl biasa digunakan kalau kita membuat paragrap dengan arah dari kanan ke kiri, seperti yang digunakan pada tulisan arab.

Cara penulisan direction:

p {direction: rtl}

Contoh paragrap pada text-indent, kalau kita tambahkan property direction:rtl, maka akan tampak pada browser:

CSS text-align

CSS dapat mengatur perataan text dengan propperty text-align. Property ini mempunyai 4 macam nilai (value) yaotu:
1. left (Paragrap/Text rata kiri) (default)

2. right (Paragrap rata kanan)

3. center (Paragrap rata tengah)

4. justify (Paragrap rata kiri kanan)

Cara penulisan text-align:

p {text-align: right}

Contoh Penggunaan

<html>

<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

<body>
<h1>Header 1 rata tengah</h1>
<h2>Header 2 rata kiri</h2>
<h3>Header 3 rata kanan</h3>
</body>

</html>


Header 1 rata tengah

Header 2 rata kiri

Header 3 rata kanan

Monday, March 23, 2009

CSS Unit

Ada baiknya mengetahui CSS Units sebelum kita memulai ke pembahasan selanjutnya. CSS Units adalah satuan pengukuran yang sering digunakan dalam membuat kode CSS.

Tabel CSS Units

Units	Deskripsi
%	prosentase
in	inchi
cm	centi meter
mm	mili meter
em	1em = ukuran huruf yang berlaku
ex	kurang lebih setengah ukuran huruf
pt	point ( 1 point = 1/72 inchi )
pc	pica ( 1pc = 12 point )
px	pixels ( satu titik pada layar monitor )

CSS text space

Adanya kode CSS memungkinkan kita untuk mengatur jarak spasi antar karakter , spasi antar kata dan spasi antar baris dengan sangat mudah. Kalau kita ingin membuat jarak spasi yang lain daripada yang lain, maka kode CSS menjadi salah satu alternatifnya.
Property yang kita gunakan ialah :

letter-spacing ( untuk mengatur spasi antar karakter )
line-height ( untuk mengatur spasi antar baris )
word-spacing ( untuk mengatur spasi antar kata )

CSS letter-spacing

Property letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti) lihat css unit

Contoh kode CSS untuk mengatur spasi antar karakter:

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -2px}
h3 {letter-spacing: 0.5cm}
</style>
</head>

<body>
<h1>Header 1 menggunakan spasi = -2 piksel </h1>
<h3>Header 3 menggunakan spasi = 0.5 centi meter </h3>
</body>

</html>

Contoh Tampilan:

Header 1 menggunakan spasi = -2
piksel 

Header 3 meng
gunakan spasi =
0.5 centi meter

CSS line-height

Property line-height mempunyai empat nilai (value) yaitu
- normal (default)
- angka ( angka ini akan dikalikan ukuran huruf yang berlaku)
- panjang (memberikan jarak yang pasti) lihat css unit
- % (prosentase dari ukuran huruf yang berlaku)

Contoh kode CSS untuk mengatur spasi antar baris:

<html>

<head>
<style type="text/css">
p.rapet {line-height: 90%}
p.renggang {line-height: 2em}
p.panjang {line-height: 5}
</style>
</head>

<body>
<p>Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
</p>
<p class="rapet">
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
</p>
<p class="renggang">
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
</p>
<p class="panjang">
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
</p>

</body>

</html>

Contoh Tampilan:

Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.
Paragrap dengan jarak spasi antar baris normal.

Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.
Paragrap dengan jarak spasi antar barisnya rapet.

Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.
Paragrap dengan jarak spasi antar barisnya renggang.

Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.
Paragrap dengan jarak spasi sangat renggang.

CSS word-spacing

Property letter-spacing mempunyai dua nilai (value) yaitu
- normal (default)
- panjang (memberikan jarak yang pasti) lihat css unit

Contoh kode CSS untuk mengatur spasi antar kata:

<html>

<head>
<style type="text/css">
p
{
word-spacing: 1cm
}
</style>
</head>

<body>
<p>Paragrap ini menggunakan spasi antar kata 1 cm</p>
</body>

</html>

Contoh Tampilan:

Paragrap ini menggunakan spasi antar

kata 1 cm

Sunday, March 22, 2009

CSS text color

Kode CSS dapat digunakan untuk mengatur warna text dan warna latar belakang text. Pemilihan warna text bisa dilakukan dengan tiga cara (hampir sama dengan background-color) yaitu :
1. Memasukkan kode RGB-nya.
2. Memasukkan nilai Hexadesimalnya.
3. Memasukkan nama warnanya.

Contoh Kode CSS untuk mengatur Warna

<html>

<head>
<style type="text/css">
h1 {color: rgb(0,0,255)}
h2 {color: #dda0dd}
p {color: red}
</style>
</head>

<body>
<h1>Warna text Header 1 ini di atur dengan menuliskan
kode RGB warna</h1>
<h2>Warna text Header 2 ini di atur dengan menuliskan
nilai desimal warna</h2>
<p>Warna text Paragrap ini di atur dengan menuliskan
nama warnanya </p>
</body>

</html>

Contoh Tampilan kode di atas

Warna text Header 1 ini di
atur dengan menuliskan
kode RGB warna

Warna text Header 2 ini di atur
dengan menuliskan nilai hexadesimal
warna

Warna text Paragrap ini di atur dengan menuliskan
nama warnanya

Sekarang kita akan mencoba membuat warna background untuk text kita. Disini saya akan memberi contoh dengan color name saja, Supaya cepet mahir, yang lainnya coba sendiri yaa....

<html>
<style type="text/css">
span.latar
{
background-color: yellow
}
</style>
</head>

<body>
<p>
<span class="latar">Text ini di kasih latar belakang.
</span>
Text yang ini tidak di kasih latar belakang.
</p>
</body>
</html>

Hasilnya akan tampak seperti ini


Text ini di kasih latar belakang. Text yang ini tidak
di kasih latar belakang.

CSS Text

Dengan menggunakan Kode CSS, kita bisa mengatur text halaman html kita dengan mudah. Pengaturan ini meliputi :
1. Color (warna)

Text color
Text background-color

2. Space (spasi)

Spasi antar karakter
Spasi antar baris

3. Paragraf

Indent
Arah Paragraf
Align (Perataan Text)

4. Effect (Dekorasi Text)

Baiklah kita akan coba membahasnya satu-persatu,....

Thursday, March 19, 2009

Property Background

Untuk menghemat waktu , kita bisa mendeklarasikan semua property background mulai dari background-color, background-image, background-repeat, background-position dan background-attachment sekaligus. Untuk keperluan ini kita cukup memakai property background saja.

Langsung kita coba aja nya, biar lebih mudah...

Ini contoh kode CSS nya :

<html>

<head>
<style type="text/css">
body
{
background: yellow url('d:\Ngeblog\24.gif') no-repeat top center fixed ;
}
</style>
</head>

<body>
<p>Atur Property background sekaligus</p>

<p>Atur Property background sekaligus</p>

</body>

</html>

Dengan Kode CSS diatas, berarti kita akan membuat background dengan keadaan:
background-color = yellow
background-image = d:\Ngeblog\24.gif
background-repeat = no-repeat
background-position = top center
background-attachment = fixed

Dalam tampilan browser, Kode Css diatas akan tampak kira-kira seperti ini


Atur Property background sekaligus
Atur Property background sekaligus
Atur Property background sekaligus

Ngapain yaa belajar semua property satu-persatu, kalau akhirnya bisa diatur sekaligus. cape deeeehhh...

Wednesday, March 18, 2009

Background Attachment

Ingin membuat gambar kita tetap kelihatan walaupun layar discroll ? ehh ternyata sangat mudah membuatnya dengan kode css. Nggak usah pusing-pusing

, tinggal pakai property background-attachment

Langsung dicoba aja yok...

<html>
<head>
<style type="text/css">
body
{
background-image:
url(d:\Ngeblog\24.gif);
background-repeat:
no-repeat;
background-position: top left;
background-attachment: fixed
}
</style>
</head>

<body>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
<p>Gambar tidak ikut ke scroll khan.... </p>
</body>

</html>

Posisi gambar kita nantinya akan menetap dipojok kiri atas dan akan menetap disitu walaupun layarnya kita scroll..

Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....
Gambar tidak ikut ke scroll khan....

Bila ingin gambarnya menghilang waktu discroll, maka rubah value-nya menjadi background-attachment: scroll , maka gambar akan menghilang jika di scroll.
Nah.. , mudah khan..

Background Repeat

Property background-repeat digunakan untuk mengatur pengulangan sebuah gambar background. Ada empat nilai untuk property ini yaitu:
1. repeat (default) - untuk membuat gambar background memenuhi elemen.
2. repeat-x - untuk membuat pengulangan secara horisontal.
3. repeat-y - untuk membuat pengulangan secara vertikal.
4. no-repeat - untuk membuat gambar background ditampilkan sekali saja.

yok maass..., langsung dicoba....

Contoh untuk background-repeat:repeat

<html>
<head>
<style type="text/css">
body
{
background-image: url(d:/Ngeblog/back.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
Coba Background Image di repeat
</body>
</html>

Hasil tampilan kode diatas akan seperti ini:

Coba Background Image di repeat
.
.
.
.
.
.
.

Ini Tampilan untuk background-repeat: repeat-x

Coba Background Image dengan repeat-x
( pengulangan horisontal )
.
.
.
.
.
.
.

Ini Tampilan untuk background-repeat: repeat-y

Coba Background Image dengan repeat-y
( pengulangan vertikal )
.
.
.
.
.
.
.

Ini Tampilan untuk background-repeat: no-repeat

Background Image hanya sekali ditampilkan
( tidak ada pengulangan)
.
.
.
.
.
.
.

Thursday, June 16, 2011

Wednesday, June 10, 2009

Sunday, May 24, 2009

Tuesday, May 19, 2009

Monday, May 18, 2009

Sunday, May 17, 2009

Thursday, April 30, 2009

Header 1 dengan huruf italic

Header 2 dengan huruf normal

Tuesday, April 7, 2009

Header 1 dengan ukuran huruf 100%

Jenis huruf times untuk header 2

Header 1

Header 2

Header 3

Header 4

Sunday, March 29, 2009

Header 1 rata tengah

Header 2 rata kiri

Header 3 rata kanan

Monday, March 23, 2009

Header 1 menggunakan spasi = -2piksel

Header 3 meng

gunakan spasi =

0.5 centi meter

Sunday, March 22, 2009

Warna text Header 1 ini diatur dengan menuliskankode RGB warna

Warna text Header 2 ini di aturdengan menuliskan nilai hexadesimalwarna

Thursday, March 19, 2009

Wednesday, March 18, 2009

Blog Archive

ONLINE SHOPPING

Sudah Siap Nikahhh???

Game HP gratis terbaru

eBook gratis terbaru

Anda Pengunjung ke

Mau Berwira usaha tanpa modal???

Labels

bLOG sOHIB

Please Comment

Followers

Upload file kamu dan Kumpulin Dollarnya

Header 1 menggunakan spasi = -2
piksel

Warna text Header 1 ini di
atur dengan menuliskan
kode RGB warna

Warna text Header 2 ini di atur
dengan menuliskan nilai hexadesimal
warna