Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... ·...
Transcript of Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... ·...
![Page 2: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/2.jpg)
©2016 DidikDwiPrasetya
CSS
vCSS à Cascading Style SheetvStyle à mendefinisikan aturan untuk
menampilkan elemen HTML.vDefinisi:
� Cascading Style Sheets (CSS) – is a rulebased language that applies styling to your HTML elements.
2
![Page 3: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/3.jpg)
©2016 DidikDwiPrasetya
Mengapa CSS?
vHTML tidak pernah dirancang untuk menjadibahasa presentasi.� <p color=“red” align=“right”><font>
vPenghapusan atribut presentasi dapatmeningkatkan reusability dan maintainability.
vCSS menjadikan dokumen yang bersih danrapi.
3
![Page 4: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/4.jpg)
©2016 DidikDwiPrasetya
Cascade
vKekuatan CSS terletak padakonsep “cascade”.
vPrioritas cascadeberdampakinheritance.
4
![Page 5: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/5.jpg)
©2016 DidikDwiPrasetya
Sejarah Singkat
v CSS 1 (1996)� Tidak benar-benar digunakan� HTML 3.2 (1997)� Mimpi buruk pengembang web
v CSS 2 (1998)� Fitur: positioning, media types, shadow� CSS 2.1 à Edisi revisi
v CSS 3 (1999)� Pembagian dokumen ke dalam “module”
5
![Page 6: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/6.jpg)
©2016 DidikDwiPrasetya
Sintaks CSS
The CSS syntax is made up of 5 parts: vselectorvproperty/valuevdeclaration vdeclaration block vcurly braces
6
![Page 7: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/7.jpg)
©2016 DidikDwiPrasetya
Sintaks CSS (2)
vSelector biasanya merupakan elemen HTML.vDeclaration terdiri dari pasangan property dan
value (nilai)� Property: style yang akan diubah� Value: nilai properti
7
![Page 8: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/8.jpg)
©2016 DidikDwiPrasetya
Selektor id dan class
vCSS memfasilitasi pendefinisian own selector (id dan class)
vid: mendefinisikan style pada elemen unik� Definisi: #header {color: red}� Cara akses: <div id=“header”>
vclass: mendefinisikan style pada elemenserupa� Definisi: .center {text-align: center}� Cara akses: <div class=“center”>
8
![Page 9: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/9.jpg)
©2016 DidikDwiPrasetya
Komentar CSS
vKomentar digunakan untuk menjelaskan kode.vKomentar diabaikan oleh browser
� Tidak dieksekusi.vPenulisan komentar diawali dengan /* dan
ditutup dengan *//* Baris ini merupakan komentar */p{text-align:center;/* Komentar lain */color: red;
}
9
![Page 10: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/10.jpg)
©2016 DidikDwiPrasetya
Implementasi CSS
vMetode penerapan CSS di halaman web� Inline� Internal� External
10
![Page 11: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/11.jpg)
©2016 DidikDwiPrasetya
Inline Style
vMenerapkan style langsung di HTML melalui atribut style
vSesuai jika hanya dipakai sekali padaelemen
vKode kurang readable dan bersihvContoh:
<p style="color:red; font-size: 12px;">Paragraf merah dengan ukuran 12px</p>
11
![Page 12: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/12.jpg)
©2016 DidikDwiPrasetya
Internal Style
vMenggunakan tag <style> di elemen headvSesuai jika hanya dipakai di satu halaman
saja.vContoh:
<style>p { text-align: center;color: red;
}</style>
12
![Page 13: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/13.jpg)
©2016 DidikDwiPrasetya
External Style
vMemisahkan dokumen HTML dan style sheet
vMenggunakan <link> di headvSesuai jika digunakan berulang di
beberapa halaman (direkomendasikan)vContoh:
<link rel="stylesheet" href="style.css">
Ket: file style.css berisi aturan-aturan CSS
13
![Page 14: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/14.jpg)
©2016 DidikDwiPrasetya
Urutan Prioritas Aturan
v Jika beberapa property ditentukan pada selector yang sama di tempat yang berbeda, nilai yang digunakan adalah nilai pada style sheet yang paling spesifik.
vUrutan prioritas tampilan terurut dari paling rendah ke tinggi
1. Nilai default browser2. External Style Sheet (file css)3. Internal Style Sheet (di bagian head)4. Inline Style (di elemen html)
14
![Page 15: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/15.jpg)
©2016 DidikDwiPrasetya
CSS Layout
v3 konsep layout CSS:� CSS box model� Floating� Positioning
v3 konsep secara bersama-samamengendalikan elemen di halaman web.
15
![Page 16: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/16.jpg)
©2016 DidikDwiPrasetya
CSS Box Model
16
Content
PaddingBorderMargin
![Page 17: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/17.jpg)
©2016 DidikDwiPrasetya
Margin, Padding, Border
17
![Page 18: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/18.jpg)
©2016 DidikDwiPrasetya
Floating
vMenempatkan posisi elemenvNilai float: left, right, nonevUntuk me-restore ke normal flow:
� clear: left;� clear: right;� clear: both;
18
![Page 19: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/19.jpg)
©2016 DidikDwiPrasetya
CSS Positioning
vKonsep dasar ketiga setelah box model danfloat.
vTipe positioning:� position: relative;� position: absolute;� position: fixed; (subkategori absolute)
19
![Page 20: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/20.jpg)
©2016 DidikDwiPrasetya
CSS Positioning (1)
vRelative:� Normal flow
20
![Page 21: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/21.jpg)
©2016 DidikDwiPrasetya
CSS Positioning (2)
vRelative:#box2 {
position: relative;left: 20px;top: 20px;
}
21
![Page 22: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/22.jpg)
©2016 DidikDwiPrasetya
CSS Positioning (3)
vAbsolute: relasi ke ancestor#box2 {
position: absolute;left: 20px;top: 20px;
}
22
![Page 23: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/23.jpg)
©2016 DidikDwiPrasetya
Fitur-Fitur CSS3
vSelector baru (attr^, $, *)vRounded corner (border-radius)vBorder imagevBox shadow (box-shadow)vText shadow
23
![Page 24: Cascading Style Sheet (CSS)elektro.um.ac.id/wp-content/uploads/2016/04/NINF611-06... · 2018-04-17 · vCSS à Cascading Style Sheet vStyle à mendefinisikan aturan untuk menampilkan](https://reader031.fdocument.pub/reader031/viewer/2022040817/5e6057515eee0d7620217637/html5/thumbnails/24.jpg)
©2016 DidikDwiPrasetya
Studi Kasus
vAnalisis desain header CSS berikut:
24