CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style...

55
CSS (Cascading Style Sheet)

Transcript of CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style...

Page 1: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS (Cascading Style Sheet)

Page 2: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

• CSS ??????– Singkatannya Cascading Style Sheet– Adalah suatu teknologi yang digunakan untuk

memperindah tampilan halaman website.– Tujuan dari penggunaan CSS ini adalah

supaya diperoleh suatu kekonsistenan style pada elemen tertentu.

– Singkatnya kita bisa mempercantik situs kita dengan cepat secara keseluruhan warna dan tampilan yang ada di situs kita.

• Syarat – syarat belajar CSS ?????????– Anda paling tidak sudah tau code-code HTML

CSS

Page 3: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

• CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen terstruktur

• CSS memisahkan presentation 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

• Spesifikasi CSS1, http://www.w3.org/TR/REC-CSS1• Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2• Spesifikasi CSS3, http://www.w3.org/TR/REC-CSS3

Page 4: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Berbagai Cara Penulisan Code CSS

• CSS dapat dituliskan pada bagian <body>,

• <head> suatu dokumen HTML atau diletakkan

di sebuah file eksternal.• Perintah-perintah CSS dibatasi oleh tag

<style>dan </style>

Page 5: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Sintaks 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

Page 6: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

• CSS1 :– Fonts– Text– Color– Backgrounds– Block-level Elements

Page 7: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

• CSS2 :– Positioning– Visual Formatting– Media Types– Interfaces

Page 8: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

• CSS3 :– User Interfaces– Accessibility– Columnar layout– International Features– Mobile Devices– Scalable Vector Graphics

Page 9: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Mekanisme Mengaplikasikan CSS

CARA PERTAMA : Inline Style Sheet mengetikkan langsung dalam tag html sebagai atribut .

<body>

<b style = “color : blue”> teks tebal dan biru </b>

</body>

Page 10: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CARA KEDUA : Embedded Style Sheet Menggunakan tag style di dalam tag head.

<head> <style type=“text/css”>

……… style definitions ………

</style></head>

Page 11: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Style definitions : adalah defenisi style yang ingin dibuat.

Format penulisannya adalah :

Selector adalah tag yang digunakan web browser.

Property : value adalah efek dari style yang diinginkan untuk selector.

Selector { property1 : value1 ; property2 : value2;….propertyN : valueN ; }

Page 12: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman
Page 13: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman
Page 14: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CARA KETIGA : Linked Style SheetMenyimpan informasi style ke dalam sebuah

file dengan ekstensi/type file cssMemanggil file css dalam html dengan tag

link yang diletakkan dalam tag head.

<head>

<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>

</head>

Page 15: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman
Page 16: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

<HTML><HEAD></HEAD><BODY>P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatupekerjaan</FONT></B> itu mudah maka pekerjaan itu akanbeneran menjadi<B><FONT COLOR="Lime"> lebih mudah</FONT></B>?<P>J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti</FONT></B> terhadap <B><FONT COLOR="Lime">diri kitasendiri </FONT></B></BODY></HTML>

Contoh code Tidak Dengan CSSSekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu ?katakan saja kita ingin mewarnainya dengan warna hijau…..

Page 17: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

<HTML><HEAD><STYLE TYPE="text/css">B { color : lime }</STYLE></HEAD><BODY>P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudahmaka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ?<P>J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kitasendiri</B></BODY></HTML>

Contoh code Dengan CSS

Page 18: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Grouping & 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>

Page 19: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

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>

Page 20: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Contoh :<style type=“text/css” > hr { color : red ; height : 5px ; width : 50%; }</style>

Keterangan :Tag adalah styleAtribut adalah type=“text/css”Selector adalah hrProperty adalah color, height, widthValue adalah red, 5px, 50%

Page 21: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

ID SELECTOR dan CLASS

ID selector didefenisikan sendiriID selector diawali tanda # ( octothorpe)CLASS diawali dengan tanda titik ( . )

Page 22: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman
Page 23: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Selector

• Adalah nama yang diberikan untuk setiap style berbeda

yang dibuat. Di dalam style didefinisikan bagaimana

setiap selector akan bekerja (font, color dan lain-lain.).

Kemudian di dalam bagian body halaman web, selector

tersebut dipanggil untuk mengaktifkan style yang telah

didefinisikan.• Jenis-jenis Selector:

• Selector HTML• Selector Class• Selector ID

Page 24: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

PENULISAN PADA TAG DENGAN ATRIBUT STYLE

Page 25: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

PENULISAN PADA HEAD

Page 26: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

PENULISAN DENGAN CLASS

Page 27: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

PENULISAN DENGAN ID

Page 28: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

SPAN dan DIV• Dua tag yang sering dikombinasikan dengan selector class

adalah<SPAN> dan <DIV>• Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak

adapergantian baris (line break) yang disisipkan sebelum atau

setelahpenulisannya.• Tag <DIV> adalah "block tag" dalam HTML, berarti

pergantian barissecara otomatis disisipkan untuk memberikan jarak antara blokyang dibuat dengan teks atau blok lain sebelum dan

sesudahnya(seperti tag <P> atau <TABLE>).• Tag <DIV> sering digunakan untuk implementasi layer

karenalayer merupakan blokblok informasi terpisah. Tag <DIV>merupakan pilihan yang tepat saat membuat layer pada

halamanweb.

Page 29: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3CSS3

Page 30: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BorderCSS3 BorderDengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai perbatasan - tanpa menggunakan program desain, seperti Photoshop.

Dalam bab ini anda akan belajar tentang sifat batas berikut:

     * border-radius     * box-shadow     * border-image

Page 31: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BorderCSS3 Border

31

Page 32: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BorderCSS3 BorderCSS3 Rounded Corners

div{

border:2px solid;border-radius:25px;-webkit-border-radius:25px; /* Safari */

-moz-border-radius:25px; /* Safari */ }

CSS3 Box Shadow

div{

box-shadow: 10px 10px 5px #888888;

-moz-box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */

}

CSS3 Border Image

div{

border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */

}

Page 33: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BackgroundCSS3 Background

Page 34: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BackgroundCSS3 BackgroundBackground Size Property

div{

background:url(img_flwr.gif);-moz-background-size:80px 60px; /* Firefox 3.6 and earlier */-webkit-background-size:80px 60px; /* Safari */background-size:80px 60px; background-repeat:no-repeat;

}

Page 35: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BackgroundCSS3 BackgroundBackground Origin Property

div{background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;}

Page 36: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 BackgroundCSS3 BackgroundMultiple Background

body{

background-image:url(img_flwr.gif),url(img_tree.gif);}

Page 37: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 Text EffectCSS3 Text Effect

Page 38: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 Text EffectCSS3 Text EffectText Shadow

h1{

text-shadow: 5px 5px 5px #FF0000;}

Text Word Wrapping

p {word-wrap:break-word;}

Page 39: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 2D TransformCSS3 2D Transform

Page 40: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 2D TransformCSS3 2D TransformMethod yang ada :

• translate()

• rotate()

• scale()

• skew()

• matrix()

div{

transform: rotate(30deg);-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */

}

07/12/12 By : Suwondo, S.Kom 40

Page 41: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 2D TransformCSS3 2D TransformSkew (x-axis-degree, y-axis-degree):

div{transform: skew(30deg,20deg);-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}

Matrix (n, n, n, n, n, n):

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}

Page 42: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 3D TransformCSS3 3D Transform

Page 43: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 3D TransformCSS3 3D Transform

Page 44: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 3D TransformCSS3 3D Transform

Contoh :div

{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */

}

Page 45: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 TransitionCSS3 Transition

Page 46: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 TransitionCSS3 TransitionContoh Effect transisi dengan property width dengan durasi 2 detik :

div{transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari and Chrome */-o-transition: width 2s; /* Opera */}Catatan: Jika durasi yang tidak ditentukan, transisi tidak akan berpengaruh, karena nilai default adalah 0.div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

Page 47: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 Multiple ColumnCSS3 Multiple Column

Page 48: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 Multiple ColumnCSS3 Multiple Column

Page 49: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 Multiple ColumnCSS3 Multiple ColumnContoh :div

{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}

div{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;}

div{-moz-column-rule:3px outset #ff00ff; /* Firefox */-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */column-rule:3px outset #ff00ff;}

Page 50: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 User InterfaceCSS3 User Interface

Page 51: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 User InterfaceCSS3 User Interface

Page 52: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

CSS3 User InterfaceCSS3 User InterfaceContoh :div

{resize:both;overflow:auto;}

div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}

div{border:2px solid black;outline:2px solid red;outline-offset:15px;}

Page 53: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Resources 1

• http://www.csszengarden.com– This is CSS at its finest

• http://www.w3.org/Style/CSS/– The Official CSS Site

• http://css.maxdesign.com.au/– Australian firm, very professional

• http://webmonkey.wired.com/webmonkey/reference/stylesheet_guide– Where I learned CSS and Web Design

Page 54: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Resources 2• HTML-Kit editor – http://chami.com/• Amaya editor – http://www.w3c.org/Amaya• W3schools XHTML and CSS tutorials –

http://www.w3schools.com/• Web Head Start tutorials – http://www.webheadstart.org/• Tidy Web Interface -

http://www.washington.edu/webinfo/tidy.cgi• CSS Validator - http://jigsaw.w3.org/css-validator/• Dave Raggett XHTML and CSS tutorials -

http://www.w3.org/MarkUp/Guide/Overview.html• Web Accessibility in Mind (WebAIM) -

http://www.webaim.org/• Color contrast analyzer -

http://www.visionaustralia.org.au/info.aspx?page=628• Stylin’ With CSS, A Designer’s Guide, Second Edition by

Charles Wyke-Smith

Page 55: CSS (Cascading Style Sheet) - alifcintaibu.files.wordpress.com · – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman

Mari Perdalam Materi!!!• Silahkan pelajari lebih dalam tentang berbagai

style pada CSS ( 1-3): Color & Background Font Text List Box Model Visual Formatting Model (normal & float) User Interface & Downloadable Font Media Types Visual Effects Positioning Scheme