Saturday 24 October 2015

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 = “center”akan 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 = “center”akan 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 <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
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 :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
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 :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
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 <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).
nb:  Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!
Pengertian 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  .
Soal gaya Masalah Besar
HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.
HTML itu dimaksudkan untuk menentukan isi dari sebuah dokumen, seperti:
<h1> Ini adalah heading </ h1>
<p> Ini adalah sebuah paragraf. </ p>
Ketika tag seperti <font>, dan atribut warna ditambahkan dengan spesifikasi HTML 3.2 , mulai mimpi buruk bagi pengembang web. Pengembangan situs web yang besar , dimana informasi font dan warna yang ditambahkan ke setiap halaman menjadi proses yang panjang dan mahal.
CSS Menyimpan Banyak Kerja .
CSS mendefinisikan cara elemen HTML yang akan ditampilkan.
Gaya biasanya disimpan dalam file css eksternal . Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web hanya dengan mengedit satu file tunggal .
Tutorial 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 Styling Background
Properti CSS Bakground (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”
Bakcground-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;
}
Aktifkan javascript browser anda bos!
CSS Styling Text
CSS 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 ininjuga 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 Fonts
CSS properti font menentukan keluarga font, keberanian, ukuran, dan gaya text .
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 :
<h1> – <h6> untuk heading dan paragraf <p>
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 !
Tutorial 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 = “center”akan 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 = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.
Tutorial Menggunakan 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 <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
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 :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
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 :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
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 <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).
nb:  Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!



CSS Styling Links
CSS 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 negaramereka 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 Tampilan dan Visibilitas
Properti menentukan tampilan dari atau bagaimana elemen ditampilkan, dan properti visibilitas menentukan jika suatu elemen akan terlihat atau disembunyikan.
Menyembunyikan sebuah Elemen – display: none atau visibility: hidden
Menyembunyikan elemen dapat dilakukan dengan menyetel properti layar untuk “none” atau properti visibilitas untuk “tersembunyi”. Namun, perhatikan bahwa kedua metode menghasilkan hasil yang berbeda:
visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya. Unsur akan disembunyikan, tapi masih mempengaruhi tata letak.
h1.hidden {visibility:hidden;}
display: none menyembunyikan elemen, dan tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman akan ditampilkan sebagai elemen yang tidak ada:
h1.hidden {display:none;}
Tampilan CSS – Blok dan Elemen Inline
Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah itu.
Contoh unsur-unsur blok:
  •      <h1>
  •      <p>
  •      <div>
Sebuah elemen inline hanya membutuhkan sebagai lebar sebanyak yang diperlukan, dan tidak memaksa jeda baris.
Contoh elemen inline:
  •      <span>
  •      <a>
Bagaimana Mengubah sebuah Elemen Tampilkan ?
Mengubah elemen inline untuk suatu elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.
Contoh berikut menampilkan daftar item sebagai elemen inline:
li {display:inline;}
Contoh berikut akan menampilkan rentang unsur sebagai unsur-unsur blok:
span {display:block;}
Catatan: Mengubah jenis tampilan elemen perubahan hanya bagaimana elemen ditampilkan, BUKAN apa jenis elemen itu. Sebagai contoh: Sebuah elemen inline diatur untuk menampilkan: blok tidak diperbolehkan untuk memiliki elemen blok bersarang di dalamnya.
Bagaimana untuk menampilkan elemen sebagai elemen inline ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen inline.Bagaimana untuk menampilkan elemen sebagai elemen blok ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen blok.Cara membuat jatuhnya elemen tabel
Contoh ini menunjukkan bagaimana membuat sebuah keruntuhan elemen tabel.
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.r
Tutorial CSS Bergaris.
CSS Garis.
Garis besar adalah garis yang ditarik sekitar elemen, di luar tepi perbatasan, untuk membuat elemen “menonjol”.
Sifat-sifat garis menentukan gaya, warna, dan lebar garis besar.
Namun, berbeda dari properti perbatasan.
Outline ini bukan merupakan bagian dari dimensi elemen, oleh karena itu lebar elemen dan sifat ketinggian tidak mengandung lebar garis.
Semua Garis Properti CSS.
Nomor dalam kolom “CSS” menunjukkan di mana CSS versi properti didefinisikan (CSS1 atau CSS2).
Property
Deskripsi
Nilai
CSS
outline
Mengatur semua properti dalam satu deklarasi garis
outline-color
outline-style
outline-width
inherit
2
outline-color
Mengatur warna garis besar
color_name
hex_number
rgb_number
invert
inherit
2
outline-style
Mengatur gaya suatu garis
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width
Mengatur lebar garis besar
thin
medium
thick
length
inherit


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;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px
  • margin:25px 50px 75px;
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px
  • margin:25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px
  • margin:25px;
  • all four margins are 25px


Posted by at No comments:
Subscribe to: Posts (Atom)