Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
CSS Cascading Style Sheet
2
Alasan Pengembangan CSS
Dikembangkan oleh W3C dengan tujuan untuk menetapkan standar style yang dapat diinterpretasikan oleh berbagai jenis browser Dalam persaingan Netscape dan Microsoft untuk mendominasi dunia, mereka menambahkan atribut HTML yang hanya dikenali oleh browser buatannya sehingga menyulitkan pengembang web
3
PENGERTIAN CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen web CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri CSS memudahkan pembuatan dan pemeliharaan dokumen web
4
Cascading Style Sheets
perintah yang mampu berjalan diantara tag HTML keuntungan css : menghemat pekerjaan pengaturan web
5
Aturan CSS Sintaks : Semua elemen HTML dapat menjadi selector
Selector {Properti : Value} Selector : elemen HTML Properti : atribut-atribut HTML Value : nilai atribut Semua elemen HTML dapat menjadi selector Contoh : h1 {color:#1234AD}
6
Contoh CSS <html> <head><title> - </title>
<style type="text/css"> selector {property :value } </style> </head> <body> <selector> xxxx </selector> </body> </html> ket : selector yang di tentukan di dalam tag <head> akan menjadi tag di dalam tag <body>
7
Penulisan Selector selector { property : value; }
selector { property1 : value1;property2:value2} selector { property1:value1; property2:value2; property3:value3} selector1 { property1 : value1 } selector2 { property1 : value1 } selector1, selector2 & selector3 { property1 : value1 }
8
Penulisan Komentar 1. menggunakan tanda / diikuti * pada css :
contoh : /* penulisan huruf miring */ pada css : selector { /* untuk variasi angka */ property1 : value1 } 2. menggunakan tanda < diikuti ! dan tanda -- <!-- komentar1 --> khusus untuk komentar <!-- hanya berlaku di luar blok css
9
Penerapan CSS Terdapat 3 jenis penerapan :
Inline style sheet (dalam elemen HTML) Internal style sheet (dalam dokumen HTML) External style sheet (menggunakan file eksternal) Jenis kedua dan ketiga dideklarasikan di bagian HEAD
10
Inline style sheet Inline style sheet (dalam elemen HTML)
<p style=“color:green”> css sebagai inline style </p> TIDAKdideklarasikan di bagian HEAD
11
Internal style sheet Internal style sheet (dalam dokumen HTML)
Dideklarasikan di bagian HEAD <html> <head><title> internal css </title> <style type=“text/css”> H1{color:blue} </style> </head>
12
External style sheet External style sheet (menggunakan file eksternal)
Dideklarasikan di bagian HEAD <html> <head><title> external css </title> <link rel=“stylesheet” type=“text/css” href=“css/styleku.css”> </head>
13
Pengelompokan/Grouping
Untuk menghemat waktu dan mengurangi jumlah kode, perintah-perintah CSS dapat dikelompokkan Pengelompokan selector Pengelompokan deklarasi Pengelompokan nilai
14
Pengelompokan Selector
h1,h2,h3 {font-family:arial;color:#123456}
15
Pengelompokan Deklarasi
H1 {font-weight:bold;font-size:14pt}
16
Pengelompokan Nilai Pengelompokan nilai : h1 {font:bold 12pt arial}
17
Pewarisan/Inheritance
Bila tidak didefinisikan, maka akan menggunakan style dari induknya <head> <style type=“text/css”> body {color:navy} h1 {color:lightyellow;font:bold 12pt arial} H2 {font:bold 12pt arial} b {text-decoration:underline} </style> </head>
18
Pewarisan/Inheritance
<body> <h1>Header tingkat 1 ini mendefinisikan warna teksnya green sehingga tidak mewarisi warna navy (body)</h1> <h2>Header tingkat 2 ini tidak mendefinisikan warna teks maka menggunakan definisi warna induknya (body)</h2> <b>Elemen bold ini juga tidak mendefinisikan warna teksnya sehingga nasibnya sama dengan h2, harus mewarisi warna teks induknya</b> </body>
20
Macam-macam Selector : Class
Selain elemen HTML, selector CSS dapat berupa Class. Dengan class, perintah CSS lebih fleksibel, dapat diterapkan untuk semua elemen HTML dan membuat beberapa format yang berbeda untuk suatu elemen. Deklarasi class diawali dengan tanda titik (‘.’). Pemakaian class menggunakan atribut ‘class’. Class dapat menggunakan elemen DIV dalam pemakaiannya.
21
Contoh penerapan Class
<style type=“text/css”> .mhs {color:blue;font-family:arial} p.berita{font-family:arial;font-style:italic} </style> ………. Pemakaian didalam elemen BODY : <div class=“mhs”>…</div> <p class=“mhs”>…</p> <td class=“mhs”>…</td> <p class=“berita”>…</p> <div class=“berita”>…</p> salah!! <h1 class=“berita”>…</p> salah!!
22
Macam-macam Selector : ID
Deklarasi ID menggunakan tanda ‘#’. Pemakaian ID CSS didalam elemen BODY menggunakan atribut ‘ID’. Selector jenis ini juga dapat menggunakan elemen DIV dalam pemakaiannya. Contoh :
23
Contoh penerapan ID <head> <style type=‘text/css’>
#mhs02{color:red} </style> </head> <body> <p id=‘mhs02’>Test</p> <div id=‘mhs02’>Test</id> </body>
24
Pseudo Class Untuk menentukan style yang digunakan jika elemen HTML dikenai mengalami kejadian tertentu, misalnya diklik mouse. Pseudo class anchor (a) : A:link A:visited A:hover A:active A:focus
25
Contoh Pseudo Class <head> <style=‘text/css’> a:link {text-decoration:none} a:hover {text-decoration:none;color:yellow} </style> </head> <body> <a href=‘dok.html’>Link 01</a> </body>
26
Properties CSS Properti CSS banyak sekali, dikelompokkan kedalam beberapa kategori : Font Color & Background Text List Box Model Visual Formatting Model (normal & float) User Interface & Downloadable Font Media Types Visual Effects Positioning Scheme
27
Properti CSS Kategori font : font-family font-size font-style
font-weight font-variant font : style variant weight size line-height family
28
Properti CSS Kategori color dan background : color background-color
background-image background-repeat background-attachment background-position background : color image repeat attachment position
29
Properti CSS Kategori text : text-indent text-align text-decoration
text-shadow text-transform letter-spacing word-spacing line-height white-space
30
Properti CSS Kategori list : list-style-type list-style-image
list-style-position list-style : style position image
31
Properti CSS Kategori box model : margin padding border width height
32
Properti CSS Kategori visual formatting model : display float clear
33
Properti CSS Kategori user interface dan downloadable font : cursor
color
34
Properti CSS Kategori media type : screen print
35
Properti CSS Kategori visual effect : overflow clip visibility
36
Properti CSS Kategori positioning scheme : position z-index
37
Ukuran Panjang Dalam CSS
em -> untuk ukuran pecahan decimal ex -> x-height, untuk menentukan ukuran yang sifatnya vertikal. px -> pixels, ukuran yang menyesuaikan pixel monitor.
38
Ukuran Besar dan Kecil dalam CSS
in ->inches = 2,54 cm cm ->centimeters mm ->millimeters pt ->point = 1/72 inch pc ->picas = 12 point
39
Ukuran yang berhubungan dengan Sudut
deg ->degrees (derajad) grad ->grads (gradien) rad ->radians
40
Ukuran yang berhubungan dengan Waktu
ms -> mili seconds s -> seconds
41
Ukuran yang berhubungan dengan Frekuensi
Hz -> Hertz kHz -> kilo Hertz
42
Ukuran Presentase a {font-size : 10pt} a {line-height : 110%}
bahwa line-height selector a besarnya 110% dari font size 10pt.
43
Penggunaan URL dalam CSS
{statement : url(" file di dalam web")} contoh : body { background-image:url( } penggunaan color : body {color :#800} body {color :#800000} body {color :rgb(255,0,0)} body {color :rgb(100%,0%,0%)}
Presentasi serupa
