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