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

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)