web programming - cascading style sheet

Pemrograman Web – CSS

Pemograman Web (2010/2011) – Mar 17, 2011 Teknik Informatika, Universitas Islam Indonesia

Cascading Style Sheet

Follow Hari Setiaji on Twitter

2

Buka catatan..• Apa itu CSS• Keuntungan CSS• Cara meletakkan code CSS• Aturan CSS• Tipe Selector • Perbedaan Contextual Selector, Pseudo

Class dan Pseudo Element• Grouping• Konsep Inheritance

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

3

OverviewStandard penggunaan dan pembuatan style

Spesifikasi:

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/REC-CSS2.

Memisahkan style (presentation) dengan content (informaton)

Contoh CSS-powered Web:http://www.csszengarden.com

http://www.cssbeauty.com

http://www.stylegala.com

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Keuntungan CSS…1.Kaya akan style

2.Mudah dalam penggunaan

3.Dapat diterapkan untuk beberapa dokumen sekaligus

4.Cascading

5.Ukuran file yang kecil

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

5

Menyisipkan code CSS di HTML

1. Tag <link>2. Tag <style> </style>3. Perintah @import4. Inline Style

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

6

Menyisipkan code CSS di HTML

1. Tag <link><link rel=”stylesheet”

type=”text/css” href=”file.css”>

Penulisan di bagian Header File

CSS Rules diletakkan di file eksternal

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

7

Menyisipkan code CSS di HTML

2. Tag <style> </style>

<style type=”text/css”>

. /* pendefinisian style rule */

. /* tanda ini berarti komentar */

</style>

Tag ini juga diletakkan di Header File

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

8

Menyisipkan code CSS di HTML3. Perintah @import

<style type=”text/css”>

@import url(file.css);

. /* definisi style rule */

.

</style>

CSS Rules di File Eksternal

Tidak semua browser mendukung

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

9

Menyisipkan code CSS di HTML

4. Inline Style

<tag style=”property1: value;

property2: value; ...”> text </tag>

Langsung di tag tag HTMLDapat diterapkan untuk semua tag HTML

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

10

Aturan CSS

1. Selector, memberi tahu browser pada elemen mana rule CSS akan diterapkan

2. Property, nama sifat dari sebuah elemen

3. Value, data aktual yang menentukan perubahan (penampilan) elemen

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

11

Aturan CSSSpacing• sama seperti HTML, multiple space

dan carriage return = single space

Comments• komentar disisipkan di antara

tanda

/* dan */Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

12

Selectors1.Tag HTML2.Selektor class3.Selektor id

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

13

Selectors1. Tag HTML

Semua tag HTML bisa digunakan sebagai selector.

Style yang didefinisikan dengan CSS akan berasosiasi dengan elemen HTML yang bersangkutan.

p {color: blue}

h1 {font-family: “Trebuchet MS”}Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

14

Selectors2. Selektor class Elemen HTML harus masuk ke dalam

kelas tertentu

<p class=”paragraf1”> teks </p>

Dalam CSS rules, didahului titik.paragraf1 {font-style: italic}

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

15

Selectors3. Selektor id

Penggunaan seperti selektor class

Bedanya, id harus unik. Analoginya

seperti NIM mahasiswa dengan kelasnya.

<h1 id=”title”>CSS</h1>

Dalam CSS rule:

#title {font-weight: bold; text- decoration: underline} Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

16

SelectorsContextual Selector

Deklarasi akan dievaluasi jika kondisi tertentu terpenuhi. Contohnya,

h1 i {text-decoration: line-through}

hanya akan dievaluasi untuk elemen yang dilingkupi tag <h1> dan <i>

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

17

SelectorsPseudo-class

Digunakan jika suatu kondisi eksternal dikenakan pada elemen HTML (mis. sebuah link di-klik)

selector:pseudo-class {property: value}

contoh:

a:hover {color: red}

a:link {color: #23d4f1}

a:visited {color: rgb(123,32,65)}Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

18

SelectorsPseudo-element

Menyatakan style yang diaplikasikan pada suatu kondisi tipografi, bukan struktur.

(mis. huruf pertama, kata pertama)

h1:first-letter {font-size: 150%; color: blue}

p:first-line {font-weight: bold}Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

19

GroupingSelector

h1, h2, h3 {border-style: dashed}

Property p {color: navy; text-align: justify}

Value h1 {font: bold 14pt Arial}

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

20

SpecificityMenentukan style mana yang akan digunakan jika terdefinisi dua atau lebih style pada elemen yang sama. Contoh:

.paragraf1 {color: blue}

p {color: red}

HTML:

<p class=”paragraf1”> teks </p>

Warna apa yang akan muncul ?

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

21

Specificity

BiruKenapa?Specificity:HTML tags 1Class 10Id 100

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

22

InheritanceParent-child

Tag tag HTML memiliki

hubungan parent-child

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

23

InheritanceSuatu style yang didefinisikan

pada induk akan terdefinisi pula untuk anaknya

Contoh: body {color: purple}

h1 {font-weight: bold}

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

24

Font

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

25

font-family: <fontname>p {font-family: Arial, Verdana, "Times New Roman"}

font-style: normal | italicp {font-style: italic}

font-variant: normal | small-capsp {font-variant: small-caps}

font-weight: normal | bold | bolder | lighter | 100–900p {font-weight: bold}p {font-weight: 400}

font-size: xx-small | x-small | small | medium | large | x-large | xx-largefont-size: larger | smallerfont-size: <length> | <percentage>

p {font-size: large}p {font-size: smaller}p {font-size: 200px}p {font-size: 150%}

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

26

font: [<style>||<variant>||<weight>]? <size>[/<line-height>]? <family>font: caption | icon | menu | message-box | small-caption | status-bar

p {font: italic 12pt "Helvetica Nue", serif}p {font: bold italic large Palatino, serif}p {font: normal small-caps bold 120%/120% fantasy}p {font: x-large/20pt "new century schoolbook", serif}

Font

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

27

Color

28

color: color: <color><color>p {color: red}p {color: red}p {color: #448F2C}p {color: #448F2C}p {color: rgb(255,0,0)}p {color: rgb(255,0,0)}p {color: rgb(100%,50%,25%)}p {color: rgb(100%,50%,25%)}p {color: #f25}p {color: #f25}

background-color: background-color: <color><color> | transparent | transparentbody {background-color: transparent}body {background-color: transparent}

background-image: background-image: <url><url> | none | nonebody {background-image: none}body {background-image: none}body {background-image: url(http://www.site.com/logo.gif)}body {background-image: url(http://www.site.com/logo.gif)}

background-repeat: repeat | repeat-x | repeat-y | no-repeatbackground-repeat: repeat | repeat-x | repeat-y | no-repeatbody {background-repeat: no-repeat}body {background-repeat: no-repeat}

background-attachment: scroll | fixedbackground-attachment: scroll | fixedbody {background-attachment: fixed}body {background-attachment: fixed}

background-position: [background-position: [<percentage><percentage>||<length><length>]{1,2}]{1,2}background-position: [ top | center | bottom] || [ left | center | right]background-position: [ top | center | bottom] || [ left | center | right]

body {background-position: 50%}body {background-position: 50%}body {background-position: 200px 50%}body {background-position: 200px 50%}body {background-position: center}body {background-position: center}body {background-position: right bottom}body {background-position: right bottom}

background: [ background: [ <color><color> || || <image><image> || || <repeat><repeat> || || <attachment><attachment> || || <position><position> ] ] body {background: url("chess.png") gray 50% repeat fixed }body {background: url("chess.png") gray 50% repeat fixed }

Color & Background

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

29

Color

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

30

Background

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

31

Time for practice!

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

32

AAnnsswweerr

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

33

AAnnsswweerr

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

34Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Pengelompokan elemen dokumen

Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen

Pengelompokkan ada dua jenis :- inline (alur, flow) : <span> </span>- block (blok) : <div> </div>

<span> dan <div> biasanya digunakan dengan parameter id dan class

Struktur lojik ini dapat digunakan untuk :- mempermudah menginterpretasi isi dokumen- memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Contoh

<div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> <span class="alamat">Jl. Tubagus Ismail XI/5</span></div><div id="mhs02" class="mhs"> <span class="nama">Dewi Purnama</span><br> <span class="alamat">Jl. Cisitu Lama 24</span></div>

<style type="text/css"> .mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial} .alamat {font-style: italic}</style><div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> ...

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

To do list..

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom

Finally

Pemograman Web (2010/2011) – Hari Setiaji, S.KomPemograman Web (2010/2011) – Hari Setiaji, S.Kom