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

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)