Cascading Style Sheet (CSS) -...
-
Upload
truongcong -
Category
Documents
-
view
222 -
download
0
Transcript of Cascading Style Sheet (CSS) -...
![Page 1: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/1.jpg)
Cascading Style Sheet (CSS)
Ken Ditha Tania
![Page 2: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/2.jpg)
Cascading Style Sheet (CSS)
• Teknologi untuk memperindah halaman website dengan mudah
![Page 3: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/3.jpg)
• Contoh tanpa menggunakan CSS
• Contoh menggunakan CSS
![Page 4: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/4.jpg)
• Hasil tanpa menggunakan CSS
• Hasil menggunakan CSS
![Page 5: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/5.jpg)
Cascading Style Sheet (CSS)(2)
• The CSS specification are: – Specify font type, size, color, and effects – Set background colors and images – Control many aspects of text layout, including alignment
and spacing – Set margin and borders – Control list display – Define table layout and display
• Spesifikasi: – CSS1, http://www.w3.org/TR/REC-CSS1 – CSS2, http://www.w3.org/TR/REC-CSS2
![Page 6: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/6.jpg)
CSS Structure and Syntax
• A style sheet is made of style rules that has two parts:
– Selector
– Declaration
• Adeclaration breaks down into to items:
– Properties
– Values
• Example
![Page 7: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/7.jpg)
• All style rules has basic format:
• Example
• Seluruh tag HTML dapat digunakan sebagai selector
![Page 8: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/8.jpg)
Inheriting Styles (Pewarisan)
• Inheritance is a mechanism to be sure that styles associated with the parent element find their way to the child element (often used in nesting element)
![Page 9: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/9.jpg)
• Inheritance pd CSS akan tetap berlaku pada tag-tag yang ada didalamnya(turanannya) apabila tdk didefinisikan
![Page 10: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/10.jpg)
Kategori Style Sheet 1. Inline Style Sheet (di dalam elemen HTML)
2. Embedded Style Sheet (di dalam dokumen HTML)
3. Linked Style Sheet (di file eksternal)
Isi file eksternal sama dengan kode di antara tag <style> </style>
![Page 11: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/11.jpg)
Contoh CSS di luar file html
![Page 12: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/12.jpg)
Hasil CSS di luar file html
![Page 13: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/13.jpg)
Jenis-jenis Selector
• Tag (elemen) HTML
• Class
• ID
![Page 14: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/14.jpg)
• Contoh Selector Class
![Page 15: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/15.jpg)
• Contoh Selector ID
![Page 16: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/16.jpg)
• Contoh perbedaan id dan class
![Page 17: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/17.jpg)
CSS lanjut
![Page 18: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/18.jpg)
CSS lanjut
![Page 19: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/19.jpg)
CSS lanjut
![Page 20: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/20.jpg)
CSS lanjut
![Page 21: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/21.jpg)
CSS Properties
• Font • Color & Background • Text • List • Box Model • Visual Formatting Model (normal & float) • User Interface & Downloadable Font • Media Types • Visual Effects • Positioning Scheme
![Page 22: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/22.jpg)
Font
![Page 23: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/23.jpg)
Color and Background
![Page 24: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/24.jpg)
Text
![Page 25: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/25.jpg)
List
Box Model (1)
![Page 26: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/26.jpg)
Box Model (1)
![Page 27: Cascading Style Sheet (CSS) - si.ilkom.unsri.ac.idsi.ilkom.unsri.ac.id/wp-content/uploads/2018/11/4-css-1.pdf · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil](https://reader031.fdocuments.net/reader031/viewer/2022022806/5ccc42af88c993d2098bc214/html5/thumbnails/27.jpg)
Box Model (2)