CSS Cascading Style Sheet
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
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
Cascading Style Sheets perintah yang mampu berjalan diantara tag HTML keuntungan css : menghemat pekerjaan pengaturan web
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}
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>
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 }
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
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
Inline style sheet Inline style sheet (dalam elemen HTML) <p style=“color:green”> css sebagai inline style </p> TIDAKdideklarasikan di bagian HEAD
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>
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>
Pengelompokan/Grouping Untuk menghemat waktu dan mengurangi jumlah kode, perintah-perintah CSS dapat dikelompokkan Pengelompokan selector Pengelompokan deklarasi Pengelompokan nilai
Pengelompokan Selector h1,h2,h3 {font-family:arial;color:#123456}
Pengelompokan Deklarasi H1 {font-weight:bold;font-size:14pt}
Pengelompokan Nilai Pengelompokan nilai : h1 {font:bold 12pt arial}
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>
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>
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.
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!!
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 :
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>
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
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>
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
Properti CSS Kategori font : font-family font-size font-style font-weight font-variant font : style variant weight size line-height family
Properti CSS Kategori color dan background : color background-color background-image background-repeat background-attachment background-position background : color image repeat attachment position
Properti CSS Kategori text : text-indent text-align text-decoration text-shadow text-transform letter-spacing word-spacing line-height white-space
Properti CSS Kategori list : list-style-type list-style-image list-style-position list-style : style position image
Properti CSS Kategori box model : margin padding border width height
Properti CSS Kategori visual formatting model : display float clear
Properti CSS Kategori user interface dan downloadable font : cursor color
Properti CSS Kategori media type : screen print
Properti CSS Kategori visual effect : overflow clip visibility
Properti CSS Kategori positioning scheme : position z-index
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.
Ukuran Besar dan Kecil dalam CSS in ->inches = 2,54 cm cm ->centimeters mm ->millimeters pt ->point = 1/72 inch pc ->picas = 12 point
Ukuran yang berhubungan dengan Sudut deg ->degrees (derajad) grad ->grads (gradien) rad ->radians
Ukuran yang berhubungan dengan Waktu ms -> mili seconds s -> seconds
Ukuran yang berhubungan dengan Frekuensi Hz -> Hertz kHz -> kilo Hertz
Ukuran Presentase a {font-size : 10pt} a {line-height : 110%} bahwa line-height selector a besarnya 110% dari font size 10pt.
Penggunaan URL dalam CSS {statement : url("http://alamat file di dalam web")} contoh : body { background-image:url(http://www.yahoo.com/image/logo.jpg) } penggunaan color : body {color :#800} body {color :#800000} body {color :rgb(255,0,0)} body {color :rgb(100%,0%,0%)}