CSS 1

PEMROGRAMAN WEB 1
CSS 1
STMIK Asia Malang - 2013
Rina Dewi Indah Sari, S.Kom
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 sheet Pendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet
STMIK Asia Malang -
Referensi CSS
Spesifikasi CSS1,
http://www.w3.org/TR/REC-CSS1 http://www.w3.org/TR/REC-CSS2
Spesifikasi CSS2,
STMIK Asia Malang -
Sintak CSS
selector {property: value}
Selector menggunakan tag HTML. Properti adalah atribut yang ingin diubah. Setiap atribut dapat memiliki nilai (value)
STMIK Asia Malang -
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 -
Kategori Style Sheet

1.
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 -
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 -
Macam-macam Selector
Tag (elemen) HTML

h1 {color: green} i {font-style: normal} {border: black solid 1; color: gray}
<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>
Class
.mhs .nama {font: bold 20 Arial}
ID
#mhs02 {color: red}
Kontekstual
h1 i {color: navy} div.mhs .alamat b {color: green}
STMIK Asia Malang -
Class Selector
p.right {text-align: right} p.center {text-align: center} <p class="right"> This paragraph will be rightaligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
STMIK Asia Malang -
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 -
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 -
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 { { { { { { color: color: color: color: color: color: red } green } blue } purple } yellow } maroon }
Contoh :
a:link a:visited a:hover a:active a:focus a.mhs:link
STMIK Asia Malang -
Pseudo Element
Untuk menyatakan style yang digunakan terhadap suatu kondisi tipografi, bukan struktur (misalnya baris pertama)
Pseudo element :

:first-letter :first-line { font-size: 200%; float: left} { color: green }
Contoh :
p:first-letter p:first-line
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 -
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 | 100900

p {font-weight: bold} p {font-weight: 400}
font-size: xx-small | x-small | small | medium | large | x-large | xx-large font-size: larger | smaller font-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 -
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> | transparent

body {background-color: transparent}
background-image: <url> | none

body {background-image: none} body {background-image: url(http://www.site.com/logo.gif)}
background-repeat: repeat | repeat-x | repeat-y | no-repeat

body {background-repeat: no-repeat}
background-attachment: scroll | fixed

body {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 -
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 | none

h1 {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 | nowrap

p {white-space: pre}
STMIK Asia Malang -
List
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | lower-latin | upper-alpha | upper-latin | none
ul {list-style-type: circle}
list-style-image: <url> | none

ul {list-style-image: smiley.gif}
list-style-position: inside | outside

ul {list-style-position: inside}
outside
inside
list-style: <style> || <position> || <image>

ol {list-style: lower-alpha outside smiley.gif}
STMIK Asia Malang -
CSS Length Units
STMIK Asia Malang -
Perintah CSS
Perintah CSS lebih lengkap dapat dilihat pada link file berikut: perintah css.pdf
STMIK Asia Malang -
Latihan
Buat Halaman Web dengan style seperti file berikut:

CSS 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

CSS 1

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB 1

Rina Dewi Indah Sari, S.Kom

Apakah itu CSS ?

STMIK Asia Malang -

STMIK Asia Malang -

selector {property: value}

Style sheet didefinisikan dalam bentuk rule, terdiri dari:

Selector Declaration : property & value

Seluruh elemen (tag) HTML dapat digunakan sebagai selector

STMIK Asia Malang -

Kategori Style Sheet

Inline Style Sheet (di dalam elemen HTML)

Embedded Style Sheet (di dalam dokumen HTML)

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 -

Grouping dan Inheritance

STMIK Asia Malang -

Tag (elemen) HTML

STMIK Asia Malang -

STMIK Asia Malang -

Contoh file CSS Sederhana

STMIK Asia Malang -

STMIK Asia Malang -

:first-letter :first-line { font-size: 200%; float: left} { color: green }

h1.mhs:first-letter { font-size: 20pt }

STMIK Asia Malang -

font-style: normal | italic

font-variant: normal | small-caps

font-weight: normal | bold | bolder | lighter | 100900

STMIK Asia Malang -

Color & Background

background-color: <color> | transparent

background-image: <url> | none

background-repeat: repeat | repeat-x | repeat-y | no-repeat

background-attachment: scroll | fixed

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

body {background-position: 200px 50%}

background: [ <color> || <image> || <repeat> || <attachment> || <position> ]

STMIK Asia Malang -

text-indent: <length> | <percentage>

text-align: left | right | center | justify

text-decoration: none | [ underline || overline || line-through || blink ]

text-shadow: none | [ <color> || <length> <length> <length>? ]

text-transform: capitalize | uppercase | lowercase | none

letter-spacing: none | <length>

word-spacing: none | <length>

line-height: normal | <number> | <length> | <percentage>

white-space: normal | pre | nowrap

STMIK Asia Malang -

list-style-image: <url> | none

list-style-position: inside | outside

list-style: <style> || <position> || <image>

STMIK Asia Malang -

CSS Length Units

STMIK Asia Malang -

STMIK Asia Malang -

Buat Halaman Web dengan style seperti file berikut:

Anda mungkin juga menyukai