Top Banner
Cascading Style Sheet (CSS) Ken Ditha Tania

Cascading Style Sheet (CSS) - · Cascading Style Sheet (CSS) ... • Contoh menggunakan CSS •Hasil

May 03, 2019



Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.

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, CSS2,

CSS Structure and Syntax

A style sheet is made of style rules that has two parts:



Adeclaration breaks down into to items:




All style rules has basic format:


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



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


Color and Background



Box Model (1)

Box Model (1)

Box Model (2)