1 / 30

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

cutter
Download Presentation

Pertemuan 9 Cascading Style Sheet ( css )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. APLIKASI BERBASIS WEB Pertemuan 9Cascading Style Sheet (css) STTI I-Tech Susana DwiYulianti, SKom

  2. PENGENALAN CSS • CSS singkatan dari Cascading Style Sheets • Styles mendefinisikan bagaimana menampilkan elemen HTML • Style sheet mendeskripsikanbagaimanatampilan document HTML dilayar • Styles biasanya disimpan dalam file eksternal css.

  3. SYNTAX CSS • 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

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

  5. 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 "*/",

  6. Menambahkan komentar pada CSS • Contoh: /*Ini isi komentar*/ p { text-align:center; /*Ini komentar yang lain*/ color:black; font-family:arial; }

  7. 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 "#".

  8. 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>

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

  10. 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>

  11. 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>

  12. Class Pada CSS • Class digunakanuntukmembuat style-style yang berbedauntukjenis tag yang sama (disebut private class) • Class jugadapatdigunakanuntukmembuat style yang samauntuksemuajenis tag yang berbeda (disebut public class) • Contohpenulisan private class : • Penerapannyaadalahdenganmenggunakanatribut class, sepertiberikut: H1.batman {color: red;} H1.biru {color: blue;} <H1 class="batman">Batman</H1> <H1 class="biru">Jogja</H1>

  13. Class Pada CSS • Contohpenulisan public class : • Penerapannyaadalahdenganmenggunakanattributclass pada tag HTML yang menggunakanCSS tersebut, sepertiberikut: .warnatengah { color: red: text-align: center; } <H1 class="warnatengah">Pemrograman</H1> <P class="warnatengah">Ternyatapemrogramanasyik</P> <body class=”warnatengah”></body>

  14. 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>

  15. Pemanggilan CSS • Inline Style Sheet • CSS didefinisikanlangsungpada tag HTML yang bersangkutan • penulisannyacukupdenganmenambahkanatributstyle="..."dalam tag HTML tersebut • Style hanyaakanberlakupada tag yang bersangkutan, dantidakakanmempengaruhi tag HTML yang lain • Contoh: <html> <body> <p style="color:blue;margin-left:20px">Ini adalah sebuah paragraph.</p> </body> </html>

  16. Pemanggilan CSS • Embedded Style Sheet • CSS didefinisikanterlebihdahuludalam tag <style> ... </style>dimana tag tersebutdidefinisikandiantara tag <head>dan tag </head> • Contoh: <head> <title>ContohBentuk 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>

  17. Pemanggilan CSS • Linked Style Sheet • CSS dibuatpadaberkasterpisahdariberkas HTML • File CSS disimpandenganekstension.css • Padaberkas HTML yang akanmenggunakanberkas CSS, harusdibuat tag <link>dan<href> yang dituliskandiantara tag <head> ... </head> • Contohpenyisipanpadadokumen HTML : <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

  18. Grouping Pada CSS • Dalampendefinisian selector terdapatsuatucara yang disebut grouping selector ataupengelompokan selector • Manfaatdaripenggunaan grouping selector iniadalahpenggunaan selector dari tag HTML yang akandikenai property yang samacukuphanyadibuatsekalisaja • Penggunaan grouping inicukupdenganmemberikantandakoma (,) antara selector • Contoh : P,h1,body { Text-decoration:underline; }

  19. Format text CSS

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

  21. Pengaturan Font

  22. 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>

  23. 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>

  24. Pengaturan Background • Property Background CSS :

  25. background <html> <head> <style type="text/css"> body{ background: #00ff00 url(image/smile.png) no-repeat fixed center;} </style> </head> <body> <p>Iniadalah Text</p> <p>Iniadalah Text</p> <p>Iniadalah Text</p> <p>Iniadalah Text</p> <p>Iniadalah Text</p> </body> </html>

  26. 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>

  27. 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>

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

  29. 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 padatempatnya.</p> <p> background-image akan fixed padatempatnya.</p> <p> background-image akan fixed padatempatnya.</p> <p> background-image akan fixed padatempatnya.</p> <p> background-image akan fixed padatempatnya.</p> <p> background-image akan fixed padatempatnya.</p> <p> background-image akan fixed padatempatnya.</p> </body> </html>

  30. 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> Untukbekerjapada Firefox dan Opera, properti background-attachment harusdisetke "fixed".</p> </body> </html>

More Related