Pertemuan 9 Cascading Style Sheet (css) APLIKASI BERBASIS WEB Pertemuan 9 Cascading Style Sheet (css) STTI I-Tech Susana Dwi Yulianti, SKom
PENGENALAN CSS CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen HTML Style sheet mendeskripsikan bagaimana tampilan document HTML di layar Styles biasanya disimpan dalam file eksternal css.
SYNTAX CSS h1 = Selector color:red = Declaration Aturan CSS memiliki dua bagian utama yaitu selector, dan satu atau lebih declaration. Contoh : h1 {color:red;font-size:12px;} atau p {color:red;text-align:center;} h1 = Selector color:red = Declaration font-size:12px = Declaration color = Property Red = Value font-size = Property 12px = Value
SYNTAX CSS Selector biasanya elemen HTML yang ingin diberi style. Setiap deklarasi terdiri dari properti (property) dan nilai (value). Properti ini merupakan style atribut yang ingin di ubah. Setiap properti memiliki nilai (value). CSS deklarasi selalu diakhiri dengan tanda titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal
Menambahkan komentar pada CSS Komentar digunakan untuk menjelaskan kode yang dibuat, dan dapat membantu ketika akan mengedit source code di kemudian hari. Komentar diabaikan oleh browser dan tidak akan ditampilkan. Sebuah komentar CSS diawali dengan "/*", dan diakhiri dengan "*/",
Menambahkan komentar pada CSS Contoh: /*Ini isi komentar*/ p { text-align:center; /*Ini komentar yang lain*/ color:black; font-family:arial; }
Id dan class Selectors CSS memungkinkan untuk menentukan penyeleksi sendiri yang disebut "id" dan "class". Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik. Id selector menggunakan atribut id elemen HTML, dan didefinisikan dengan "#".
Id dan class Selectors Contoh: <html> <head> <style type="text/css"> #teks1 { text-align:center; color:red; } </style> </head> <body> <p id="teks1">Teks dengan penggunaan Id</p> <p>Teks ini tidak dipengaruhi oleh style.</p> </body> </html>
Id dan class Selectors Class Selector digunakan untuk menentukan style untuk sekelompok elemen. Berbeda dengan selector id, Class Selector yang paling sering digunakan pada beberapa elemen. Class Selector menggunakan atribut class HTML, dan didefinisikan dengan " . "
Id dan class Selectors Contoh: <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>
Id dan class Selectors Anda juga dapat menentukan bahwa hanya HTML tertentu elemen harus dipengaruhi oleh kelas. <html> <head> <style type="text/css"> p.center {text-align:center;} </style> </head> <body> <h1 class="center">Text ini tidak berpengaruh dengan style</h1> <p class="center">Paragraph ini akan center-aligned.</p> </body> </html>
Class Pada CSS Class digunakan untuk membuat style-style yang berbeda untuk jenis tag yang sama (disebut private class) Class juga dapat digunakan untuk membuat style yang sama untuk semua jenis tag yang berbeda (disebut public class) Contoh penulisan private class : Penerapannya adalah dengan menggunakan atribut class, seperti berikut: H1.batman {color: red;} H1.biru {color: blue;} <H1 class="batman">Batman</H1> <H1 class="biru">Jogja</H1>
Class Pada CSS Contoh penulisan public class : Penerapannya adalah dengan menggunakan attribut class pada tag HTML yang menggunakan CSS tersebut, seperti berikut: .warnatengah { color: red: text-align: center; } <H1 class="warnatengah">Pemrograman</H1> <P class="warnatengah">Ternyata pemrograman asyik</P> <body class=”warnatengah”></body>
Penggunaan Selector bebas Dengan menggunakan selector bebas kita mempunyai kebebasan dalam menggunakan nama untuk selector tersebut. Contoh: <html> <head> <title> Selector </title> <style type="text/css"> gbawah{text-decoration: underline;} </style> </head> <body> <gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah> </body> </html>
Pemanggilan CSS Inline Style Sheet CSS didefinisikan langsung pada tag HTML yang bersangkutan penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain Contoh: <html> <body> <p style="color:blue;margin-left:20px">Ini adalah sebuah paragraph.</p> </body> </html>
Pemanggilan CSS Embedded Style Sheet CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> dimana tag tersebut didefinisikan diantara tag <head> dan tag </head> Contoh: <head> <title>Contoh Bentuk Embedded/title> <style> body {background:yellow; color:green; margin-left:0.5in} h1 {font-size:18pt; color:red} p {font-size:12pt; font-family:arial; text-indent:0.5in} </style> </head> <body> <h1>Welcome</h1> <p>hallo semua</p> </body>
Pemanggilan CSS Linked Style Sheet CSS dibuat pada berkas terpisah dari berkas HTML File CSS disimpan dengan ekstension .css Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> dan <href> yang dituliskan di antara tag <head> ... </head> Contoh penyisipan pada dokumen HTML : <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
Grouping Pada CSS Dalam pendefinisian selector terdapat suatu cara yang disebut grouping selector atau pengelompokan selector Manfaat dari penggunaan grouping selector ini adalah penggunaan selector dari tag HTML yang akan dikenai property yang sama cukup hanya dibuat sekali saja Penggunaan grouping ini cukup dengan memberikan tanda koma (,) antara selector Contoh : P,h1,body { Text-decoration:underline; }
Format text CSS
Contoh penggunaan css untuk format text <html> <head> <title>Format Text </title> <style ="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>Header 1,Di tengah</h1> <h2>Header 2 , Di kiri</h2> <h3>Header 3 ,Di kanan</h3> </body> </html>
Pengaturan Font
Contoh penggunaan css untuk pengaturan font <html> <head> <title>pengaturan font</title> <style ="text/css"> p.italic {font-size :200 % ; font-style: italic; } p.normal{ font-family : verdana ; font-style: normal; } p.oblique {font-style: oblique;} </style> </head> <body> <p class="italic">menggunakan style italic</p> <p class="normal">menggunakan style normal </p> <p class="oblique">menggunakan style oblieque</p> </body> </html>
Pengaturan Tabel <html> <head><title>pengaturan padding table</title> <style type="text/css"> td.kiri{ padding-top: 2cm;padding-right: 2cm; padding-bottom:2cm;padding-left: 2cm ;background-color : #f0f8ff; } </style> </head> <body> <table border="1"> <tr> <td class="kiri">padding dengan jarak 2cm dari kiri,atas,kanan,dan bawah</td> <td>tanpa jarak </td> </tr> </table> </body> </html>
Pengaturan Background Property Background CSS : Background Mengatur semua properti latar dalam satu deklarasi background-attachment Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman background-color Mengatur warna latar belakang suatu elemen background-image Mengatur gambar latar belakang untuk elemen background-position Mengatur posisi awal dari gambar latar belakang background-repeat Mengatur bagaimana gambar latar belakang akan diulangi
background <html> <head> <style type="text/css"> body{ background: #00ff00 url(image/smile.png) no-repeat fixed center;} </style> </head> <body> <p>Ini adalah Text</p> </body> </html>
background-color <html> <head> <style type="text/css"> Body{background-color:yellow;} H1{background-color:#00ff00;} P{background-color:rgb(255,0,255);} </style> </head> <body> <h1>Ini adalah heading 1</h1> <p>ini adalah paragraph.</p> </body> </html>
background-image <html> <head> <style type="text/css"> body {background-image:url(image/smile.png);} </style> </head> <body> <h1>Selamat belajar CSS</h1> </body> </html>
background-repeat <html> <head> <style type="text/css"> body {background-image:url(image/smile.png); background-repeat:repeat-y;} </style> </head> <body> <p>repeat-y background akan mengulang secara vertical.</p> </body> </html>
background-attachment <html> <head> <style type="text/css"> body { background-image:url(image/smile.png); background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body> <p> background-image akan fixed pada tempatnya.</p> </body> </html>
background-position <html> <head> <style type="text/css"> body { background-image:url(image/smile.png); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <p><b>Note:</b> Untuk bekerja pada Firefox dan Opera, properti background-attachment harus diset ke "fixed".</p> </body> </html>