web programming - cascading style sheet

38
Pemrograman Web – CSS Pemograman Web (2010/2011) – Mar 17, 2011 Teknik Informatika, Universitas Islam Indonesia Cascading Style Sheet Follow Hari Setiaji on Twitter

Upload: hari-setiaji

Post on 08-May-2015

1.502 views

Category:

Education


5 download

DESCRIPTION

Materi CSS dimulai dari pengenalan, cara pengaksesan, konseptual penulisan dan berbagai atribut yang berhubungan. Disertai dengan contoh dan screenshoot. Enjoy..

TRANSCRIPT

Page 1: 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

Page 2: Web Programming - Cascading Style Sheet

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

Page 3: Web Programming - Cascading Style Sheet

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

Page 4: Web Programming - Cascading Style Sheet

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

Page 5: Web Programming - Cascading Style Sheet

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

Page 6: Web Programming - Cascading Style Sheet

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

Page 7: Web Programming - Cascading Style Sheet

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

Page 8: Web Programming - Cascading Style Sheet

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

Page 9: Web Programming - Cascading Style Sheet

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

Page 10: Web Programming - Cascading Style Sheet

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

Page 11: Web Programming - Cascading Style Sheet

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

Page 12: Web Programming - Cascading Style Sheet

12

Selectors1.Tag HTML2.Selektor class3.Selektor id

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

Page 13: Web Programming - Cascading Style Sheet

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

Page 14: Web Programming - Cascading Style Sheet

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

Page 15: Web Programming - Cascading Style Sheet

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

Page 16: Web Programming - Cascading Style Sheet

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

Page 17: Web Programming - Cascading Style Sheet

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

Page 18: Web Programming - Cascading Style Sheet

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

Page 19: Web Programming - Cascading Style Sheet

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

Page 20: Web Programming - Cascading Style Sheet

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

Page 21: Web Programming - Cascading Style Sheet

21

Specificity

BiruKenapa?Specificity:HTML tags 1Class 10Id 100

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

Page 22: Web Programming - Cascading Style Sheet

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

Page 23: Web Programming - Cascading Style Sheet

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

Page 24: Web Programming - Cascading Style Sheet

24

Font

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

Page 25: Web Programming - Cascading Style Sheet

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

Page 26: Web Programming - Cascading Style Sheet

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

Page 27: Web Programming - Cascading Style Sheet

27

Color

Page 28: Web Programming - Cascading Style Sheet

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

Page 29: Web Programming - Cascading Style Sheet

29

Color

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

Page 30: Web Programming - Cascading Style Sheet

30

Background

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

Page 31: Web Programming - Cascading Style Sheet

31

Time for practice!

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

Page 32: Web Programming - Cascading Style Sheet

32

AAnnsswweerr

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

Page 33: Web Programming - Cascading Style Sheet

33

AAnnsswweerr

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

Page 34: Web Programming - Cascading Style Sheet

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

Page 35: Web Programming - Cascading Style Sheet

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

Page 36: Web Programming - Cascading Style Sheet

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

Page 37: Web Programming - Cascading Style Sheet

To do list..

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

Page 38: Web Programming - Cascading Style Sheet

Finally

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