• 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 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 sheet
Pendefinisian 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
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>
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
• CSS1 :
– Fonts
– Text
– Color
– Backgrounds
– Block-level Elements
• CSS2 :
– Positioning
– Visual Formatting
– Media Types
• CSS3 :
– User Interfaces
– Accessibility
– Columnar layout
– International Features
– Mobile Devices
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>
CARA KEDUA : Embedded Style Sheet
Menggunakan tag style di dalam tag head.
<head>
<style type=“text/css”>
……… style definitions ………
</style>
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;….
CARA KETIGA : Linked Style Sheet
Menyimpan informasi style ke dalam sebuah
file dengan ekstensi/type file css
Memanggil file css dalam html dengan tag
link yang diletakkan dalam tag head.
<head>
<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>
<HTML> <HEAD> </HEAD> <BODY>
P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatu pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan beneran 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 kita sendiri </FONT></B>
</BODY> </HTML>
Contoh code Tidak Dengan CSS
Sekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu ?
<HTML> <HEAD> <STYLE TYPE="text/css"> B { color : lime } </STYLE> </HEAD> <BODY>
P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ?
<P>
J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita
sendiri</B> </BODY> </HTML>
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>
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}
• Kontekstual
h1 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>
Contoh :
<style type=“text/css” >
hr { color : red ; height : 5px ; width : 50%; }
</style>
Keterangan :
Tag adalah style
Atribut adalah type=“text/css”
Selector adalah hr
Property adalah color, height, width
Value adalah red, 5px, 50%
ID SELECTOR dan CLASS
ID selector didefenisikan sendiri
ID selector diawali tanda # ( octothorpe)
CLASS diawali dengan tanda titik ( . )
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
PENULISAN PADA TAG
DENGAN ATRIBUT STYLE
SPAN dan DIV
• Dua tag yang sering dikombinasikan dengan selector class adalah
<SPAN> dan <DIV>
• Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak ada
pergantian baris (line break) yang disisipkan sebelum atau setelah
penulisannya.
• Tag <DIV> adalah "block tag" dalam HTML, berarti pergantian baris
secara otomatis disisipkan untuk memberikan jarak antara blok yang dibuat dengan teks atau blok lain sebelum dan
sesudahnya
(seperti tag <P> atau <TABLE>).
• Tag <DIV> sering digunakan untuk implementasi layer karena
layer merupakan blokblok informasi terpisah. Tag <DIV>
merupakan pilihan yang tepat saat membuat layer pada halaman
CSS3
CSS3 Border
CSS3 Border
Dengan 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
CSS3 Border
CSS3 Border
CSS3 Border
CSS3 Border
CSS3 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 */ }
CSS3 Background
CSS3 Background
CSS3 Background
Background 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; }
CSS3 Background
CSS3 Background
Background 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; }
CSS3 Background
CSS3 Background
Multiple Background body { background-image:url(img_flwr.gif),url(img_tree.gif); }CSS3 Text Effect
CSS3 Text Effect
CSS3 Text Effect
Text Shadow h1 { text-shadow: 5px 5px 5px #FF0000; }Text Word Wrapping
CSS3 2D Transform
CSS3 2D Transform
CSS3 2D Transform
Method 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 */ }
CSS3 2D Transform
CSS3 2D Transform
Skew (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 */ }
CSS3 3D Transform
CSS3 3D Transform
CSS3 3D Transform
CSS3 3D Transform
Contoh :
div { transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */ }
CSS3 Transition
CSS3 Transition
CSS3 Transition
Contoh 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;
CSS3 Multiple Column
CSS3 Multiple Column
CSS3 Multiple Column
CSS3 Multiple Column
Contoh : 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;
CSS3 User Interface
CSS3 User Interface
CSS3 User Interface
CSS3 User Interface
Contoh : 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; }
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/webmonke
y/reference/stylesheet_guide
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
