Cascading Style Sheet (CSS) Minggu - 3 Cascading Style Sheet (CSS) Oleh : Cindy Taurusta, S.ST., M.T.
CSS (Cascading Style Sheet) Manfaat: Memperindah Tampilan Halaman Website Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam mendesain tampilan website.
CSS (Cascading Style Sheet) Konsep: Pewarisan (Inheritance) Selektor-Kontekstual (Contextual Selector) Kelas (classes)
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>
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>
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> 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> 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> <title>Selektor-Kontekstual</title> b,i { color:blue; } </head> <b>Universitas Narotama Surabaya</b> <i>Fakultas Ilmu Komputer</i> <head> <style type=text/css> text-decoration:underline; </style> <body> <br> </body> </html
TIDAK EFEKTIF 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> TIDAK EFEKTIF Fakultas Ilmu Komputer </b> </body> </html>
<style type=text/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>
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>
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>
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>
(Cascading Style Sheet) CSS (Cascading Style Sheet) Text text-decoration: - underline (tampil garis dibawah text) - overline (tampil garis diatas text) - line-trough (tampil garis melalui text) - none (non-efek) <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>
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>
CSS (Cascading Style Sheet) • Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) • Soal (3) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) • Soal (2) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
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; font-weight: - normal - bold } </style> </head> <body> <i>Universitas Narotama Surabaya</i> </body> </html>
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>
(Cascading Style Sheet) CSS (Cascading Style Sheet) Text font-variant: small-caps (mengganti semua kar.lower-case dengan kar.upper-case) none (tanpa efek) <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> Catatan: font-variant tidak berlaku pada browser Netscape
(Cascading Style Sheet) CSS (Cascading Style Sheet) Text text-transform: capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil) <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>
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
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
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
CSS (Cascading Style Sheet) Body <html> <head> <title>CSS_15</title> <style type=text/css> body { background-color:blue; } </style> </head> <body> </body> </html>
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>
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
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>
CSS (Cascading Style Sheet) • Soal (4) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) • Soal (5) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) • Soal (6) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) Link Link Properties: A:hover A:link • • A:active
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 objek A:active -> memberikan efek setelah event click
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>
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>
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>
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> Jenis border : dotted, dashed, solid, double, groove, ridge, inset dan outset
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>
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>
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>
CSS (Cascading Style Sheet) • Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) • Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
</body></html> 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> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr> <tr> <td>04102002</td><td>Indra Cahyo</td> </tr> </table> </body></html> Catatan: Untuk declaration solid dapat juga menggunakan kode heksa
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> Catatan: deklarasi border tidak berlaku pada selector <TR>
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> <tr> <td>04102001</td><td>Lukmanul Khakim</td> </tr> <tr> <td>04102002</td><td>Indra Cahyo</td> </tr> </table> </body></html>
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> 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> 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> 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>
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>
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>
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>
CSS (Cascading Style Sheet) Soal (07) • Soal (07) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) Soal (08) • Soal (08) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) Soal (09) • Soal (09) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) Soal (10) • Soal (10) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
CSS (Cascading Style Sheet) Soal (11) • Soal (11) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
Tugas : Kerjakan seluruh latihan dalam slide ini.. Tulis dikertas