Post on 03-May-2019
CSS (Cascading Style Sheet)
• 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
• 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
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>
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
• CSS1 :– Fonts– Text– Color– Backgrounds– Block-level Elements
• CSS2 :– Positioning– Visual Formatting– Media Types– Interfaces
• CSS3 :– User Interfaces– Accessibility– Columnar layout– International Features– Mobile Devices– Scalable Vector Graphics
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>
CARA KEDUA : Embedded Style Sheet Menggunakan tag style di dalam tag head.
<head> <style type=“text/css”>
……… style definitions ………
</style></head>
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 ; }
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>
<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…..
<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
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>
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>
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%
ID SELECTOR dan CLASS
ID selector didefenisikan sendiriID 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
PENULISAN PADA HEAD
PENULISAN DENGAN CLASS
PENULISAN DENGAN ID
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.
CSS3CSS3
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
CSS3 BorderCSS3 Border
31
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 */
}
CSS3 BackgroundCSS3 Background
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;
}
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;}
CSS3 BackgroundCSS3 BackgroundMultiple Background
body{
background-image:url(img_flwr.gif),url(img_tree.gif);}
CSS3 Text EffectCSS3 Text Effect
CSS3 Text EffectCSS3 Text EffectText Shadow
h1{
text-shadow: 5px 5px 5px #FF0000;}
Text Word Wrapping
p {word-wrap:break-word;}
CSS3 2D TransformCSS3 2D Transform
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
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 */}
CSS3 3D TransformCSS3 3D Transform
CSS3 3D TransformCSS3 3D Transform
CSS3 3D TransformCSS3 3D Transform
Contoh :div
{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
CSS3 TransitionCSS3 Transition
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;}
CSS3 Multiple ColumnCSS3 Multiple Column
CSS3 Multiple ColumnCSS3 Multiple Column
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;}
CSS3 User InterfaceCSS3 User Interface
CSS3 User InterfaceCSS3 User Interface
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;}
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
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
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