08. css 1.ppt
TRANSCRIPT
![Page 1: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/1.jpg)
PEMROGRAMAN WEB 1
CSS 1
Rina Dewi Indah Sari, S.Kom
STMIK Asia Malang - 2013
![Page 2: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/2.jpg)
Apakah itu CSS ? CSS adalah standar pembuatan dan
pemakaian style (font, warna, jarak baris, dll) untuk dokumen terstruktur
CSS memisahkan style sebuah dokumen dari content dokumen itu sendiri
CSS memudahkan pembuatan dan pemeliharaan dokumen web
Setiap User Agent mempunyai default style sheetPendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet
STMIK Asia Malang - 2013
![Page 3: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/3.jpg)
Referensi CSSSpesifikasi CSS1,
http://www.w3.org/TR/REC-CSS1Spesifikasi CSS2,
http://www.w3.org/TR/REC-CSS2
STMIK Asia Malang - 2013
![Page 4: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/4.jpg)
Sintak CSS selector {property: value}
Selector menggunakan tag HTML. Properti adalah atribut yang ingin diubah. Setiap atribut dapat memiliki nilai (value)
STMIK Asia Malang - 2013
![Page 5: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/5.jpg)
Sintak Rule Style sheet didefinisikan dalam bentuk rule, terdiri
dari: Selector Declaration : property & value
Contoh rule :h1 { color: blue } Keterangan: Selector : h1 Property : color Value : blue
Seluruh elemen (tag) HTML dapat digunakan sebagai selector
STMIK Asia Malang - 2013
![Page 6: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/6.jpg)
Kategori Style Sheet1. Inline Style Sheet (di dalam elemen HTML)
<p style="color: green">2. Embedded Style Sheet (di dalam dokumen HTML)
<style type="text/css"> h1 {color: blue}</style>
3. Linked Style Sheet (di file eksternal) <link rel="stylesheet" type="text/css"
href="http://webku.com/cool.css"> <style type="text/css">
@import url(http://webku.com/cool.css);</style>
<style type="text/css“ href=“coll.css”></style>
Default Style Sheet (style default dari browser)
STMIK Asia Malang - 2013
![Page 7: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/7.jpg)
Grouping dan Inheritance Grouping (pengelompokan) :
Selector : h1, h2, h3 { font-family: arial } Declaration : h1 { font-weight: bold; font-size: 14pt } Value : h1 { font: bold 12pt arial }
Inheritance (pewarisan) :Bila style tidak didefinisikan, maka akan digunakan definisi style
dari induknya<html> <head> <style type="text/css"> body {color: navy} h1 {font-family: Arial} b {text-decoration: underline} </style> </head> <body> <h1>Ini <b>Homepage</b> Saya</h1> Ini adalah homepage yang menggunakan CSS. </body></html>
STMIK Asia Malang - 2013
![Page 8: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/8.jpg)
Macam-macam Selector Tag (elemen) HTML
h1 {color: green}i {font-style: normal}
Class.mhs {border: black solid 1; color: gray}.nama {font: bold 20 Arial}
ID#mhs02 {color: red}
Kontekstualh1 i {color: navy}div.mhs .alamat b {color: green}
<h1>Daftar Mahasiswa <i>Student Exchange</i></h1><div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> <span class="alamat">Jl. Tubagus Ismail XI/5 <b>Bandung</b></span></div><div id="mhs02" class="mhs"> <span class="nama">Dewi Purnama</span><br> <span class="alamat">Jl. Cisitu Lama 24 <b>Bandung</b></span></div><i>Last updated 10 September 2003</i>
STMIK Asia Malang - 2013
![Page 9: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/9.jpg)
Class Selector p.right {text-align: right} p.center {text-align: center}
<p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
STMIK Asia Malang - 2013
![Page 10: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/10.jpg)
Class Selector.center {text-align: center}<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
STMIK Asia Malang - 2013
![Page 11: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/11.jpg)
Contoh file CSS Sederhana<style type="text/css"> h1 { color: maroon; font-family: Verdana, Tahoma,
Arial; font-size: 24px; text-decoration: underline; background: yellow; } </style>
STMIK Asia Malang - 2013
![Page 12: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/12.jpg)
Pseudo Class Pseudo class dapat digunakan sebagai selector meskipun class-nya tidak
terdapat di kode HTML Untuk menyatakan style yang digunakan jika suatu kondisi eksternal dikenakan
pada elemen HTML (misalnya di-klik mouse) Sintaks pseudo class :
selector:pseudo-class {property: value} Anchor (<A>) pseudo class :
:link :visited :hover :active :focus
Contoh :a:link { color: red }a:visited { color: green }a:hover { color: blue }a:active { color: purple }a:focus { color: yellow }a.mhs:link { color: maroon }
STMIK Asia Malang - 2013
![Page 13: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/13.jpg)
Pseudo Element Untuk menyatakan style yang digunakan terhadap suatu kondisi tipografi,
bukan struktur (misalnya baris pertama) Pseudo element :
:first-letter :first-line
Contoh :p:first-letter { font-size: 200%; float: left}
p:first-line { color: green }h1.mhs:first-letter { font-size: 20pt }
<html> <head> <title>Drop cap initial letter</title> <style type="text/css"> p:first-letter { font-size: 200%; font-weight: bold; float: left } span { text-transform: uppercase } </style></head> <body> <p><span>The first</span> few words of an article in The Economist.</p> </body></html> STMIK Asia Malang -
2013
![Page 14: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/14.jpg)
Font font-family: <fontname>
p {font-family: Arial, Verdana, "Times New Roman"} font-style: normal | italic
p {font-style: italic} font-variant: normal | small-caps
p {font-variant: small-caps} font-weight: normal | bold | bolder | lighter | 100–900
p {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%}
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}p {font: menu}
STMIK Asia Malang - 2013
![Page 15: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/15.jpg)
Color & Background color: <color>
p {color: red}p {color: #448F2C}p {color: rgb(255,0,0)}p {color: rgb(100%,50%,25%)}p {color: #f25}
background-color: <color> | transparentbody {background-color: transparent}
background-image: <url> | nonebody {background-image: none}body {background-image: url(http://www.site.com/logo.gif)}
background-repeat: repeat | repeat-x | repeat-y | no-repeatbody {background-repeat: no-repeat}
background-attachment: scroll | fixedbody {background-attachment: fixed}
background-position: [<percentage>|<length>]{1,2}background-position: [ top | center | bottom] || [ left | center | right]
body {background-position: 50%}body {background-position: 200px 50%}body {background-position: center}body {background-position: right bottom}
background: [ <color> || <image> || <repeat> || <attachment> || <position> ] body {background: url("chess.png") gray 50% repeat fixed }
STMIK Asia Malang - 2013
![Page 16: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/16.jpg)
Text text-indent: <length> | <percentage>
p {text-indent: 5em} text-align: left | right | center | justify
p {text-align: justify} text-decoration: none | [ underline || overline || line-through || blink ]
p {text-decoration: underline overline} text-shadow: none | [ <color> || <length> <length> <length>? ]
h1 {text-shadow: 3px 3px 5px red}
text-transform: capitalize | uppercase | lowercase | noneh1 {text-transform: capitalize}
letter-spacing: none | <length>p {letter-spacing: 3px}p {letter-spacing: -1px}
word-spacing: none | <length>p {word-spacing: 2em}
line-height: normal | <number> | <length> | <percentage>p {line-height: 1.5}
white-space: normal | pre | nowrapp {white-space: pre}
STMIK Asia Malang - 2013
![Page 17: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/17.jpg)
List list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman |
lower-alpha | lower-latin | upper-alpha | upper-latin | noneul {list-style-type: circle}
list-style-image: <url> | noneul {list-style-image: smiley.gif}
list-style-position: inside | outside ul {list-style-position: inside}
list-style: <style> || <position> || <image>ol {list-style: lower-alpha outside smiley.gif}
outside
inside
STMIK Asia Malang - 2013
![Page 18: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/18.jpg)
CSS Length Units
STMIK Asia Malang - 2013
![Page 19: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/19.jpg)
Perintah CSS Perintah CSS lebih lengkap dapat dilihat
pada link file berikut: perintah css.pdf
STMIK Asia Malang - 2013
![Page 20: 08. CSS 1.ppt](https://reader036.vdocuments.site/reader036/viewer/2022062222/55cf9df7550346d033b01182/html5/thumbnails/20.jpg)
Latihan Buat Halaman Web dengan style seperti
file berikut: