Apa itu style sheet?
Pada tahun 1996 CSS (Cascading StyleSheets) menjadi sangat populer, CSS juga teman setia HTML.Dia bisa menghandle layout, font, colour, dan semua yang berhubungan dengan Tampilan web anda
Keuntungan dari CSS?
CSS membuat efisiensi dalam HTML anda
diantaranya:
1. Page download lebih cepat 50%
2. Anda tidak perlu menuliskan code terlalu banyak
3. Tampilan website anda terlihat konsisten
4. Update design site anda menjadi lebih mudah
Apakah browser support?
Ya.. Tentu saja ya...Pasti
IE, Firefox, Opera, Mozilla, Safari. semuanya support CSS-1 '96 dan CSS-2 '98
Implementasi:
ada 3 cara implementasi CSS dalam website anda
1. Memakai satu file untuk semua halaman
2. Menggabungkan CSS pada <head> pada setiap dokumen
3. Memakai atribut style untuk meletakkan CSS langsung ke element HTML
Beberapa cara pakai:
Satu pusat stylesheet
disini anda hanya memakai satu file .css untuk referensi semua halaman website anda
inilah yang di sebut dengan CSS Flexibility
sekarang saya mau mencontohkan penggunaan CSS:
Rumus:
selector {property: value; property: value; property: value; }
Contoh:
p {color: blue; font-size: 120%; }
Ini berarti:
Semua text anda yang berada di dalam tag <p> dan </p>
akan menjadi Biru dan ukuran font nya menjadi 120%
Penjelasan rumus:
- Selector: nama sebuah tag
- Pemakaian bracket { }
- titik dua ":" setelah property, dan antara bagian kita gunakan ";"
Contoh lain:
p, div, h1 {color: #00DDFF; width: 80%; } /* modifikasi semua 3 tag */
Memakai satu file untuk semua halaman
Sekarang mari kita gabungkan file .css yang anda buat dengan file HTML website kita
caranya:
dalam tag <head> anda tambahkan:
<link rel="stylesheet" type="text/css" href="mystyle.css">
Menggabungkan CSS pada <head> pada setiap dokumen
disini berarti kita tambahkan di setiap web page
<style type="text/css"> p {font-weight: normal; color: gray; } h1 {color: black; } </style>
Memakai atribut style untuk meletakkan CSS langsung ke element HTML
<p style="color: blue; font-family: Arial; ">
Demikian pengenalan dengan CSS ... ^_^
Pada tahun 1996 CSS (Cascading StyleSheets) menjadi sangat populer, CSS juga teman setia HTML.Dia bisa menghandle layout, font, colour, dan semua yang berhubungan dengan Tampilan web anda
Keuntungan dari CSS?
CSS membuat efisiensi dalam HTML anda
diantaranya:
1. Page download lebih cepat 50%
2. Anda tidak perlu menuliskan code terlalu banyak
3. Tampilan website anda terlihat konsisten
4. Update design site anda menjadi lebih mudah
Apakah browser support?
Ya.. Tentu saja ya...Pasti
IE, Firefox, Opera, Mozilla, Safari. semuanya support CSS-1 '96 dan CSS-2 '98
Implementasi:
ada 3 cara implementasi CSS dalam website anda
1. Memakai satu file untuk semua halaman
2. Menggabungkan CSS pada <head> pada setiap dokumen
3. Memakai atribut style untuk meletakkan CSS langsung ke element HTML
Beberapa cara pakai:
Satu pusat stylesheet
disini anda hanya memakai satu file .css untuk referensi semua halaman website anda
inilah yang di sebut dengan CSS Flexibility
sekarang saya mau mencontohkan penggunaan CSS:
Rumus:
selector {property: value; property: value; property: value; }
Contoh:
p {color: blue; font-size: 120%; }
Ini berarti:
Semua text anda yang berada di dalam tag <p> dan </p>
akan menjadi Biru dan ukuran font nya menjadi 120%
Penjelasan rumus:
- Selector: nama sebuah tag
- Pemakaian bracket { }
- titik dua ":" setelah property, dan antara bagian kita gunakan ";"
Contoh lain:
p, div, h1 {color: #00DDFF; width: 80%; } /* modifikasi semua 3 tag */
Memakai satu file untuk semua halaman
Sekarang mari kita gabungkan file .css yang anda buat dengan file HTML website kita
caranya:
dalam tag <head> anda tambahkan:
<link rel="stylesheet" type="text/css" href="mystyle.css">
Menggabungkan CSS pada <head> pada setiap dokumen
disini berarti kita tambahkan di setiap web page
<style type="text/css"> p {font-weight: normal; color: gray; } h1 {color: black; } </style>
Memakai atribut style untuk meletakkan CSS langsung ke element HTML
<p style="color: blue; font-family: Arial; ">
Demikian pengenalan dengan CSS ... ^_^
No comments:
Post a Comment