LAYER DAN HYPERLINK CSS

1. LAYER
a. Untuk membuat sebuah layer, diharuskan sebelumnya menentukan atribut posisi untuk style, dapat sebagai posisi absolute atau posisi relative.
< div style=”position:relative; …..
b. Posisi itu sendiri didefenisikan dengan property top dan left.
Dan dimana layer berada pada posisi top maka akan dedefinisikan dengan atribut z-index.
c. Kegunaan layer :
i. Elemen yang melayang / banner diatas halaman web
ii. Permainan yang menggerakkan objek.
iii. Menu yang kelua / pop up ketika dipicu.
iv. Menu yang menjadi terlihat ketika dipicu.
v. Dll.
Contoh :

LAYER 2

2. HYPERLINK

- A:LINK ; menentukan style untuk link normal yang belum pernah dikunjungi.
a:link {text-decoration:none; color:yellow; }
- A:VISITED ; menentukan style untuk link yang telah dikunjungi.
a:visited {text-decoration:none; color:blue; }
- A:ACTIVE ; menentukan style untuk link yang aktif dikunjungi.
a:active {text-decoration:none; color:???; }
- A:HOVER ; menentukan style untuk hover link (suatu keadaan dimana kursor melintas di atas sebuah link.
a:hover {text-decoration:none; }
a:hover {text-decoration:none; background-color:gray; }

WARNA & LATAR BLKANG CSS

SETTING WARNA
Ada tiga opsi dalam menentukan warna dengan menggunakan CSS :
1. Setting warna latar depan untuk isi,
2. Setting warna belakang untuk area,
3. Setting gambar latar belakang untuk digunakan dalam area tersebut.

1. Nilai Warna Common Name ; menggunakan warna dengan menggunakan nilai warna common name, yaitu dengan memasukkan warna yang diinginkan, contoh : { color:blue; background-color:lime; }
2. Nilai Warna Hexadecimal ; adalah sistem warna dengan basisi 16 angka. Angka hex diawali dengan karakter (#) dan dapat terdiri dari tiga atau enam digit angka. Contoh : { color:#00ffff; background-color:#00ccff; }
3. Nilai Warna RGB ; dengan menggunakan nilai warna RGB kita dapat menentukan warna dengan menggunakan nilai RGB dengan memasukkan nilai dari warna merah, hijau, dan biru (Red, Green, Blue), seperti contoh : {color:rgb(255,255,204); }

PROPERTY WARNA DAN LATAR BELAKANG

1. Warna ; warna dalam CSS dapat dibuat menggunakan property ”color” dan diikut dengan ”nilai atau nama warna”. Nilai warna untuk latar belakang tersebut dapat mengunakan nilai warna common name, nilai warna heksadesimal, dan nilai warna RGB.
2. Warna Latar atau warna background memiliki dua nilai, yaitu :
”transparent” untuk membuat warna latar menjadi transparan atau tidak terlihat, dan dengan menentukan warna yang diinginkan.
Background-color:transpernt
Background-color:lime
3. Gambar Latar ; untuk menempatkan gambar latar yang akan menjadi pemanis sebuah halaman web atau hanya untuk sebuah elemen tertentu saja.
Background-image:none
Background-image:url{}
Background-image:url(picture1.jpg);
4. Latar Berulang ; karena meletakkan sebuah gambar dengan ukuran yang kecil maka dalam browser gamabr tersebut ditampilkan sesuai dengan ukuran gambar sebenarnya. Dalam CSS untuk mengontrol perulangan gambar yang dimaseukkan dengan menggunakn propoerty ”background-repeat”.
Property ”Background-repeat” : Nilai : ”repeat”, ”repeat-x”, ”repeat-y”, ”no-repeat”
a. Background-repeat:repeat ; yaitu membuat gambar yang dimasukkan menjadi berulang hingga keseluruhan halaman web tertutup seperti menentukan gambar biasa dalam dokumen HTML.
b. Background-repeat:repeat-x ; yaitu mengulang gambar yang diletakkan dalam dokumen web yang dibuat secara horizontal hingga memenuhi halaman web dan tidak mengulang secara vertical.
c. Background-repeat:repeat-y ; yaitu mengulang gambar yang diletakkan dalam dokumendibuat secara vertical hingga memenuhi halaman web dan tidak mengulang secara horizontal.
d. Background-repeat:no-repeat ; tidak akan mengulang gambar sama sekali
Background-repeat:repeat-y;

5. Attachment Layar ; untuk menentukan apakah sebuh gambar latar tidak akan ikut bergerak jika kita scroll mouse ke atas dan ke bawah dengan menggunakan property ”background-attachment”. Nilai property adalah ”scroll” jika anda inign agar gambar ikut bergerak ketika anda scroll mouse ke atas maupun ke bawah, ”fixed” jika anda ingin agar gambar tidak ikut bergerak ketiak anda scroll maouse.
Background-attachment:fixed;
6. Posisi Latar ; Posisi gambar dan latar belakang dalam CSS dapa diatur secara tepat dalam CSS dengan menggunakan property ”background-position” dengan Nilai property :
””, yaitu dengan menggunakan posisi dalam ukuran persen(%),
””, yaitu dengan menggunakan posisi dengan ukuran panjang yaitu pixel(px),
”top” yaitu menentukan posisi pada atas halaman web,
“center” yaitu dengan menentukan posisi pada tengah halaman web,
“bottom” yaitu dengan menentukan posisi pada halaman web,
“left” yaitu menentukan posisi gambar pada cébela kirin halaman web, dan
“right” yaitu dengan menentukan posisi pada cébela kanan halaman web.
Background-position: 75px 0px

FONT DAN TEKS DALAM CSS

Font, digunakan untuk pengaturan jenis model huruf yang digunakan

Property Font dalam CSS :
1. Font-Family: Nilainya berupa nama font atau generic font.
Font-family : Verdana
Font-family : Verdana, Helvetica, Arial
2. Font Style : Nilainya beisi ”normal” untuk style font normal, ”italic” untuk style font miring, ”oblique” untuk style font tebal.
Font-style: normal
Font-style:italic
Font-style:oblique
3. Font-Variant Nilainya dapat berisi “normal” untuk variant font normal dan ”small-caps” untuk membuat variant font besar.
Font-variant:normal
Font-variant:small-caps
4. Font-Weight :atau dikenal ketebalan font dengan property :”font-weight”. Nilai property
- “normal” untuk ketebalan normal,
- “bold” untuk ketebalan font paling tebal,
- “bolder” untuk ketebalan font agak tebal,
- “lightger” untuk ketebalan font lebih kecil/kurus,
- ”100-900” untuk ketebalan font dengan nilai antara 100 hingga 900
Font-weight:normal
Font-weight:bold
Font-weight:bolder
Font-weight:lighter
Font-weight:300
5. Font-size : digunakan untuk menentukan ukuran dari font. Adapun nilai adalah ”normal” untuk ukuran font normal, atau menentukan dengan ukuran baik inci(in), centimeter(cm), ems(em), persentase(%), piksel(px) atau point(pt), ”absolute” dengan menentukan ukuran font absolute, ”relative” dengan menentukan ukuran font relative.
a. Normal : font-size:normal
b. Lenght : font-size:15px, font-size:15pt
c. Absolute : font-size:xx-small / x-small / small / medium / large / x-large / xx-large
d. Realtive : font-size:smaller, font-size:larger
e. Percentage : font-size:75%



Teks digunakan untuk mengatur pemodelan susunan teks yang ditampilkan.

1. Line-height ; untuk mengatur tinggi antar baris font. Nilai property line-height adalah ”normal” untuk tinggi font normal, “number” atau nomor untuk memasukkan angka tanpa nilai ukuran, “length” untuk menentukan panjang dengan ukuran, dan percentage untuk menentukan dalam persentase.
Line-height:normal
Line-height:1.5
Line-height:25px
Line-height:100%
2. Text-Decoration ; menentukan nilai dekorasi dari sebuah font.
Nilai dari text-decoration berupa :
”none” jika tidak terdapat dekorasi,
”under-line: jika tidak ingin menggunakan garis bawah,
”overline” jika teks akan menggunakan garis atas,
”line-throungh” jika teks akan menggunakan garis melintang dalam teks, dan ”
”blink” jika teks ingin terlihat berkedip.
Text-decoration:blink
3. text-transform ; berfungsi untuk memformat teks ke dalam bentuk format yang diinginkan. Nilainya berupa :
”none” jika tidak menggunakan format text-transform,
”capitalize” jika teks akan menggunakan huruf besar di awal kata,
”uppercase” jika seluruh teks akan menggunakan hurfu besar di tiap katanya,
”lowercase” jika seluruh teks akan menggunakan huruf kecil di tiap katanya.
Text-transform:none
Text-transform:capitalize
Text-transform:uppercase
Text-transform:lowercase
4. Text-Align ; berfugsi untuk membuat perataan (aligment) yang diinginkan. Nilai text-align berupa :
“left” untuk membuat perataan ke sebelah kiri,
“right” untuk membuat perataan ke sebelah kanan,
“center untuk membuat perataan ke tengah,
“justify” untuk membuat perataan hingga ke ujung garis tepi (justify).
Text-align:left / right / center / justify.
5. Text-Indent ; berguna untuk memberikan lekuk pada awal paragraph text atau indent paragraph. Nilai property text-indent adalah “length” untuk menentukan ukuran panjang dalam piksel(px), dan “percentage” untuk menentukan nilai dalam pesentase(%).
Text-indent :15px
Text-indent:15%
6. White-space ; berguna untuk memperlihatkan keseluruhan space dalam teks. Nilai dari white-spacem adalah “normal” untuk menyembunyikan space dalam teks dan “pre” untuk memperlihatkan keseluruhan space dalam teks.
White-space:pre