Cascading Style Sheet        Cara Efisien bikin Desain
Toni Tegar Sahidi   tonitegarsahidi@gmail.comSTT Stikma Internasional, Malang
CSS OVERVIEW#1 Apa sih CSS tu?#2 Ngapain pakai CSS?#3 Konsep Dasar CSS..?#4 Selector
#1 Apa sih CSS?             1/6
CSS memberitahu browserbagaimana me-render sebuah      elemen HTML!
CSS Styles ditambahkan keHTML 4.0 untuk menyelesaikan           masalah.
Tanpa CSS
<h2>sebuah judul</h2>
(tanpa CSS)misal ingin diberi warna biru
<font color="blue"> <h2>sebuah judul</h2></font>
Dengan CSS
misal didefinisikankode CSS berikut
h2 {       color:blue;  }
<h2>sebuah judul</h2>
#2 Ngapain pakai           CSS?              1/6
untuk memisahkan Konten   dengan Style / CaraMenampilkan (Presentation)
memudahkan me-manage   tampilan website
Kenapa?
HTML sebenarnya tidak pernah    dimaksudkan untuk mengandung tag formatting      untuk dokumen
HTML sebenarnya bertujuanuntuk mendefinisikan konten       dari dokumen
<h1>This is a heading</h1><p>This is a paragraph.</p>
Ketika tag <font>diperkenalkan di HTML 3.2
MIMPI BURUKWEB DEVELOPER!!
Pendefinisian font dan warnayang banyak harus ditambahkandi SETIAP halaman website.
website kecil tak masalah...  Website BESAAAAR?
Itulah kenapa W3Cmengenalkan CSS  pada HTML 4.0*          Sekarang sudah HTML 5!
Sejak itu, semua formattingdapat dilepaskan dari dokumen  HTML dan diletakkan di file        yang berbeda*.           *di ...
http://www.w3schools.com/css/d        emo_default.htm
#3 SINTAKS CSS            2/5
h2 {       color:blue;       margin : 1em;  }
selectorSelect / memilih elemen dalam  dokumen HTML yang akan     diaplikasikan style (di        desain/diformat)
h2 {       color:blue;       margin : 1em;  }                       h2 adalah selector
declarationMemberi tahu browser bagaimana    menampilkan elemen
h2 {       color:blue;    declaration       margin : 1em;  }
h2 {       color:blue;       margin : 1em;    declaration  }
property & value  Property adalah style attribute  (sifat elemen) yang ingin Andaganti. Setiap property memiliki nilai    ...
h2 {       color : blue;       margin : 1em;  }             *color dan margin adalah property
h2 {       color : blue;       margin : 1em;  }             *blue dan 1em adalah value
#3 TIGA TIPE CSS              2/5
#BROWSER Style Sheet#USER Style Sheet#AUTHOR Style Sheet
#1 BROWSER Style SheetTampilan default yang diberikan oleh Web Browser kepada kita.
#2 USER Style SheetBeberapa browser memungkinkan  kita untuk men-setting sendiri       tampilan default kita.
#3 AUTHOR Style SheetStyle Sheet yang didefinisikan olehweb developer untuk pengunjung               situs.
#3 AUTHOR Style SheetStyle Sheet yang didefinisikan olehweb developer untuk pengunjung               situs.
Author Style Sheetdibuat oleh kita(Web Developer)
#3 AUTHORSTYLE SHEET         2/5
Ada 3 Metode untukMengaplikasikanAuthor Style Sheet
#1 Inline Style     #2 Header Style#3 External File Style
#1 Inline Style     #2 Header Style#3 External File Style
<h2 style=“color:red;”>    Sebuah Judul</h2>
diletakkan di HTML elemennya
#1 Inline Style     #2 Header Style#3 External File Style
<html> <head>  <title>CSS Session</title>   <style type="text/css">   h2 { color:blue; }   </style> </head> <body>   <h2>s...
#1 Inline Style     #2 Header Style#3 External File Style
<head>   <title>CSS Session</title>    <link href=“MyStyle.css" rel="stylesheet"type="text/css" /></head>
#4 Selector         1/6
memilih Elemen mana yangakan di-terapkan style CSS
ADA 3#element#class#id
element
<body><h2>Kucing Kami... </h2></body>
body{    background:#ff7865;  }
class
untuk men-select semua yang       sekelas/sejenis
<h2>Kucing Kami... </h2><img src="kucing.jpg" alt="kucingkami" title="miauuw" /></br><img class="comment"src="kucing.jpg" ...
img.comment{     width:100px;  }
self LearningCSS dengan id
next session   MeLayout website dengan CSS   JavaScript   PHP?
5 pemrograman internet   css
5 pemrograman internet   css
5 pemrograman internet   css
5 pemrograman internet   css
5 pemrograman internet   css
5 pemrograman internet   css
Upcoming SlideShare
Loading in …5
×

5 pemrograman internet css

597 views

Published on

CSS

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
597
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

5 pemrograman internet css

  1. 1. Cascading Style Sheet Cara Efisien bikin Desain
  2. 2. Toni Tegar Sahidi tonitegarsahidi@gmail.comSTT Stikma Internasional, Malang
  3. 3. CSS OVERVIEW#1 Apa sih CSS tu?#2 Ngapain pakai CSS?#3 Konsep Dasar CSS..?#4 Selector
  4. 4. #1 Apa sih CSS? 1/6
  5. 5. CSS memberitahu browserbagaimana me-render sebuah elemen HTML!
  6. 6. CSS Styles ditambahkan keHTML 4.0 untuk menyelesaikan masalah.
  7. 7. Tanpa CSS
  8. 8. <h2>sebuah judul</h2>
  9. 9. (tanpa CSS)misal ingin diberi warna biru
  10. 10. <font color="blue"> <h2>sebuah judul</h2></font>
  11. 11. Dengan CSS
  12. 12. misal didefinisikankode CSS berikut
  13. 13. h2 { color:blue; }
  14. 14. <h2>sebuah judul</h2>
  15. 15. #2 Ngapain pakai CSS? 1/6
  16. 16. untuk memisahkan Konten dengan Style / CaraMenampilkan (Presentation)
  17. 17. memudahkan me-manage tampilan website
  18. 18. Kenapa?
  19. 19. HTML sebenarnya tidak pernah dimaksudkan untuk mengandung tag formatting untuk dokumen
  20. 20. HTML sebenarnya bertujuanuntuk mendefinisikan konten dari dokumen
  21. 21. <h1>This is a heading</h1><p>This is a paragraph.</p>
  22. 22. Ketika tag <font>diperkenalkan di HTML 3.2
  23. 23. MIMPI BURUKWEB DEVELOPER!!
  24. 24. Pendefinisian font dan warnayang banyak harus ditambahkandi SETIAP halaman website.
  25. 25. website kecil tak masalah... Website BESAAAAR?
  26. 26. Itulah kenapa W3Cmengenalkan CSS pada HTML 4.0* Sekarang sudah HTML 5!
  27. 27. Sejak itu, semua formattingdapat dilepaskan dari dokumen HTML dan diletakkan di file yang berbeda*. *di file yang sama pun bisa saja, tapi not recommended
  28. 28. http://www.w3schools.com/css/d emo_default.htm
  29. 29. #3 SINTAKS CSS 2/5
  30. 30. h2 { color:blue; margin : 1em; }
  31. 31. selectorSelect / memilih elemen dalam dokumen HTML yang akan diaplikasikan style (di desain/diformat)
  32. 32. h2 { color:blue; margin : 1em; } h2 adalah selector
  33. 33. declarationMemberi tahu browser bagaimana menampilkan elemen
  34. 34. h2 { color:blue;  declaration margin : 1em; }
  35. 35. h2 { color:blue; margin : 1em;  declaration }
  36. 36. property & value Property adalah style attribute (sifat elemen) yang ingin Andaganti. Setiap property memiliki nilai (value).
  37. 37. h2 { color : blue; margin : 1em; } *color dan margin adalah property
  38. 38. h2 { color : blue; margin : 1em; } *blue dan 1em adalah value
  39. 39. #3 TIGA TIPE CSS 2/5
  40. 40. #BROWSER Style Sheet#USER Style Sheet#AUTHOR Style Sheet
  41. 41. #1 BROWSER Style SheetTampilan default yang diberikan oleh Web Browser kepada kita.
  42. 42. #2 USER Style SheetBeberapa browser memungkinkan kita untuk men-setting sendiri tampilan default kita.
  43. 43. #3 AUTHOR Style SheetStyle Sheet yang didefinisikan olehweb developer untuk pengunjung situs.
  44. 44. #3 AUTHOR Style SheetStyle Sheet yang didefinisikan olehweb developer untuk pengunjung situs.
  45. 45. Author Style Sheetdibuat oleh kita(Web Developer)
  46. 46. #3 AUTHORSTYLE SHEET 2/5
  47. 47. Ada 3 Metode untukMengaplikasikanAuthor Style Sheet
  48. 48. #1 Inline Style #2 Header Style#3 External File Style
  49. 49. #1 Inline Style #2 Header Style#3 External File Style
  50. 50. <h2 style=“color:red;”> Sebuah Judul</h2>
  51. 51. diletakkan di HTML elemennya
  52. 52. #1 Inline Style #2 Header Style#3 External File Style
  53. 53. <html> <head> <title>CSS Session</title> <style type="text/css"> h2 { color:blue; } </style> </head> <body> <h2>sebuah judul</h2> </body></html>
  54. 54. #1 Inline Style #2 Header Style#3 External File Style
  55. 55. <head> <title>CSS Session</title> <link href=“MyStyle.css" rel="stylesheet"type="text/css" /></head>
  56. 56. #4 Selector 1/6
  57. 57. memilih Elemen mana yangakan di-terapkan style CSS
  58. 58. ADA 3#element#class#id
  59. 59. element
  60. 60. <body><h2>Kucing Kami... </h2></body>
  61. 61. body{ background:#ff7865; }
  62. 62. class
  63. 63. untuk men-select semua yang sekelas/sejenis
  64. 64. <h2>Kucing Kami... </h2><img src="kucing.jpg" alt="kucingkami" title="miauuw" /></br><img class="comment"src="kucing.jpg" alt="kucing kami"title="miauuw" />
  65. 65. img.comment{ width:100px; }
  66. 66. self LearningCSS dengan id
  67. 67. next session MeLayout website dengan CSS JavaScript PHP?

×