5 pemrograman internet css
DESCRIPTION
CSSTRANSCRIPT
![Page 1: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/1.jpg)
Cascading Style Sheet Cara Efisien bikin Desain
![Page 3: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/3.jpg)
CSS OVERVIEW #1 Apa sih CSS tu? #2 Ngapain pakai CSS? #3 Konsep Dasar CSS..? #4 Selector
![Page 4: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/4.jpg)
#1 Apa sih CSS?
1/6
![Page 5: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/5.jpg)
CSS memberitahu browser
bagaimana me-render sebuah
elemen HTML!
![Page 6: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/6.jpg)
CSS Styles ditambahkan ke
HTML 4.0 untuk menyelesaikan
masalah.
![Page 7: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/7.jpg)
Tanpa CSS
![Page 8: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/8.jpg)
<h2>sebuah judul</h2>
![Page 9: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/9.jpg)
![Page 10: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/10.jpg)
(tanpa CSS) misal ingin diberi warna biru
![Page 11: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/11.jpg)
<font color="blue"> <h2>sebuah judul</h2>
</font>
![Page 12: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/12.jpg)
![Page 13: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/13.jpg)
Dengan CSS
![Page 14: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/14.jpg)
misal didefinisikan kode CSS berikut
![Page 15: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/15.jpg)
h2 { color:blue; }
![Page 16: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/16.jpg)
<h2>sebuah judul</h2>
![Page 17: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/17.jpg)
![Page 18: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/18.jpg)
#2 Ngapain pakai
CSS?
1/6
![Page 19: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/19.jpg)
untuk memisahkan Konten dengan Style / Cara
Menampilkan (Presentation)
![Page 20: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/20.jpg)
memudahkan me-manage tampilan website
![Page 21: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/21.jpg)
Kenapa?
![Page 22: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/22.jpg)
HTML sebenarnya tidak pernah dimaksudkan untuk
mengandung tag formatting untuk dokumen
![Page 23: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/23.jpg)
HTML sebenarnya bertujuan untuk mendefinisikan konten
dari dokumen
![Page 24: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/24.jpg)
<h1>This is a heading</h1> <p>This is a paragraph.</p>
![Page 25: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/25.jpg)
Ketika tag <font> diperkenalkan di HTML 3.2
![Page 26: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/26.jpg)
MIMPI BURUK WEB DEVELOPER!!
![Page 27: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/27.jpg)
Pendefinisian font dan warna yang banyak harus ditambahkan
di SETIAP halaman website.
![Page 28: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/28.jpg)
website kecil tak masalah... Website BESAAAAR?
![Page 29: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/29.jpg)
Itulah kenapa W3C mengenalkan CSS
pada HTML 4.0*
Sekarang sudah HTML 5!
![Page 30: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/30.jpg)
Sejak itu, semua formatting dapat dilepaskan dari dokumen
HTML dan diletakkan di file yang berbeda*.
*di file yang sama pun bisa saja, tapi not recommended
![Page 31: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/31.jpg)
http://www.w3schools.com/css/demo_default.htm
![Page 32: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/32.jpg)
#3 SINTAKS CSS
2/5
![Page 33: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/33.jpg)
h2 { color:blue; margin : 1em; }
![Page 34: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/34.jpg)
selector
Select / memilih elemen dalam
dokumen HTML yang akan
diaplikasikan style (di
desain/diformat)
![Page 35: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/35.jpg)
h2 { color:blue; margin : 1em; }
h2 adalah selector
![Page 36: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/36.jpg)
declaration
Memberi tahu browser bagaimana
menampilkan elemen
![Page 37: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/37.jpg)
h2 { color:blue; declaration
margin : 1em; }
![Page 38: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/38.jpg)
h2 { color:blue;
margin : 1em; declaration
}
![Page 39: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/39.jpg)
property & value
Property adalah style attribute
(sifat elemen) yang ingin Anda
ganti. Setiap property memiliki nilai
(value).
![Page 40: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/40.jpg)
h2 { color : blue; margin : 1em; }
*color dan margin adalah property
![Page 41: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/41.jpg)
h2 { color : blue; margin : 1em; }
*blue dan 1em adalah value
![Page 42: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/42.jpg)
#3 TIGA TIPE CSS
2/5
![Page 43: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/43.jpg)
#BROWSER Style Sheet #USER Style Sheet #AUTHOR Style Sheet
![Page 44: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/44.jpg)
#1 BROWSER Style Sheet
Tampilan default yang diberikan
oleh Web Browser kepada kita.
![Page 45: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/45.jpg)
#2 USER Style Sheet
Beberapa browser memungkinkan
kita untuk men-setting sendiri
tampilan default kita.
![Page 46: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/46.jpg)
#3 AUTHOR Style Sheet
Style Sheet yang didefinisikan oleh
web developer untuk pengunjung
situs.
![Page 47: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/47.jpg)
#3 AUTHOR Style Sheet
Style Sheet yang didefinisikan oleh
web developer untuk pengunjung
situs.
![Page 48: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/48.jpg)
Author Style Sheet dibuat oleh kita (Web Developer)
![Page 49: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/49.jpg)
#3 AUTHOR
STYLE SHEET
2/5
![Page 50: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/50.jpg)
Ada 3 Metode untuk Mengaplikasikan Author Style Sheet
![Page 51: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/51.jpg)
#1 Inline Style #2 Header Style
#3 External File Style
![Page 52: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/52.jpg)
#1 Inline Style #2 Header Style
#3 External File Style
![Page 53: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/53.jpg)
<h2 style=“color:red;”> Sebuah Judul</h2>
![Page 54: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/54.jpg)
diletakkan di HTML elemennya
![Page 55: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/55.jpg)
#1 Inline Style #2 Header Style
#3 External File Style
![Page 56: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/56.jpg)
<html> <head> <title>CSS Session</title> <style type="text/css"> h2 { color:blue; } </style> </head> <body> <h2>sebuah judul</h2> </body> </html>
![Page 57: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/57.jpg)
#1 Inline Style #2 Header Style
#3 External File Style
![Page 58: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/58.jpg)
<head> <title>CSS Session</title> <link href=“MyStyle.css" rel="stylesheet" type="text/css" /> </head>
![Page 59: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/59.jpg)
![Page 60: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/60.jpg)
#4 Selector
1/6
![Page 61: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/61.jpg)
memilih Elemen mana yang akan di-terapkan style CSS
![Page 62: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/62.jpg)
ADA 3 #element #class #id
![Page 63: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/63.jpg)
element
![Page 64: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/64.jpg)
<body> <h2>Kucing Kami... </h2> </body>
![Page 65: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/65.jpg)
body{ background:#ff7865; }
![Page 66: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/66.jpg)
![Page 67: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/67.jpg)
class
![Page 68: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/68.jpg)
untuk men-select semua yang sekelas/sejenis
![Page 69: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/69.jpg)
<h2>Kucing Kami... </h2> <img src="kucing.jpg" alt="kucing kami" title="miauuw" /> </br> <img class="comment" src="kucing.jpg" alt="kucing kami" title="miauuw" />
![Page 70: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/70.jpg)
img.comment{ width:100px; }
![Page 71: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/71.jpg)
![Page 72: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/72.jpg)
self Learning CSS dengan id
![Page 73: 5 pemrograman internet css](https://reader034.vdocuments.net/reader034/viewer/2022050808/547ed385b47959a2508b4c17/html5/thumbnails/73.jpg)
next session
MeLayout website dengan CSS
JavaScript
PHP?