Modul Design & Pemrograman Web CSS NEXT
CSS (Cascading Style Sheet) Konsep: Pewarisan (inheritance) Selektor-Kontekstual (Contextual Selector) Kelas (classes) BACK NEXT
CSS (Cascading Style Sheet) Ketentuan Mendasar Penulisan script CSS terletak diantara tag <HEAD>…</HEAD> Perintah CSS terdiri dari dua elemen dasar, yaitu: selector dan declaration. <HTML> <HEAD> <TITLE>…..</TITLE> <STYLE TYPE=text/css> selector { declaration } </STYLE> </HEAD> <BODY> …….. </BODY> </HTML> BACK NEXT
CSS (Cascading Style Sheet) Tag Komentar <html> <head> <title>……</title> <style type=text/css> …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ </style> </head> <body> ………………… </body> </html> BACK NEXT
CSS Pewarisan (inheritance) Text <html> <head> <title>CSS_01</title> <style type=text/css> b { color:lime } </style> </head> <body> Universitas Narotama Surabaya <br> <b>Fakultas Ilmu Komputer</b> </body> </html> BACK NEXT Catatan: Untuk declaration color dapat juga menggunakan kode heksa
CSS Selektor-Kontekstual (Contextual Selector) <html> <head> <title>CSS_01</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT Catatan: selector ini kesemuanya untuk bold+italic text
CSS (Cascading Style Sheet) Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector) !!! Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector) <html> <head> <title>CSS Inheritance</title> <style type=text/css> b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> <html> <head> <title>Selektor-Kontekstual</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html BACK NEXT
CSS (Cascading Style Sheet) Aturan CSS berdasarkan case to case <html> <head> <title>CSS_01</title> </head> <body> Universitas Narotama Surabaya <br> <b style=color:lime> Fakultas Ilmu Komputer </b> </body> </html> TIDAK EFEKTIF BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_02</title> <style type=text/css> i { color:#ff3333 } </style> </head> <body> Universitas Narotama Surabaya <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_03</title> <style type=text/css> u { color:#3333CC } </style> </head> <body> Universitas Narotama Surabaya <br> <u>Fakultas Ilmu Komputer</u> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_04</title> <style type=text/css> h3 { color:#009900 } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_05</title> <style type=text/css> h2 { color:#009900 } h3 { color:#FF3333 } </style> </head> <body> <h2>Sistem Informasi</h2> <br> <h3>Sistem Komputer</h3> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) text-decoration: underline (tampil garis dibawah text) overline (tampil garis diatas text) line-trough (tampil garis melalui text) none (non-efek) Text <html> <head> <title>CSS_07</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_08</title> <style type=text/css> b,i { color:blue; text-decoration:underline; font-family:Tahoma; font-size: 28px; } </style> </head> <body> <b>Universitas Narotama Surabaya</b> <br> <i>Fakultas Ilmu Komputer</i> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (2) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (3) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_09</title> <style type=text/css> i { color:blue; text-decoration:underline; font-family:Tahoma; font-size:14px; font-weight:bold; } </style> </head> <body> <i>Universitas Narotama Surabaya</i> </body> </html> font-weight: normal bold NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_10</title> <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-style:italic; } </style> </head> <body> <p>Universitas Narotama Surabaya</p> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_11</title> <style type=text/css> p { color:blue; font-family:Tahoma; font-size:14px; font-weight:bold; font-variant:small-caps; } </style> </head> <body> <p>Universitas Narotama Surabaya</p> </body> </html> font-variant: small-caps (mengganti semua kar.lower-case dengan kar.upper-case) none (tanpa efek) BACK NEXT Catatan: font-variant tidak berlaku pada browser Netscape
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_12</title> <style type=text/css> p { color:blue; font-family:Tahoma; text-transform:lowercase; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA SURABAYA</p> </body> </html> text-transform: capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil) BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_13</title> <style type=text/css> p { color:blue; font-family:Tahoma; letter-spacing:10px; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA</p> </body> </html> letter-spacing = mengendalikan jumlah spasi antar karakter BACK NEXT
CSS (Cascading Style Sheet) Text <html> <head> <title>CSS_14</title> <style type=text/css> p { color:blue; font-family:Tahoma; text-indent:30px; } </style> </head> <body> <p>UNIVERSITAS NAROTAMA</p> </body> </html> text-indent = membuat indent untuk awal paragraf BACK NEXT
CSS (Cascading Style Sheet) Body <html> <head> <title>CSS_15</title> <style type=text/css> body { background-color:blue; } </style> </head> <body> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Body <html> <head> <title>CSS_16</title> <style type=text/css> body { background-image: url(bg.jpg); } </style> </head> <body> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Catatan: Nilai list-style-type: disc -> efek lingkaran circle -> efek persegi empat square -> efek lingkaran yang transparan decimal -> 1,2,3,…dst lower-roman -> i,ii,iii,…dst upper-roman -> I,II,III,…dst lower-alpha -> a,b,c,…dst upper-alpha -> A,B,C,…dst None -> Tanpa Efek BACK NEXT
CSS (Cascading Style Sheet) Bullet & Numbering <html> <head> <title>CSS_17</title> <style type=text/css> li { list-style-type:square; font-weight:bold; } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> <ol> <li>Sistem Informasi</li> <li>Sistem Komputer</li> </ol> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Soal (4) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (5) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (6) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW
CSS (Cascading Style Sheet) Link Link Properties: A:link A:hover A:active NEXT
CSS (Cascading Style Sheet) Link Definisi style link: A:link -> memberikan efek pada saat normal (unlink) A:hover -> memberikan efek pada saat mouse pointer diatas object A:active -> memberikan efek setelah event click BACK NEXT
CSS (Cascading Style Sheet) Link <html> <head> <title>CSS_18</title> <style type=text/css> a { color: #000000; /* kode warna hitam */ text-decoration: none; } a:hover { color : #FF9900; /* kode warna orange */ text-decoration : underline; } </style> </head> <body> <a href=#>Link 1</a> <br><br> <a href=#>Link 2</a> </body> </html> BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Link <html> <head> <title>CSS_19</title> <style type=text/css> a { color: #000000; } /* kode warna hitam */ a:hover { color : #FF9900; } /* kode warna orange */ a:active { color: #006699; } /* kode warna biru */ </style> </head> <body> <a href=#>Link 1</a><br><br> <a href=#>Link 2</a> </body> </html> BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (7) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (8) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Kursor Link BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (9) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Form <html> <head> <title>Form_01</title> <style type=text/css> input { background:yellow; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> Catatan: untuk selector input berlaku pada, <input type=radio>, <input type=checkbox>, <input type=submit> & <inputy type=button> BACK NEXT
CSS (Cascading Style Sheet) Form <html> <head> <title>Form_02</title> <style type=text/css> input { background:yellow; border: 1px solid red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Form <html> <head> <title>Form_03</title> <style type=text/css> input { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br> <input name=nim type=text size=20><br> Nama Lengkap<br> <input name=nama type=text size=40> </form> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Form <html> <head> <title>Form_04</title> <style type=text/css> select { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <form> Program Studi:<br> <select name=prodi> <option value=SK>Sistem Komputer</option> <option value=SI>Sistem Informasi</option> </select> </form> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Form <html> <head> <title>Form_05</title> <style type=text/css> textarea { background:yellow; border: 1px solid red; color: blue; } </style> </head> <body> <form> Alamat:<br> <textarea name=alamat cols=30 rows=5></textarea> </form> </body> </html> BACK NEXT
CSS (Cascading Style Sheet) Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: END PREVIEW
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_20</title> <style type=text/css> table { border: 1px solid black; } </style> </head> <body> <table> <tr> <td>NIM</td><td>NAMA</td> </tr> <td>04102001</td><td>Lukmanul Khakim</td> <td>04102002</td><td>Indra Cahyo</td> </table> </body></html> BACK NEXT Catatan: Untuk declaration solid dapat juga menggunakan kode heksa
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_21</title> <style type=text/css> table { background-color: cyan; border: 1px solid orange; } </style> </head> <body> <table> <tr> <td>NIM</td><td>NAMA</td> </tr> <td>04102001</td><td>Lukmanul Khakim</td> <td>04102002</td><td>Indra Cahyo</td> </table> </body></html> BACK NEXT
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_22</title> <style type=text/css> tr {background-color: blue; color:white; text-align:center;} </style> </head> <body> <table> <tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <td>04102001</td><td>Lukmanul Khakim</td> </table></body></html> BACK NEXT Catatan: deklarasi border tidak berlaku pada selector <TR>
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_23</title> <style type=text/css> td {background-color: blue; color:white; padding-left: 15px; </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_24</title> <style type=text/css> td {background-color: blue; color:white; padding-top: 10px;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_25</title> <style type=text/css> td {background-color: blue; color:white; padding-bottom: 10px;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT Catatan: deklarasi padding tidak berlaku pada selector <TR>
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_26</title> <style type=text/css> td {background-color: blue; color:white; border-bottom: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_27</title> <style type=text/css> td {background-color: blue; color:white; border-top: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_28</title> <style type=text/css> td {background-color: blue; color:white; border-right: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT
CSS (Cascading Style Sheet) Table <html> <head> <title>CSS_29</title> <style type=text/css> td {background-color: blue; color:white; border-left: 1px solid red;} </style> </head> <body> <table><tr> <td width=100>NIM</td><td width=200>NAMA</td> </tr> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr></table> </body></html> BACK NEXT
CSS (Cascading Style Sheet) Soal (10) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (11) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (12) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (13) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Soal (14) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Classes Penulisan <style type=text/css> .variable { … deklarasi … } </style> BACK NEXT Catatan: bagian deklarasi harus diawali dengan tanda . (titik)
CSS (Cascading Style Sheet) Classes Text <html> <head> <title>Kelas_01</title> <style type=text/css> .text { font-family:tahoma; font-size: 16px; color: #006699; font-weight: bold; } </style> </head> <body> <a class=text>Universitas Narotama Surabaya</a> </body> </html> BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Classes Link <html> <head> <title>Kelas (LINK)</title> <style type=text/css> .link { font-family:tahoma; color:#0000FF; text-decoration:underline;} .link:hover,.link:active { font-family:tahoma; color:#FF9900;text-decoration:underline; } </style> </head> <body> <a href=# class=link>Link 1</a><br><br> <a href=# class=link>Link 2</a> </body> </html> BACK NEXT PREVIEW
CSS (Cascading Style Sheet) Classes Form <html> <head> <title>Kelas_Form</title> <style type=text/css> .inputbox1 { background:silver; border: 1px dotted red;color: blue;} .inputbox2 { background:silver; border: 1px solid blue;color: red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form> <br> NIM: <br> <input type=text name=nim size=20 class=inputbox1><br> Nama: <br> <input type=text name=nama size=40 class=inputbox2> </form> </body></html> BACK NEXT PREVIEW
Finish Terserah Anda… Sekian Materi Design & Pemrograman Web. Untuk Pengembangan Selanjutnya, Terserah Anda… END