Web Programming - Cascading Style Sheet

1,708 views

Published on

Materi CSS dimulai dari pengenalan, cara pengaksesan, konseptual penulisan dan berbagai atribut yang berhubungan. Disertai dengan contoh dan screenshoot. Enjoy..

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,708
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
165
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Pemrograman Web Pemrograman Web
  • Pemrograman Web
  • Pemrograman Web
  • Pemrograman Web
  • Pemrograman Web
  • Pemrograman Web
  • Web Programming - Cascading Style Sheet

    1. 1. Pemrograman Web – CSS Pemograman Web (2010/2011) – Mar 17, 2011 Teknik Informatika, Universitas Islam Indonesia Cascading Style Sheet Follow Hari Setiaji on Twitter
    2. 2. Buka catatan.. <ul><li>Apa itu CSS </li></ul><ul><li>Keuntungan CSS </li></ul><ul><li>Cara meletakkan code CSS </li></ul><ul><li>Aturan CSS </li></ul><ul><li>Tipe Selector </li></ul><ul><li>Perbedaan Contextual Selector, Pseudo Class dan Pseudo Element </li></ul><ul><li>Grouping </li></ul><ul><li>Konsep Inheritance </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    3. 3. Overview <ul><li>Standard penggunaan dan pembuatan style </li></ul><ul><li>Spesifikasi: </li></ul><ul><li>http://www.w3.org/TR/REC-CSS1 </li></ul><ul><li>http://www.w3.org/TR/REC-CSS2. </li></ul><ul><li>Memisahkan style (presentation) dengan content (informaton) </li></ul><ul><li>Contoh CSS-powered Web: </li></ul><ul><ul><li>http://www.csszengarden.com </li></ul></ul><ul><ul><li>http://www.cssbeauty.com </li></ul></ul><ul><ul><li>http://www.stylegala.com </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    4. 4. Keuntungan CSS… <ul><li>Kaya akan style </li></ul><ul><li>Mudah dalam penggunaan </li></ul><ul><li>Dapat diterapkan untuk beberapa dokumen sekaligus </li></ul><ul><li>Cascading </li></ul><ul><li>Ukuran file yang kecil </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    5. 5. Menyisipkan code CSS di HTML <ul><li>1. Tag <link> </li></ul><ul><li>2. Tag <style> </style> </li></ul><ul><li>3. Perintah @import </li></ul><ul><li>4. Inline Style </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    6. 6. Menyisipkan code CSS di HTML <ul><li>1. Tag <link> </li></ul><ul><li><link rel=”stylesheet” </li></ul><ul><li>type=”text/css” href=” file.css” > </li></ul><ul><li>Penulisan di bagian Header File </li></ul><ul><li>CSS Rules diletakkan di file eksternal </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    7. 7. Menyisipkan code CSS di HTML <ul><li>2. Tag <style> </style> </li></ul><ul><li><style type=”text/css”> </li></ul><ul><li>. /* pendefinisian style rule */ </li></ul><ul><li>. /* tanda ini berarti komentar */ </li></ul><ul><li></style> </li></ul><ul><li>Tag ini juga diletakkan di Header File </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    8. 8. Menyisipkan code CSS di HTML <ul><li>3. Perintah @import </li></ul><ul><li><style type=”text/css”> </li></ul><ul><li>@import url(file.css); </li></ul><ul><li>. /* definisi style rule */ </li></ul><ul><li>. </li></ul><ul><li></style> </li></ul><ul><li>CSS Rules di File Eksternal </li></ul><ul><li>Tidak semua browser mendukung </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    9. 9. Menyisipkan code CSS di HTML <ul><li>4. Inline Style </li></ul><ul><li>< tag style=” property1 : value; </li></ul><ul><li> property2 : value; ...”> text </tag> </li></ul><ul><li>Langsung di tag tag HTML </li></ul><ul><li>Dapat diterapkan untuk semua tag HTML </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    10. 10. Aturan CSS <ul><li>Selector, memberi tahu browser pada elemen mana rule CSS akan diterapkan </li></ul><ul><li>Property, nama sifat dari sebuah elemen </li></ul><ul><li>Value, data aktual yang menentukan perubahan (penampilan) elemen </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    11. 11. Aturan CSS <ul><li>Spacing </li></ul><ul><li>• sama seperti HTML, multiple space dan carriage return = single space </li></ul><ul><li>Comments </li></ul><ul><li>• komentar disisipkan di antara tanda </li></ul><ul><li>/* dan */ </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    12. 12. Selectors <ul><li>Tag HTML </li></ul><ul><li>Selektor class </li></ul><ul><li>Selektor id </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    13. 13. Selectors <ul><li>1. Tag HTML </li></ul><ul><li>Semua tag HTML bisa digunakan sebagai selector. </li></ul><ul><li>Style yang didefinisikan dengan CSS akan berasosiasi dengan elemen HTML yang bersangkutan. </li></ul><ul><li>p {color: blue} </li></ul><ul><li>h1 {font-family: “Trebuchet MS”} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    14. 14. Selectors <ul><li>2. Selektor class </li></ul><ul><li>Elemen HTML harus masuk ke dalam </li></ul><ul><li> kelas tertentu </li></ul><ul><li><p class=”paragraf1”> teks </p> </li></ul><ul><li> Dalam CSS rules, didahului titik </li></ul><ul><li>.paragraf1 {font-style: italic} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    15. 15. Selectors <ul><li>3. Selektor id </li></ul><ul><li> Penggunaan seperti selektor class </li></ul><ul><li> Bedanya, id harus unik. Analoginya </li></ul><ul><li>seperti NIM mahasiswa dengan kelasnya. </li></ul><ul><li><h1 id=”title”>CSS</h1> </li></ul><ul><li> Dalam CSS rule: </li></ul><ul><li>#title {font-weight: bold; text- decoration: underline} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    16. 16. Selectors <ul><li>Contextual Selector </li></ul><ul><li>Deklarasi akan dievaluasi jika kondisi tertentu terpenuhi. Contohnya, </li></ul><ul><li>h1 i {text-decoration: line-through} </li></ul><ul><li>hanya akan dievaluasi untuk elemen yang dilingkupi tag <h1> dan <i> </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    17. 17. Selectors <ul><li>Pseudo-class </li></ul><ul><li>Digunakan jika suatu kondisi eksternal dikenakan pada elemen HTML (mis. sebuah link di-klik) </li></ul><ul><li>selector : pseudo-class { property : value } </li></ul><ul><li>contoh: </li></ul><ul><li>a:hover {color: red} </li></ul><ul><li>a:link {color: #23d4f1} </li></ul><ul><li>a:visited {color: rgb(123,32,65)} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    18. 18. Selectors <ul><li>Pseudo-element </li></ul><ul><li>Menyatakan style yang diaplikasikan pada suatu kondisi tipografi, bukan struktur. </li></ul><ul><li>(mis. huruf pertama, kata pertama) </li></ul><ul><li>h1:first-letter {font-size: 150%; color: blue} </li></ul><ul><li>p:first-line {font-weight: bold} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    19. 19. Grouping <ul><li>Selector </li></ul><ul><li>h1, h2, h3 {border-style: dashed} </li></ul><ul><li>Property </li></ul><ul><li> p {color: navy; text-align: </li></ul><ul><li> justify} </li></ul><ul><li>Value </li></ul><ul><li> h1 {font: bold 14pt Arial} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    20. 20. Specificity <ul><li>Menentukan style mana yang akan digunakan jika terdefinisi dua atau lebih style pada elemen yang sama. Contoh: </li></ul><ul><li>.paragraf1 {color: blue} </li></ul><ul><li>p {color: red} </li></ul><ul><li>HTML: </li></ul><ul><li><p class=”paragraf1”> teks </p> </li></ul><ul><li>Warna apa yang akan muncul ? </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    21. 21. Specificity <ul><li>Biru </li></ul><ul><li>Kenapa? </li></ul><ul><li>Specificity: </li></ul><ul><li>HTML tags 1 </li></ul><ul><li>Class 10 </li></ul><ul><li>Id 100 </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    22. 22. Inheritance <ul><li>Parent-child </li></ul><ul><li>Tag tag HTML memiliki </li></ul><ul><li>hubungan parent-child </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    23. 23. Inheritance <ul><li>Suatu style yang didefinisikan pada induk akan terdefinisi pula untuk anaknya </li></ul><ul><li>Contoh: body {color: purple} </li></ul><ul><li> h1 {font-weight: bold} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    24. 24. Font Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    25. 25. <ul><li>font-family: <fontname> </li></ul><ul><ul><li>p {font-family: Arial, Verdana, &quot;Times New Roman&quot;} </li></ul></ul><ul><li>font-style: normal | italic </li></ul><ul><ul><li>p {font-style: italic} </li></ul></ul><ul><li>font-variant: normal | small-caps </li></ul><ul><ul><li>p {font-variant: small-caps} </li></ul></ul><ul><li>font-weight: normal | bold | bolder | lighter | 100–900 </li></ul><ul><ul><li>p {font-weight: bold} </li></ul></ul><ul><ul><li>p {font-weight: 400} </li></ul></ul><ul><li>font-size: xx-small | x-small | small | medium | large | x-large | xx-large </li></ul><ul><li>font-size: larger | smaller </li></ul><ul><li>font-size: <length> | <percentage> </li></ul><ul><ul><li>p {font-size: large} </li></ul></ul><ul><ul><li>p {font-size: smaller} </li></ul></ul><ul><ul><li>p {font-size: 200px} </li></ul></ul><ul><ul><li>p {font-size: 150%} </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    26. 26. <ul><li>font: [ <style> || <variant> || <weight> ]? <size> [/ <line-height> ]? <family> </li></ul><ul><li>font: caption | icon | menu | message-box | small-caption | status-bar </li></ul><ul><ul><li>p {font: italic 12pt &quot;Helvetica Nue&quot;, serif} </li></ul></ul><ul><ul><li>p {font: bold italic large Palatino, serif} </li></ul></ul><ul><ul><li>p {font: normal small-caps bold 120%/120% fantasy} </li></ul></ul><ul><ul><li>p {font: x-large/20pt &quot;new century schoolbook&quot;, serif} </li></ul></ul>Font Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    27. 27. Color Common Colors
    28. 28. Color & Background <ul><li>color: <color> </li></ul><ul><ul><li>p {color: red} </li></ul></ul><ul><ul><li>p {color: #448F2C} </li></ul></ul><ul><ul><li>p {color: rgb(255,0,0)} </li></ul></ul><ul><ul><li>p {color: rgb(100%,50%,25%)} </li></ul></ul><ul><ul><li>p {color: #f25} </li></ul></ul><ul><li>background-color: <color> | transparent </li></ul><ul><ul><li>body {background-color: transparent} </li></ul></ul><ul><li>background-image: <url> | none </li></ul><ul><ul><li>body {background-image: none} </li></ul></ul><ul><ul><li>body {background-image: url(http://www.site.com/logo.gif)} </li></ul></ul><ul><li>background-repeat: repeat | repeat-x | repeat-y | no-repeat </li></ul><ul><ul><li>body {background-repeat: no-repeat} </li></ul></ul><ul><li>background-attachment: scroll | fixed </li></ul><ul><ul><li>body {background-attachment: fixed} </li></ul></ul><ul><li>background-position: [ <percentage> | <length> ]{1,2} </li></ul><ul><li>background-position: [ top | center | bottom] || [ left | center | right] </li></ul><ul><ul><li>body {background-position: 50%} </li></ul></ul><ul><ul><li>body {background-position: 200px 50%} </li></ul></ul><ul><ul><li>body {background-position: center} </li></ul></ul><ul><ul><li>body {background-position: right bottom} </li></ul></ul><ul><li>background: [ <color> || <image> || <repeat> || <attachment> || <position> ] </li></ul><ul><ul><li>body {background: url(&quot;chess.png&quot;) gray 50% repeat fixed } </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    29. 29. Color Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    30. 30. Background Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    31. 31. Time for practice ! Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    32. 32. Answer Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    33. 33. Answer Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    34. 34. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    35. 35. Pengelompokan elemen dokumen <ul><li>Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen </li></ul><ul><li>Pengelompokkan ada dua jenis : </li></ul><ul><ul><li>- inline (alur, flow ) : <span> </span> </li></ul></ul><ul><ul><li>- block (blok) : <div> </div> </li></ul></ul><ul><li><span> dan <div> biasanya digunakan dengan parameter id dan class </li></ul><ul><li>Struktur lojik ini dapat digunakan untuk : </li></ul><ul><ul><li>- mempermudah menginterpretasi isi dokumen </li></ul></ul><ul><ul><li>- memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    36. 36. Contoh <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Adrian Marzuki </span> <br> <span class=&quot;alamat&quot;> Jl. Tubagus Ismail XI/5 </span> </div> <div id=&quot;mhs02&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Dewi Purnama </span> <br> <span class=&quot;alamat&quot;> Jl. Cisitu Lama 24 </span> </div> <style type=&quot;text/css&quot;> .mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial} .alamat {font-style: italic} </style> <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;>Adrian Marzuki</span><br> ... Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    37. 37. To do list.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    38. 38. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

    ×