Cascading Style Sheet (CSS) -...
-
Upload
truongcong -
Category
Documents
-
view
219 -
download
0
Transcript of Cascading Style Sheet (CSS) -...
Cascading Style Sheet (CSS)
Ken Ditha Tania
Cascading Style Sheet (CSS)
• Teknologi untuk memperindah halaman website dengan mudah
• Contoh tanpa menggunakan CSS
• Contoh menggunakan CSS
• Hasil tanpa menggunakan CSS
• Hasil menggunakan CSS
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
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
• All style rules has basic format:
• Example
• Seluruh tag HTML dapat digunakan sebagai selector
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)
• Inheritance pd CSS akan tetap berlaku pada tag-tag yang ada didalamnya(turanannya) apabila tdk didefinisikan
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>
Contoh CSS di luar file html
Hasil CSS di luar file html
Jenis-jenis Selector
• Tag (elemen) HTML
• Class
• ID
• Contoh Selector Class
• Contoh Selector ID
• Contoh perbedaan id dan class
CSS lanjut
CSS lanjut
CSS lanjut
CSS lanjut
CSS Properties
• Font • Color & Background • Text • List • Box Model • Visual Formatting Model (normal & float) • User Interface & Downloadable Font • Media Types • Visual Effects • Positioning Scheme
Font
Color and Background
Text
List
Box Model (1)
Box Model (1)
Box Model (2)