cascading style sheet (css)elektro.um.ac.id/wp-content/uploads/2016/04/ninf611-06... ·...

Didik Dwi Prasetyadidikdwi@gmail.com

Cascading Style Sheet (CSS)

©2016 DidikDwiPrasetya

CSS

vCSS à Cascading Style SheetvStyle à mendefinisikan aturan untuk

menampilkan elemen HTML.vDefinisi:

� Cascading Style Sheets (CSS) – is a rulebased language that applies styling to your HTML elements.

2

©2016 DidikDwiPrasetya

Mengapa CSS?

vHTML tidak pernah dirancang untuk menjadibahasa presentasi.� <p color=“red” align=“right”><font>

vPenghapusan atribut presentasi dapatmeningkatkan reusability dan maintainability.

vCSS menjadikan dokumen yang bersih danrapi.

3

©2016 DidikDwiPrasetya

Cascade

vKekuatan CSS terletak padakonsep “cascade”.

vPrioritas cascadeberdampakinheritance.

4

©2016 DidikDwiPrasetya

Sejarah Singkat

v CSS 1 (1996)� Tidak benar-benar digunakan� HTML 3.2 (1997)� Mimpi buruk pengembang web

v CSS 2 (1998)� Fitur: positioning, media types, shadow� CSS 2.1 à Edisi revisi

v CSS 3 (1999)� Pembagian dokumen ke dalam “module”

5

©2016 DidikDwiPrasetya

Sintaks CSS

The CSS syntax is made up of 5 parts: vselectorvproperty/valuevdeclaration vdeclaration block vcurly braces

6

©2016 DidikDwiPrasetya

Sintaks CSS (2)

vSelector biasanya merupakan elemen HTML.vDeclaration terdiri dari pasangan property dan

value (nilai)� Property: style yang akan diubah� Value: nilai properti

7

©2016 DidikDwiPrasetya

Selektor id dan class

vCSS memfasilitasi pendefinisian own selector (id dan class)

vid: mendefinisikan style pada elemen unik� Definisi: #header {color: red}� Cara akses: <div id=“header”>

vclass: mendefinisikan style pada elemenserupa� Definisi: .center {text-align: center}� Cara akses: <div class=“center”>

8

©2016 DidikDwiPrasetya

Komentar CSS

vKomentar digunakan untuk menjelaskan kode.vKomentar diabaikan oleh browser

� Tidak dieksekusi.vPenulisan komentar diawali dengan /* dan

ditutup dengan *//* Baris ini merupakan komentar */p{text-align:center;/* Komentar lain */color: red;

}

9

©2016 DidikDwiPrasetya

Implementasi CSS

vMetode penerapan CSS di halaman web� Inline� Internal� External

10

©2016 DidikDwiPrasetya

Inline Style

vMenerapkan style langsung di HTML melalui atribut style

vSesuai jika hanya dipakai sekali padaelemen

vKode kurang readable dan bersihvContoh:

<p style="color:red; font-size: 12px;">Paragraf merah dengan ukuran 12px</p>

11

©2016 DidikDwiPrasetya

Internal Style

vMenggunakan tag <style> di elemen headvSesuai jika hanya dipakai di satu halaman

saja.vContoh:

<style>p { text-align: center;color: red;

}</style>

12

©2016 DidikDwiPrasetya

External Style

vMemisahkan dokumen HTML dan style sheet

vMenggunakan <link> di headvSesuai jika digunakan berulang di

beberapa halaman (direkomendasikan)vContoh:

<link rel="stylesheet" href="style.css">

Ket: file style.css berisi aturan-aturan CSS

13

©2016 DidikDwiPrasetya

Urutan Prioritas Aturan

v Jika beberapa property ditentukan pada selector yang sama di tempat yang berbeda, nilai yang digunakan adalah nilai pada style sheet yang paling spesifik.

vUrutan prioritas tampilan terurut dari paling rendah ke tinggi

1. Nilai default browser2. External Style Sheet (file css)3. Internal Style Sheet (di bagian head)4. Inline Style (di elemen html)

14

©2016 DidikDwiPrasetya

CSS Layout

v3 konsep layout CSS:� CSS box model� Floating� Positioning

v3 konsep secara bersama-samamengendalikan elemen di halaman web.

15

©2016 DidikDwiPrasetya

CSS Box Model

16

Content

PaddingBorderMargin

©2016 DidikDwiPrasetya

Margin, Padding, Border

17

©2016 DidikDwiPrasetya

Floating

vMenempatkan posisi elemenvNilai float: left, right, nonevUntuk me-restore ke normal flow:

� clear: left;� clear: right;� clear: both;

18

©2016 DidikDwiPrasetya

CSS Positioning

vKonsep dasar ketiga setelah box model danfloat.

vTipe positioning:� position: relative;� position: absolute;� position: fixed; (subkategori absolute)

19

©2016 DidikDwiPrasetya

CSS Positioning (1)

vRelative:� Normal flow

20

©2016 DidikDwiPrasetya

CSS Positioning (2)

vRelative:#box2 {

position: relative;left: 20px;top: 20px;

}

21

©2016 DidikDwiPrasetya

CSS Positioning (3)

vAbsolute: relasi ke ancestor#box2 {

position: absolute;left: 20px;top: 20px;

}

22

©2016 DidikDwiPrasetya

Fitur-Fitur CSS3

vSelector baru (attr^, $, *)vRounded corner (border-radius)vBorder imagevBox shadow (box-shadow)vText shadow

23

©2016 DidikDwiPrasetya

Studi Kasus

vAnalisis desain header CSS berikut:

24