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.