Upload
hari-setiaji
View
1.514
Download
5
Embed Size (px)
DESCRIPTION
Materi CSS dimulai dari pengenalan, cara pengaksesan, konseptual penulisan dan berbagai atribut yang berhubungan. Disertai dengan contoh dan screenshoot. Enjoy..
Citation preview
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