untung99play.xyz: PDF Tutorial CSS Dasar DOKUMENTIPS

Tutorial CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR
terlebih dahulu . CSS singkatan dari Cascading Style Sheet. CSS
merupakan sebuah bahasa pemrograman yang fungsinya untuk
menstrukturkan komponen-komponen web yang beragam sesuai dengan
keinginan kita .

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu
atau lebih deklarasi ( Declaration ).

Selector adalah HTML element yang ingin dibuat style nya.
Declaration merupakan isi dari property dan nilai dari CSS.
Pemberian nilai dari property digunakan titik dua ( : ), akhir dari
property digunakan titik koma ( ; )

Contoh CSS

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan
kelompok deklarasi dikelilingi oleh kurung kurawal :

p {color:red;text-align:center;}

CSS Coment

Komentar digunakan untuk menjelaskan kode kita, dan dapat
membantu kita ketika kita mengedit source code di kemudian hari.
Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan /*, dan diakhiri dengan */,
seperti ini :

/*This is a comment*/ p { text-align:center;

/*This is another comment*/ color:black; font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen
tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML,
dan didefinisikan dengan #. Aturan style bawah ini akan diterapkan
pada elemen dengan id = para1

#para1 { text-align:center; color:red; } nb: JANGAN memulai id
dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla
Firefox Selector class digunakan untuk menentukan gaya untuk
sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang
paling sering digunakan pada beberapa elemen . Dengan ini
memungkinkan anda untuk menentukan gaya dan elemen HTML dengan
class yang sama . Selector Class menggunakan atribut class HTML,
dan didefinisikan dengan . Pada contoh di bawah ini, semua elemen
HTML dengan class = centerakan dibuat rata tengah : .center
{text-align:center;} kita juga dapat menentukan bahwa hanya elemen
HTML tertentu yang dipengaruhi oleh kelas. Pada contoh di bawah,
elemen p semua dengan class = centerakan di buat rata tengah :
p.center {text-align:center;} nb: JANGAN memulai nama kelas dengan
angka karena ini hanya didukung di Internet Explorer.

Cara CSS

Tiga Cara untuk Insert CSS : 1. Eksternal style sheet merupakan
ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda
dapat mengubah tampilan seluruh situs Web dengan mengubah satu
file. Setiap halaman harus link ke style sheet menggunakan tag .
Tag masuk ke dalam bagian kepala dengan eksternal style sheet dapat
ditulis dalam bentuk editor teks apapun , dan harus disimpan pada
ekstensi css . sebuah contoh dari file style sheet dibawah ini : hr
{color:sienna;} p {margin-left:20px;} body
{background-image:url(images/back40.gif);} nb: JANGAN meninggalkan
ruang antara nilai properti dan satuan! margin-left: 20 px (bukan
margin-left: 20px) akan bekerja di IE, tapi tidak di Firefox atau
Opera. 2. Internal style sheet merupakan dokumen tunggal html harus
digunakan apabila dokumen tunggal html memiliki gaya yang unik .
XDi bagian ke[pala html anda dapat mendefinisikan gaya internal
dengan menggunakan tag style seperti ini :

hr {color:sienna;} p {margin-left:20px;} body
{background-image:url(images/back40.gif);} 3. Inline style gaya
inline dengan mencampurkan konten dengan presentasi akan banyak
kehilangan keuntungan , maka anda dapat menggunakan metode hemat
dibawah ini : Untuk menggunakan gaya inline Anda menggunakan
atribut style dalam tag yang relevan. Atribut style dapat berisi
properti CSS. berikut contoh bagaimana mengubah warna dan margin
kiri paragraf : This is a paragraph. 4. Multiple Style Sheet Jika
beberapa properti telah ditetapkan untuk pemilih yang sama dalam
style sheet yang berbeda maka nilai-nilai akan diwariskan dari
style sheet lebih spesifik. contoh style sheet eksternal untuk
pemilih h3 : h3 { color:red; text-align:left; font-size:8pt; }
contoh style sheet internal untuk pemilih h3 : h3 {
text-align:right; font-size:20pt; } Jika halaman dengan internal
style sheet link ke style sheet eksternal properti untuk h3 akan
menjadi: color:red; text-align:right; font-size:20pt; Warna
diwariskan dari style sheet eksternal dan teks-alignment dan ukuran
font diganti oleh internal style sheet.

Beberapa Styles Akan Cascade ke Satu :

gaya dapat ditentukan :

didalam sebuah elemen HTML didalam bagian kepala halaman HTML
didalam sebuahj file CSS eksternal

Secara umum kita dapat mengatakan bahwa semua gaya akan cascade
menjadi lembaran baru virtual gaya oleh aturan berikut, di mana
nomor empat memiliki prioritas tertinggi:

Browser default Eksternal style sheet Internal style sheet (di
bagian kepala) Inline style (di dalam elemen HTML)

Jadi gaya inline yang ada di dalam elemen HTML memiliki
prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb
didefinisikan di dalam tag , atau dalam style sheet eksternal ,
atau dalam browser (nilai default).

nb: Jika link ke style sheet eksternal ditempatkan setelah style
sheet internal di HTML, style sheet eksternal akan menimpa style
sheet internal! berikut ini mungkin metode yang dirasa sesuai bagi
pemula jika ingin mempelajari mengenai CSS. Menurut saya CSS itu
adalah sekumpulan KOTAK yang tersusun dengan baik, Thats It.

Jika kemauan anda untuk belajar dibawah 80%, saya sarankan anda
meninggalkan artikel ini, karena dibutuhkan keseriusan yang
cukup.

Hari ke-1 kita akan belajar mengenai sesuatu yang dasar mengenai
CSS, yaitu Box Modeling.

struktur Box-Modeling di CSS (w3school.com)

Coba perhatikan gambar diatas, disana terdapat posisi MARGIN
BORDER PADDING CONTENT.

Item: Istilah yang saya definisikan, Item terdiri dari Padding
dan Content,

Margin: Diluar kotak/Item, seperti ruang hampa di luar
kotak/Item, Border: Diluar kotak/Item, tetapi seperti menempel
dengan Padding dan Content (pinggiran Item), Padding: Didalam
kotak/Item, seperti ruang hampa didalam kotak/Item, Content:
Didalam kotak/Item, Nah ini baru isi nya, seperti TEKS,
GAMBAR/IMAGE, VIDEO, atau

apapun yang anda masukkan.

Tutorial CSS Margin (Batas).

CSS Margin.

Margin membersihkan area di sekitar sebuah elemen (luar
perbatasan). Margin tidak memiliki warna latar belakang, dan
benar-benar transparan. Margin atas, kanan, bawah, dan kiri dapat
diubah secara independen menggunakan properti terpisah. Sebuah
properti margin singkatan juga dapat digunakan, untuk mengubah
semua margin sekaligus.

Kemungkinan Nilai Margin.

Value Description

auto Browser menetapkan margin. Hasil ini tergantung dari
browser.

length Mendefinisikan margin tetap (dalam pixel, pt, em,
dll).

% Mendefinisikan margin dalam% dari elemen yang mengandung.

Hal ini dimungkinkan untuk menggunakan nilai-nilai negatif,
untuk tumpang tindih konten.

Margin sisi individu Dalam CSS, adalah mungkin untuk menentukan
margin yang berbeda untuk sisi yang berbeda:

margin-top:100px; margin-bottom:100px; margin-right:50px;
margin-left:50px;

Margin Singkatan properti. Untuk mempersingkat kode, adalah
mungkin untuk menentukan semua properti margin dalam satu properti.
Hal ini disebut properti steno. Properti singkat untuk semua
properti margin:

margin:100px 50px;

Properti margin yang dapat memiliki dari satu sampai empat
nilai.

margin:25px 50px 75px 100px; o top margin is 25px o right margin
is 50px o bottom margin is 75px o left margin is 100px

margin:25px 50px 75px; o top margin is 25px o right and left
margins are 50px o bottom margin is 75px

margin:25px 50px; o top and bottom margins are 25px o right and
left margins are 50px

margin:25px; o all four margins are 25px

padding.

Padding membersihkan wilayah di sekitar konten (di perbatasan)
dari elemen. Padding dipengaruhi oleh warna latar belakang dari
elemen. Padding atas, kanan, bawah, dan kiri dapat diubah secara
independen menggunakan properti terpisah. Sebuah Properti Padding
singkatan juga dapat digunakan, untuk mengubah semua Padding
sekaligus.

kemungkinan Nilai. Nilai Dekripsi

length Mendefinisikan padding tetap (dalam pixel, pt, em,
dll).

% Mendefinisikan bantalan di% dari elemen yang mengandung.

Padding sisi individu.

Dalam CSS, adalah mungkin untuk menentukan bantalan yang berbeda
untuk sisi yang berbeda:

padding-top: 25px; padding-bottom: 25px; padding-right: 50px;
padding-left: 50px;

Padding Singkatan properti.

Untuk mempersingkat kode, adalah mungkin untuk menentukan semua
properti padding di satu properti. Hal ini disebut properti steno.
Properti singkat untuk semua properti padding:

padding:25px 50px;

Properti padding dapat memiliki dari satu sampai empat
nilai.

padding:25px 50px 75px 100px; o top padding is 25px o right
padding is 50px o bottom padding is 75px o left padding is
100px

padding:25px 50px 75px; o top padding is 25px o right and left
paddings are 50px o bottom padding is 75px

padding:25px 50px; o top and bottom paddings are 25px o right
and left paddings are 50px

padding:25px; o all four paddings are 25px

Contoh:

1) buat folder bernama hari1 , didalam nya buat file kosong
namanya index.html ,

2) buka file index.html menggunakan Notepad, kita akan membuat
box-model dengan menggunakan file HTML ini.

3) buat kerangka dasar dalam file index.html seperti dibawah ini
dan sebuah file css dengan nama style.css Document

4) setelah kita buat kerangka dasar, mari kita membuat wadah
untuk Item atau box-model Document

5) Coba jalankan file tersebut di dalam browser. Maka akan belum
nampak apa-apa.

6) Sekarang mari kita buat properties pada boxModel seperti
tinggi, lebar, dan warnanya, tulis di file style.css. .boxModel{ /*
buat selector “class=’boxModel'” ,pada tag div */ width: 50px;
/*properties lebar*/ height: 50px; /* properties tinggi */
background: red; /* properties background */ }

7) setelah itu coba jalankan, tampilan nya seperti dibawah

boxModel sudah terlihat

seperti yang kita pelajari sebelumnya bahwa sebuah Item
mempunyai Margin, Border, Padding, dan Content. Warna merah disini
mencakup part dari Item(Padding + Content) saja.

Pertanyaannya, Mengapa kotak tidak menempel pada pojok atas dan
pojok kiri layar? dan seperti ada ruang kosong disana?

Jawabannya mudah ,disana terdapat Margin. tapi margin siapa??
boxModel?

tentu saja bukan, karena kita tidak mengeset nilai margin
boxModel sebelumnya, berarti margin Body yang ter-set secara
default dari settingan browser.

8) Mari kita buktikan bahwa Margin itu benar-benar ada, caranya
kita hilangkan margin dengan me-set nilai nya 0. body{ /*buat
selector body*/ margin:0; /*set nilai margin menjadi 0*/ }
.boxModel{ /* buat selector “class=’boxModel'” ,pada tag div */
width: 50px; /*properties lebar*/ height: 50px; /* properties
tinggi */ background: red; /* properties background */ }

coba jalankan kembali, maka tampilannya menjadi seperti ini.

margin hilang dan sebenarnya margin itu benar-benar ada, hanya
saja tidak terlihat.

9) Sekarang mari kita set margin pada boxModel. body{ /*buat
selector body*/ margin:0; /*set nilai margin menjadi 0*/ }
.boxModel{ margin:50px; /*set nilai margin*/ /* buat selector
“class=’boxModel'” ,pada tag div */ width: 50px; /*properties
lebar*/ height: 50px; /* properties tinggi */ background: red; /*
properties background */

}

lalu jalankan kembali , maka margin pada boxModel akan
terlihat.

margin boxModel di set 50px

10) selanjut nya mari kita buat Border menampakkan wujudnya.
body{ /*buat selector body*/ margin:0; /*set nilai margin menjadi
0*/ } .boxModel{ /* set nilai properties border, border memliki 3
parameter(tebal, style, warna)*/ border: 5px solid black;
margin:50px; /*set nilai margin*/ /* buat selector
“class=’boxModel'” ,pada tag div */ width: 50px; /*properties
lebar*/ height: 50px; /* properties tinggi */ background: red; /*
properties background */ }

silahkan di jalankan kembali, maka tampilannya akan seperti
ini.

border menampakkan wujudnya

11) Sekarang mari kita bedakan antara Padding dengan Content.
Dengan memberikan teks pada boxModel dan me-set nilai padding.

body{ /*buat selector body*/ margin:0; /*set nilai margin
menjadi 0*/ } .boxModel{ /* set nilai properties border, border
memliki 3 parameter(tebal, style, warna)*/ border: 5px solid black;
margin:50px; /*set nilai margin*/ padding: 50px; /*set nilai
padding*/ /* buat selector “class=’boxModel'” ,pada tag div */

width: 50px; /*properties lebar*/ height: 50px; /* properties
tinggi */ background: red; /* properties background */ }

Jalankan , dan anda akan melihat ini.

Bagian yang tidak terisi text adalah Padding

Kesimpulannya ,

Margin, Border, Padding, dan Content merupakan satu kesatuan
dari sebuah box-model yang anda buat menggunakan CSS, jadi jangan
lupakan salah satu properties nya, atau anda akan mendapat kan
kesulitan pada saat pembuatan sebuah template atau apapun yang
berhubungan dengan CSS.

CSS Styling Background

Properti CSS Background (Latar Belakang) digunakan untuk
menentukan efek latar belakan dari suatu elemen.

Properti yang digunakan dalam CSS Background antara lain :

background-color background-image background-repeat
background-attachment background-position

Background-color

Properti Background-color menetapkan warna latar belakang dari
suatu elemen.

Warna latar berlakang ini didefinisikan dalam pemilih body .

contoh :

body {background-color : #b0c4de ;}

Dengan CSS, warna paling sering ditentukan adalah :

* nilai HEX seperti # FF0000 * sebuah nilai RGB seperti rgb
(255,0,0) * nama warna seperti merah

Background-image

Properti Background-image menentukan warna gambar untuk
digunakan sebagai latar belakang suatu elemen. Secara default,
gambar diulang sehingga mencakup seluruh elemen. Gambar latar
belakang untuk halaman bisa di set seperti ini:

contoh :

body {background-image:url(paper.gif) ;}

Background-repeat

Properti Background-repeat ini digunakan untuk mengulangi
gambar, baik secara vertikal atau horizontal .

Properti :

repeat repeat-x (pengulangan horizontal) repeat-y (pengulangan
vertikal) no-repeat (tanpa pengulangan)

contoh : body { background-image:url(gradient2.png);
background-repeat:repeat-x; } Background-attachment properti
Background-attachment digunakan untuk menentukan apakah gambar
latar belakang tetap atau scroll dengan sisi halaman . Properti
:

scroll fixed inherit

Background-position Properti Background-position digunakan untuk
mengatur posisi awal dari background image

contoh :

body { background-image:url(img_tree.png);
background-repeat:no-repeat; background-position:right top; }

CSS Styling Text

Text Color

Properti warna yang digunakan untuk mengatur warna teks.

Dengan CSS, warna yang paling sering ditentukan oleh:

nilai HEX seperti # ff0000 sebuah nilai RGB seperti rgb
(255,0,0) nama warna seperti merah

Warna default untuk halaman didefinisikan dalam pemilih tubuh /
body.

contoh : body {color:blue;} h1 {color:#00ff00;} h2
{color:rgb(255,0,0);}

Text Alignment Properti text-align digunakan untuk mengatur
alignment horizontal dari sebuah teks. Teks dapat terpusat, atau
berpihak ke kiri atau kanan, atau dibenarkan.Ketika text-align
diatur untuk membenarkan, setiap baris ditarik sehingga setiap
barismemiliki lebar yang sama, dan margin kiri dan kanan lurus
(seperti di majalah dan surat kabar). contoh : h1 {text-align:
center;} p.date {text-align: right;} p.main {text-align:
justify;}

Text Decoration Properti text-decoration digunakan untuk membuat
atau menghapus dekorasi dari teks. Properti text-decoration banyak
digunakan untuk menghapus menggarisbawahi dari linkuntuk tujuan
desain:

contoh :

a {text-decoration: none;}

Hal ini juga dapat digunakan untuk menghias text :

contoh :

h1 {text-decoration: overline;} h2 {text-decoration:
line-melalui;} h3 {text-decoration: underline;} h4
{text-decoration: blink;} Text Transformation Properti teks
transform digunakan untuk menentukan huruf besar dan huruf kecil
dalam sebuah teks. Hal ini dapat digunakan untuk mengubah segalanya
menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf
pertama dari setiap kata.

contoh :

p.uppercase {text-transform: uppercase;} p.lowercase
{text-transform: lowercase;} p.capitalize {text-transform:
memanfaatkan;}

Text Identation Properti teks lekukan digunakan untuk menentukan
indentasi dari baris pertama dari teks. contoh : p {text-indent:
50px;}

CSS Styling Fonts

CSS properti font menentukan keluarga font, keberanian, ukuran,
dan gaya text .

Perbedaan Antara Serif dan Sans-serif Font

CSS Font Keluarga

Dalam CSS, ada dua jenis nama keluarga font :

generik keluarga – sebuah kelompok keluarga font dengan tampilan
yang sama (seperti Serif atau Monospace)

Font keluarga – keluarga font tertentu (seperti Times New Roman
atau Arial)

Generik keluarga Font keluarga Deskripsi

Serif Times New Roman Georgia

Font serif memiliki garis-garis kecil di bagian berakhir pada
beberapa karakter

Sans-serif Arial Verdana

Sans berarti tanpa font-font ini tidak memiliki garis di ujung
karakter

Monospace Courier New Lucida Console

Semua karakter huruf monospace memiliki lebar yang sama

Font Keluarga Keluarga font teks yang dibuat dengan properti
font-family. Properti font-keluarga harus terus beberapa nama font
sebagai sistem fallback. Jika browser tidak mendukung font pertama,
ia mencoba font berikutnya.

Mulailah dengan font yang Anda inginkan, dan diakhiri dengan
sebuah keluarga generik, agar browser memilih font yang sama dalam
keluarga generik, jika tidak ada font lain yang tersedia.

Catatan: Jika nama keluarga font yang lebih dari satu kata, itu
harus dalam tanda kutip, seperti font-family : Times New Roman

Lebih dari satu keluarga font yang ditentukan dalam daftar
dipisahkan-koma :

contoh : p{font-family:Times New Roman, Times, serif;}

Font Style Properti font-style banyak digunakan untuk menentukan
teks miring. Properti ini memiliki tiga nilai:

normal Teks ditampilkan biasanya miring Teks ditampilkan dalam
huruf miring miring teks ini condong (miring sangat mirip dengan
miring, tapi kurang didukung)

Contoh :

p.normal {font-style: normal;} p.italic {font-style: italic;}
p.oblique {font-style: miring;} Ukuran Font Properti font-size set
ukuran teks. Mampu mengatur ukuran teks adalah penting dalam desain
web. Namun, Anda tidak harus menggunakan penyesuaian ukuran font
untuk membuat paragraf terlihat seperti pos, atau pos tampak
seperti paragraf.

Selalu gunakan tag HTML yang tepat, seperti :

untuk heading dan paragraf

Nilai font-size bisa menjadi ukuran absolut, atau relatif .

Absolute Ukuran : Mengatur teks ke ukuran tertentu Tidak
memungkinkan pengguna untuk mengubah ukuran teks dalam semua
browser (buruk karena alasan aksesibilitas) Ukuran absolut berguna
ketika ukuran fisik dari output diketahui

Ukuran Relatif : Mengatur ukuran relatif terhadap elemen
sekitarnya Memungkinkan pengguna untuk mengubah ukuran teks di
browser Jika Anda tidak menetapkan ukuran font, ukuran standar
untuk teks normal, seperti paragraf, adalah 16px (16px = 1em)

Mengatur Ukuran Font dengan Pixel Mengatur ukuran teks dengan
piksel, memberi Anda kontrol penuh atas ukuran teks :

Contoh :

h1 {font-size: 40px;} h2 {font-size: 30px;} p {font-size:
14px;}

Catatan : contoh di atas memungkinkan Firefox, Chrome, dan
Safari untuk mengubah ukuran teks, tapi tidak Internet Explorer.
Mengatur Ukuran Font dengan Em Untuk menghindari masalah ukuran
dengan Internet Explorer, banyak pengembang menggunakan em daripada
piksel.

Unit ukuran em direkomendasikan oleh W3C.

1em sama dengan ukuran font saat ini. Ukuran teks default di
browser adalah 16px. Jadi, ukuran default 1em adalah 16px.

Ukuran dapat dihitung dari piksel untuk mereka dengan
menggunakan rumus ini: piksel / 16 = em

Contoh :

h1 {font-size: 2.5em;} / * 40px/16 = 2.5em * / h2 {font-size:
1.875em;} / * 30px/16 = 1.875em * / p {font-size: 0.875em;} / *
14px/16 = 0.875em * /

Catatan : Dalam contoh di atas, ukuran teks dalam mereka adalah
sama dengan contoh sebelumnya dalam pixel. Namun, dengan ukuran
mereka, adalah mungkin untuk menyesuaikan ukuran teks dalam semua
browser.

Sayangnya, masih ada masalah dengan IE. Ketika mengubah ukuran
teks, menjadi lebih besar dari seharusnya jika dibuat lebih besar,
dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.

Gunakan Kombinasi Persen dan Em Solusi yang bekerja di semua
browser, adalah untuk mengatur default font-size dalam persen untuk
elemen body : Contoh : body {font-size: 100%;} h1 {font-size:
2.5em;} h2 {font-size: 1.875em;} p {font-size: 0.875em;} Catatan :
Kode Anda sekarang bekerja besar! Ini menunjukkan ukuran teks yang
sama di semua browser, dan memungkinkan semua browser untuk
memperbesar atau mengubah ukuran teks !

CSS Styling Links Styling Links Link dapat ditata dengan CSS
properti (misalnya warna, font-keluarga, latar belakang, dll).
Khusus untuk link adalah bahwa mereka bisa ditata berbeda
tergantung pada apa negara mereka masuk Empat link negara
adalah:

a: link – link, yang normal belum dikunjungi a: visited – link
pengguna telah dikunjungi a: hover – link ketika pengguna mouse di
atasnya a: active- link saat itu diklik

contoh :

a: link {color: # FF0000;} / * belum dikunjungi link yang * / a:
visited {color: # 00FF00;} / * mengunjungi link yang * / a: hover
{color: # FF00FF;} / * mouse Link * / a: active{color: # 0000FF;} /
* link yang dipilih * /

Catatan :

Bila pengaturan gaya untuk beberapa link yang menyatakan, ada
beberapa aturan untuk:

a: hover HARUS datang setelah: link dan a: visited a: active
HARUS datang setelah a: hover

Common Link Styles Dalam contoh di atas warna link berubah
tergantung pada apa negara itu masuk Mari kita pergi melalui
beberapa cara umum lainnya untuk link gaya: Teks Dekorasi Properti
text-decoration banyak digunakan untuk menghapus menggarisbawahi
dari link:

contoh :

a: link {text-decoration: none;} a: visited {text-decoration:
none;} a: hover {text-decoration: underline;} a: active
{text-decoration: underline;}

Warna Latar Belakang Properti background-color menetapkan warna
latar belakang untuk link :

contoh :

a: link {background-color: # B2FF99;} a: visited
{background-color: # FFFF85;} a: hover {background-color: #
FF704D;} a: active {background-color: # FF704D;}

Tutorial CSS List List (Daftar) Dalam HTML, ada dua jenis List
(daftar)

Daftar unordered daftar item ditandai dengan. Memerintahkan
daftar daftar item ditandai dengan angka atau huruf

Dengan CSS, daftar bisa ditata lebih lanjut, dan gambar dapat
digunakan sebagai penanda item daftar .. Daftar Item Penanda yang
Berbeda

Jenis penanda daftar item dispesifikasikan dengan daftar
properti-gaya-tipe :

ul.a {daftar-style-type: lingkaran;} ul.b {daftar-style-type:
persegi;}

ol.c {daftar-style-type: atas-Romawi;} ol.d {daftar-style-type:
rendah-alpha;}

Beberapa nilai adalah untuk daftar unordered, dan beberapa
memerintahkan untuk daftar. Sebuah Gambar sebagai Daftar Item Untuk
menentukan gambar sebagai penanda item daftar, gunakan daftar
properti-gaya-gambar :

ul { daftar-gaya-image: url (sqpurple.gif); }

Contoh di atas tidak menampilkan sama di semua browser. IE dan
Opera akan menampilkan gambar-penanda sedikit lebih tinggi
dibandingkan Firefox, Chrome, dan Safari.

Jika Anda ingin gambar-penanda untuk ditempatkan sama di semua
browser, solusi crossbrowser dijelaskan di bawah ini.

Solusi Crossbrowser Contoh berikut menampilkan gambar-penanda
yang sama di semua browser: ul { daftar-style-type: none; padding:
0px; margin: 0px; }

li { background-image: url (sqpurple.gif); background-repeat:
no-repeat; background-position: 0px 5px; padding-left: 14px; }

Contoh Penjelasan :

Untuk ul: Mengatur daftar-gaya-tipe tidak ada untuk menghapus
item daftar penanda Mengatur padding dan margin baik untuk 0px
(untuk cross-browser kompatibilitas)

Untuk li: Mengatur URL gambar, dan menunjukkan hanya sekali
(no-repeat) Posisi gambar di mana Anda inginkan (kiri 0px 5px dan
ke bawah) Posisi teks dalam daftar dengan padding-left

Daftar Properti Singkatan

Hal ini juga dimungkinkan untuk menentukan semua properti daftar
dalam satu, properti tunggal. Hal ini disebut properti steno.
Properti yang digunakan untuk daftar singkatan, adalah daftar
properti gaya:

ul { daftar-gaya: url persegi (sqpurple.gif); }

Bila menggunakan properti singkatan, urutan nilai-nilai
adalah:

Daftar-gaya-tipe Daftar-gaya-posisi (untuk deskripsi, lihat
tabel CSS properti di bawah ini) Daftar-gaya-gamba

Tidak masalah jika salah satu nilai di atas yang hilang, selama
sisanya berada di urutan yang ditentukan.

Contoh dalam membuat menu: Buat file html dengan kode berikut:
Home Tutorial HTML/CSS PHP WordPress Tentang Kami Kontak Kami Buat
file css dengan kode berikut: /*style awal menu dan untuk
menghilangkan list style*/ #menu ul { font-family: Arial, Verdana;
font-size: 14px; margin: 0; padding: 0; list-style: none; }
/*membuat menu menjadi horizontal dengan display block*/

#menu ul li { display: block; position: relative; float: left; }
/*Untuk menyembunyikan ul li (submenu)*/ #menu li ul { display:
none; } /*style awal seblum cursor mouse di arahkan (menu utama)*/
#menu ul li a { display: block; text-decoration: none; color:
#ffffff; padding: 5px 15px 5px 15px; background: #000;
/*margin-left: 1px;*/ white-space: nowrap; } /*style setelah cursor
diarahkan*/ #menu ul li a:hover { background: #666; } /*untuk
memunculkan submenu jika pada sebuah menu utama ada tag il ul
(maksudnya ada tag ul dai dalam tag li)*/ #menu li:hover ul {
display: block; position: absolute; } /*meratakan sub menu kanan
kiri dan menghilangkan fungsi float left (mengembalikan ke
default)*/ #menu li:hover li { float: none; font-size: 11px; }
/*style awal seblum cursor mouse di arahkan (submenu)*/ #menu
li:hover a { background: #3b3b3b; } /*style setelah cursor
diarahkan (submenu)*/ #menu li:hover li a:hover { background: #666;
}

Tutorial CSS Tabel Tabel Batas Untuk menentukan batas tabel
dalam CSS, menggunakan properti perbatasan.

Contoh di bawah ini menetapkan perbatasan hitam untuk meja, th,
dan elemen td:

meja, th, td { border: 1px hitam pekat; }

Perhatikan bahwa tabel dalam contoh di atas memiliki batas
ganda. Hal ini karena kedua meja dan tanggal / td elemen memiliki
perbatasan terpisah. Untuk menampilkan perbatasan tunggal untuk
meja, menggunakan properti perbatasan-runtuh. Tutup Perbatasan
Properti perbatasan-collapse mengatur apakah perbatasan tabel
runtuh ke dalam perbatasan tunggal atau terpisah:

table { perbatasan-collapse: keruntuhan; } meja, th, td {
border: 1px hitam pekat; } Tabel Lebar dan Tinggi Lebar dan tinggi
tabel didefinisikan oleh lebar dan tinggi sifat. Contoh di bawah
set lebar tabel untuk 100%, dan tinggi elemen September sampai
50px:

table { width:100%; } th { height:50px; } Tabel Teks Aligment
Teks dalam tabel sejajar dengan text-align dan vertical-align
properti. Properti text-align set alignment horisontal, seperti
kiri, kanan tengah, atau:

td { text-align: right; }

Properti vertical-align menetapkan alignment vertikal, seperti
atas, bawah, atau tengah:

td { height:50px; vertical-align:bottom; } Tabel Padding Untuk
mengontrol ruang antara perbatasan dan konten dalam sebuah tabel,
gunakan bantalan pada td properti dan elemen th: contoh :

td { padding: 15px; } Tabel Warna Contoh di bawah ini menentukan
warna perbatasan, dan warna teks dan latar belakang elemen th:

meja, td, th { border: 1px hijau; } th { background-color:
green; warna: putih; }

Tutorial CSS Gambar Galeri Galeri Gambar Galeri foto berikut ini
dibuat dengan CSS:

div.img { margin: 2px; border: 1px solid # 0000FF; tinggi: auto;
width: auto; float: left; text-align: center; } div.img img {
display: inline; margin: 3px; border: 1px solid # ffffff; }

div.img a: hover img { border: 1px solid # 0000FF; } div.desc {
text-align: center; font-weight: normal; width: 120px; margin: 2px;
}

Tambahkan deskripsi dari gambar di sini Tambahkan deskripsi dari
gambar di sini Tambahkan deskripsi dari gambar di sini Tambahkan
deskripsi dari gambar di sini

Membuat Form Login Website

Login Form

Login Form Username Password File css: html{ background-color:
#6e6e6e; } body { width: 500px; height: 300px; margin: 150px auto;
padding-top: 75px; background: url(images/login-form.png) no-repeat
left top; } #wrapper{ padding: 10px 70px 0 70px; font-family:
Arial, Helvetica, sans-serif; color: #0d5fac; } #wrapper h2{
font-size: 18px; } .form-login{ padding: 2px 3px; width: 200px;
border: 1px solid #0d5fac; border-spacing: 1px; font-size: 16px;
color: #0d5fac;

} .btn-login{ width: 89px; height: 36px; cursor: pointer;
border: none; background: url(images/login-button.png)no-repeat
left top; }

Layouting Menggunakan CSS Layout umum sebuah website Pada
umumnya, layout dasar sebuah tampilan halaman web atau lebih
spesifiknya blog terdiri dari empat bagian:

1. Header 2. Body / Content Area 3. Sidebar 4. Footer

Pada banyak kasus, layout sebuah tampilan halaman web bisa saja
terdiri dari satu body dan dua sidebar (3 column site) atau bahkan
tanpa sidebar sama sekali (one column). Ada juga yang berupa
kombinasi: dua

kolom (body + sidebar) di halaman depan dan satu kolom (body
saja ) di halaman single post. Model ini dianut oleh kubrick yang
merupakan default theme wordpress hingga versi 2.9.

Mengukur boks kerangka halaman web Konsep dasar CSS: Pada
dasarnya, semua elemen dalam web desain merupakan boks berupa
persegi empat. Sekarang, saatnya mengukur boks boks elemen layout
tampilan web. Pengukuran elemen ini bisa dilakukan menggunakan
software igraphic editing seperti photoshop, plugin MeasureIt
(Firefox) atau software berbasis Adobe Air seperti Pixus.

Note: untuk langkah ini, ukur saja elemen dasar (layout)-nya
terlebih dahulu. Pengukuran detailnya dilakukan kemudian.

Ingat! Width / Height suatu elemen merupakan penjumlahan dari
width / height + padding + border

Membuat kerangka dari xHTML dan CSS Katakanlah gambar diatas
akan kita gunakan sebagai acuan. Maka panduannya adalah sebagai
berikut:

Header

Width (lebar) 960 piksel Height (tinggi) 200 piksel Background
putih (hexacode: #fff) Border (garis pembatas / stroke) 1 piksel
berwarna merah tua (hexacode: #920000) Margin-bottom (jarak elemen
ke elemen dibawahnya) 10 piksel)

Body

Width (lebar) 640 piksel Height (tinggi) fleksibel tergantung
jumlah konten Background putih (hexacode: #fff) Border (garis
pembatas / stroke) 1 piksel berwarna merah tua (hexacode: #920000)
Margin-right (jarak kanan ke elemen lain) 10 piksel

Sidebar

Width (lebar) 210 piksel Height (tinggi) fleksibel tergantung
jumlah konten Background putih (hexacode: #fff) Border (garis
pembatas / stroke) 1 piksel berwarna merah tua (hexacode:
#920000)

Footer

Width (lebar) 960 piksel Height (tinggi) 160 piksel Background
putih (hexacode: #fff) Border (garis pembatas / stroke) 1 piksel
berwarna merah tua (hexacode: #920000) Margin-top (jarak antara
elemen ke elemen diatasnya) 10 piksel

Tambahan: Body & Sidebar Wrapper

Width (lebar) 210 piksel Height (tinggi) fleksibel tergantung
jumlah konten Background putih none Border (garis pembatas /
stroke) none

Untuk membuat elemen Body & Sidebar berada di tengah, kita
perlu membuat boks tak terlihat yang berfungsi sebagai wrapper
(bungkus) kedua elemen tersebut yang berfungsi mengatur posisi
kedua elemen tersebut.

Elemen body dan sidebar dibungkus dengan wrapper karena kedua
elemen tersebut akan di-float:left agar memiliki posisi yang
berdampingan. Elemen yang diberi float:left atau right tidak bisa
dibuat margin:auto.

Penulisan xHTML dan CSS

Saatnya membuka editor teks dan menulis kode. Berikut ini adalah
kode xHTMLnya. Buka Editor, copy paste kode ini, dan save dengan
nama index.html.

Baris pertama merupakan deklarasi dari file memberitahu peramban
(browser) bahwa file tersebut merupakan file xhtml

Kode yang dibaca oleh browser merupakan semua yang terdapat di
antara tag dan tag penutup (closing tag)

Kode yang berada diantara tag dan tag penutup berisi informasi
mengenai halaman xhtml tersebut, dan informasi eksternal seperti
meta title, lokasi file CSS / JavaScript yang mendukung tampilan
file tersebut, lokasi favicon dari file tersebut, deklarasi fungsi
JavaScript, dll. Informasi yang ditulis di area ini tidak akan
dimunculkan di halaman browser

Kode yang berada diantara tag dan tag penutup akan dimunculkan
di layar browser

Meta tag yang berada di baris keempat berfungsi untuk memuat
file CSS terpisah kedalam halaman web. Fungsi dari file CSS ini
adalah untuk men-styling halaman web yang memuatnya.

Markup / tag merupakan markup / tag yang menentukan bagian /
section dalam satu halaman web. tidak memiliki efek apa-apa secara
visual jika tidak di style menggunakan CSS, dan tidak memiliki
nilai secara semantic.

Id=”” merupakan penanda yang digunakan untuk menandai suatu
elemen. Elemen yang telah ditandai menggunakan ID atau class ini
kemudian dapat dimanipulasi tampilannya menggunakan CSS, dan bahkan
dimanipulasi behavior-nya menggunakan JavaScript. Lebih jelas
mengenai ID dan class dapat diketahui di artikel ini.

Sekarang buka file baru (Ctr + N), copy paste kode CSS di bawah,
dan save sebagai style.css di dalam direktori yang sama dengan file
index.html diatas.

/* teks ini tidak akan dieksekusi oleh browser */

#header{

width:958px;

height:200px;

border:1px solid #920000;

margin:0 auto 10px auto;

}

#body-sidebar-wrapper{

width:960px;

margin:0 auto;

}

#body-sidebar-wrapper:after{

content: “.”;

visibility: hidden;

display: block;

height: 0;

clear: both;

}

#body{

float:left;

width:638px;

margin:0 10px 0 0;

border:1px solid #920000;

}

#sidebar{

float:left;

width:308px;

border:1px solid #920000;

}

#footer{

width:958px;

height:160px;

border:1px solid #920000;

margin:0 auto;

margin-top:10px;

}

#header memanipulasi elemen yang memiliki id=header. Demikian
juga dengan fungsi lainnya. Width menentukan lebar suatu elemen
Height menentukan tinggi suatu elemen Border menentukan garis batas
/ stroke suatu elemen Margin menentukan jarak elemen ke elemen
lainnya Float berfungsi memadatkan suatu elemen. Pseudo class
:after dan value-nya berfungsi untuk mengatasi Collapsing yang
dihasilkan oleh float.

Lebih detail mengenai float collapsing bisa dibaca di artikel
All About Float yang sudah disebutkan diatas.