CSS (Cascading Style Sheet)

Transkripsi

1 CSS (Cascading Style Sheet)

2 CSS 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

3 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, Spesifikasi CSS2, Spesifikasi CSS3,

4 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>

5 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

6 CSS1 : Fonts Text Color Backgrounds Block-level Elements

7 CSS2 : Positioning Visual Formatting Media Types Interfaces

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

9 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>

10 CARA KEDUA : Embedded Style Sheet Menggunakan tag style di dalam tag head. <head> <style type= text/css > </style> </head> style definitions

11 Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector { property1 : value1 ; property2 : value2;. propertyn : valuen ; } Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector.

12

13

14 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 /> </head>

15

16 Contoh code Tidak Dengan CSS Sekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu? katakan saja kita ingin mewarnainya dengan warna hijau.. <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>

17 Contoh code Dengan CSS <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>

18 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) : <html> Bila style tidak didefinisikan, maka akan digunakan definisi style dari induknya <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>

19 Macam-macam Selector Tag (elemen) HTML h1 {color: green} i {font-style: normal} Class ID.mhs {border: black solid 1; color: gray}.nama {font: bold 20 Arial} #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> <i>last updated 10 September 2003</i>

20 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%

21 ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik (. )

22

23 Selector Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam style didefinisikan bagaimana setiap selector akan bekerja (font, color dan lainlain.). Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk mengaktifkan style yang telah didefinisikan. Jenis-jenis Selector: Selector HTML

24 PENULISAN PADA TAG DENGAN ATRIBUT STYLE

25 PENULISAN PADA HEAD

26 PENULISAN DENGAN CLASS

27 PENULISAN DENGAN ID

28 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>

29 CSS3

30 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

31 CSS3 Border 31

32 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) round; -moz-border-image:url(border.png) round; /* Firefox */ -webkit-border-image:url(border.png) round; /* Safari and Chrome */

33 CSS3 Background

34 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;

35 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; }

36 CSS3 Background Multiple Background body { } background-image:url(img_flwr.gif),url(img_tree.gif);

37 CSS3 Text Effect

38 CSS3 Text Effect Text Shadow h1 { } text-shadow: 5px 5px 5px #FF0000; Text Word Wrapping p {word-wrap:break-word;}

39 CSS3 2D Transform

40 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 */ 07/12/12 By : Suwondo, S.Kom 40

41 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 */ }

44 Contoh : div { } CSS3 3D Transform transform: rotatey(130deg); -webkit-transform: rotatey(130deg); /* Safari and Chrome */

45 CSS3 Transition

46 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; }

47 CSS3 Multiple Column

48 CSS3 Multiple Column

49 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; }

50 CSS3 User Interface

51 CSS3 User Interface

52 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; }

53 Resources 1 This is CSS at its finest The Official CSS Site Australian firm, very professional y/reference/stylesheet_guide Where I learned CSS and Web Design

54 Resources 2 HTML-Kit editor Amaya editor W3schools XHTML and CSS tutorials Web Head Start tutorials Tidy Web Interface - CSS Validator - Dave Raggett XHTML and CSS tutorials - Web Accessibility in Mind (WebAIM) - Color contrast analyzer - Stylin With CSS, A Designer s Guide, Second Edition by Charles Wyke-Smith

55 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