1.1 Pendahuluan
Adalah sekumpulan kode yang digunakan untuk mengformat, mengendalikan tampilan isi dalam suatu halaman web.
Ada 2 jenis :
1. Bersifat eksternal, tersimpan berupa file css. Memudahkan dalam pengeditan karena biasanya dihubungkan dengan link.
2. Bersifat internal, tersimpan di halaman web. Bila terjadi perubahan format, akan harus melakukan banyak pengeditan pada semua file.
1.2 Memahami CSS
Diberikan dalam bentuk kode kode yg dikumpulkan dan merupakan pernyataan yg diciptakan oleh HTML (selector). Kemudian dinyatakan dalam bentuk properti dan nilai.
Contoh :
h1 {color: #F00;}
body {color: red ; background:black;}
h2 {font-size : 16px ; font:-weight: bold;}
Properti CSS dan kesatuan yg saling mendukung disebut deklarasi.
1.3 Mengelompokkan Properti
Kadang kita harus mengubah properti sekaligus atau dengan cara mengelompokkan deklarasi dibatasi dengan tanda titik koma (;) .
h1 { color:#F00;
font-family : :Arial Black”, Gadget,sans-serif;
text-align : center;}
Pengelompokan selector:
H2, p, em {color : red}
1.4 Turunan property
Contoh :
ol {color:#F00;}
ul { color:#0F0;}
===========================
<ol><li>test</li><li>css</li> </ol> <ul><li>test</li><li>css</li></ul>
1.5 Membuat class baru dan id inspector
Class diawali dengan tanda titik (.)
Contoh class:
.testhijau {
color: #55DF00;}
Cara memangilnya:
<p><span class="testhijau">
1.6 Membuat class baru dan id inspector
Id inspector
Diawali dengan tanda ostotrop (#)
Contoh Id Inspector:
#footer { padding: 0 10px;
background:#55DF00;}
Cara memangilnya:
<div id="footer">
1.7 Cara menulis CSS
1. External Style Sheet
Ada 2 metode:
- Metode Link:
<link href=“formatjudul.css” rel =style sheet type=“text/css”>
- Metode Impor:
<style type=“text/css”>
<!- -@import url(“formatbaru.css”); -></style>
1.8 Cara menulis CSS
Embedes Style
Metode penulisan CSS dengan meletakan di dalam sepasang tag <style>…</style>
Biasanya diletakan pada tag <head>, meskipun sebenarnya bisa diletakan di bagian manapun dari halaman web.
- Inline Style
Metode penulisan CSS yang ditulis di dalam tag HTML.
Contoh:
<div id=“apDiv1”
style= “position:absolute; visibility:inherent ; left:314px;
top:62px></div>
1.9 Bekerja dengan Panel css style
Cara membuka Panel CSS:
Cara1 : Menu Window – CSS Style
Cara2 : Klik panel CSS Style pada group panel sisi kanan jendela
Cara3 : Shif + F11
4.10 Memahami tampilam mode all
Ada 3 jenis tampilan:
1. Category Vew, menampilkan properti berdasarkan kategory masing masing. Font,Background, Block dll
2. List View, untuk menampilkan properti dala urutan abjad A-Z.
1.10 Memahami tampilan mode current
Mode Current memiliki 3 bagian:
1.11 Membuat style css
Cara menampilkan dialog New CSS Rule:
Cara 1: Pilih menu Format – CSS Style – New
Cara 2: Di panel CSS Style, klik tombol New CSS Rules
Cara 3 :Klik tombol CSS pada panel properties – Klik Edit Rule.
1.12 Membuat style css
Selector Type:
- Class, untuk membuat style yg dapat diterapkan pada beberapa elemen HTML sbg atribut class.
- ID, untuk enggambarkan suatu format tag yang berisi ID spesifik.
- Tag, menggambarkan sebuah format tag HTML yang spesifik.
- Compound, kode campuran bisa 2 atau lebih class, tag, dan ID scr bersama sama.
1.13 Membuat style css
Choose where your rule will be defined :
1. This Document Only, untuk menempelkan style CSS pada dokumen yg aktif, biasanya diletakan pada bagian head.
2. New Style Sheet File, untuk membuat style CSS sbg file tersendiri (external file)
3. The Style Sheet, untuk menempatkan kode di dalam lembar style yang siap di tempatkan pada jendela dokumen .
1.14 Memodif Style CSS
Cara menampilkan dialog CSS RuleDefinition:
1. Buka panel CSS Style.
2. Double klik nama CSS yang akan diatur.
1.15 Mengatur properti css
Keterangan properti pada kategori Type:
Font-family, untuk mengatur kelarga huruf.
Font-size, untuk mengatur ukuran huruf.
Font-style, untk mengatur huruf menjadi tampilan normal.
Line-height, mengatur tinggi baris di atas teks.
Text-decoration, digunakan untuk menagtur efek garis bawah, efek coret atau efek blink.
Font-weight, untuk mengatur ketebalan huruf.
Font-variant, untuk menangatur huruf menjadi huruf kapital berukuran kecil.
Text-transform, mengatur bentuk penulisan atau besar kecilnya huruf.
Color, untuk mengatur warna text
4.16 Mengatur properti css
Keterangan properti pada kategori Background:
Backgroud-color, mengatur warna background
Background-image , mengatur gambar sebagai background
Background-repeat , menentukan pengulangan background:
- no-repeat, gambar tidak digandakan
- repeat , gambar diulang
- repeat-X, gambar diulang secara horisontal
- repeat-y, gambar diulang secara vertikal
Background attachment, menagtur tampilan pasti atau menggulung
Background-position x dan y, menentukan posisi awal penempatan gambar
1.16 Mengatur properti css
1.17 Mengatur properti css
4.18 Mengatur properti css
Keterangan properti pada kategori Border: Style, memilih bentuk border. Width, memilih ketebalan borderColor, memilih warna border.
4.18 Mengatur properti css
Keterangan properti pada kategori List:
4.19 Mengatur properti css
Keterangan properti pada kategori Positioning:
1.7 Cara menulis CSS
1. External Style Sheet
File berisi kode CSS yang menghubungkan satu atau lebih halaman web. Bila ingin merubah beberapa halaman web cukup 1 file saja yang di ubah.
- Metode Link:
<link href=“formatjudul.css” rel =style sheet type=“text/css”>
- Metode Impor:
<style type=“text/css”>
<!- -@import url(“formatbaru.css”); -></style>
1.8 Cara menulis CSS
Embedes Style
Metode penulisan CSS dengan meletakan di dalam sepasang tag <style>…</style>
Biasanya diletakan pada tag <head>, meskipun sebenarnya bisa diletakan di bagian manapun dari halaman web.
- Inline Style
Metode penulisan CSS yang ditulis di dalam tag HTML.
Contoh:
<div id=“apDiv1”
style= “position:absolute; visibility:inherent ; left:314px;
top:62px></div>
1.9 Bekerja dengan Panel css style
Cara membuka Panel CSS:
Cara1 : Menu Window – CSS Style
Cara2 : Klik panel CSS Style pada group panel sisi kanan jendela
Cara3 : Shif + F11
4.10 Memahami tampilam mode all
Ada 3 jenis tampilan:
1. Category Vew, menampilkan properti berdasarkan kategory masing masing. Font,Background, Block dll
2. List View, untuk menampilkan properti dala urutan abjad A-Z.
1.10 Memahami tampilan mode current
Mode Current memiliki 3 bagian:
Summary for selection, menampilkan properti CSS yang sedang dipilih di dalam jendela dokumen.Rules, menampilkan bagian bagian dalam jendela dokumen yang enggunakan CSS yang sedang aktif.Properti for “Nama Rule”, menampilkan properti dari CSS yang terpilih kita dapat merubahnya disini.Show Only Set Properties, untuk menampilkan properti yang terpasang atau yan digunakan pada CSS yang terpilih di bagian All Rules.
Cara menampilkan dialog New CSS Rule:
Cara 1: Pilih menu Format – CSS Style – New
Cara 2: Di panel CSS Style, klik tombol New CSS Rules
Cara 3 :Klik tombol CSS pada panel properties – Klik Edit Rule.
1.12 Membuat style css
Selector Type:
- Class, untuk membuat style yg dapat diterapkan pada beberapa elemen HTML sbg atribut class.
- ID, untuk enggambarkan suatu format tag yang berisi ID spesifik.
- Tag, menggambarkan sebuah format tag HTML yang spesifik.
- Compound, kode campuran bisa 2 atau lebih class, tag, dan ID scr bersama sama.
1.13 Membuat style css
Choose where your rule will be defined :
1. This Document Only, untuk menempelkan style CSS pada dokumen yg aktif, biasanya diletakan pada bagian head.
2. New Style Sheet File, untuk membuat style CSS sbg file tersendiri (external file)
3. The Style Sheet, untuk menempatkan kode di dalam lembar style yang siap di tempatkan pada jendela dokumen .
1.14 Memodif Style CSS
Cara menampilkan dialog CSS RuleDefinition:
1. Buka panel CSS Style.
2. Double klik nama CSS yang akan diatur.
1.15 Mengatur properti css
Keterangan properti pada kategori Type:
Font-family, untuk mengatur kelarga huruf.
Font-size, untuk mengatur ukuran huruf.
Font-style, untk mengatur huruf menjadi tampilan normal.
Line-height, mengatur tinggi baris di atas teks.
Text-decoration, digunakan untuk menagtur efek garis bawah, efek coret atau efek blink.
Font-weight, untuk mengatur ketebalan huruf.
Font-variant, untuk menangatur huruf menjadi huruf kapital berukuran kecil.
Text-transform, mengatur bentuk penulisan atau besar kecilnya huruf.
Color, untuk mengatur warna text
4.16 Mengatur properti css
Keterangan properti pada kategori Background:
Backgroud-color, mengatur warna background
Background-image , mengatur gambar sebagai background
Background-repeat , menentukan pengulangan background:
- no-repeat, gambar tidak digandakan
- repeat , gambar diulang
- repeat-X, gambar diulang secara horisontal
- repeat-y, gambar diulang secara vertikal
Background attachment, menagtur tampilan pasti atau menggulung
Background-position x dan y, menentukan posisi awal penempatan gambar
1.16 Mengatur properti css
Keterangan properti pada kategori Block : Word spacing, mengatur jarak spasi antar kata Letter spacing, mengatur jarak spasi antar huruf.Vertical Align, perataan secara vertikal Text Align, mengatur perataan teks. Text Indent, mengatur jarak identasi teks baris pertama. White Space, mengatur white space yg sedang dikerjakan Display, menetapkan unsur unsur yg ingin ditampilkan.
1.17 Mengatur properti css
Keterangan properti pada kategori BOX: Width dan Height, mengatur tinggi dan lebar elemen.Float, mengatur segala sesuatu yg berada di sekitar elemen.Clear, menetapkan bagian yg tidak dpt disispi dgn elemen.Padding, mengatur nilai jarak isi dgn border objek.Margin, mengatur nilai jarak dgn objek lain.
4.18 Mengatur properti css
Keterangan properti pada kategori Border: Style, memilih bentuk border. Width, memilih ketebalan borderColor, memilih warna border.
4.18 Mengatur properti css
Keterangan properti pada kategori List:
List-style-type, memilih bentuk penomoran atau bullet. List-style-image, memilih bentuk bullet lain. Browse untuk mencari gambar untu bullet. List-style-option, mengatur apakah teks dari daftar (list) melipat dan agak masuk (outside), atau melipat ke margin sebelah kiri (inside)
4.19 Mengatur properti css
Keterangan properti pada kategori Positioning:
Positioning, menentukan posisi objek pada jendela browser. Visibility, menentukan kondisi awal tapilan objek. Z-index, mengatur posisi penumpukan objek. Overflow, menentukan akibat apabila isi objek melibihi ukuran. Placement, menentukan ukuran dan lokasi blok isi. Clip, mengabarkan bagian isi yg ditampilkan.
KEMBALI BAB III ===>>> KLIK DISINI <<<===
NEXT PAGE ===>>> KLIK DISINI <<<===
No comments:
Post a Comment