Cascading Style Sheet

Transkripsi

1 Cascading Style Sheet

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

3 Konsep: Pewarisan (inheritance) Selektor-Kontekstual (Contextual Selector) Kelas (classes)

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

5 Tag Komentar <title> </title> aturan-aturan css disini /* masukkan komentar Anda dalam blok ini */ </body> </html>

6 CSS Pewarisan (inheritance) Text <title>css_01</title> b { color:lime} Universitas Narotama Surabaya <br> <b>fakultas Ilmu Komputer</b> </body> </html> Catatan: Untuk declaration color dapat juga menggunakan kode heksa

7 CSS Selektor-Kontekstual (Contextual Selector) Text <title>css_01</title> b,i { color:blue; text-decoration:underline; } <b>universitas Narotama Surabaya</b> <br> <i>fakultas Ilmu Komputer</i> </body> </html> Catatan: selector ini kesemuanya untuk bold+italic text

8 Perbedaan CSS pewarisan (inheritance) dengan CSS Selektor-Kontekstual (Contextual Selector)!!! Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector) <title>css Inheritance</title> b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline } <b>universitas Narotama Surabaya</b> <br> <i>fakultas Ilmu Komputer</i> </body> </html> <title>selektor-kontekstual</title> b,i { color:blue; text-decoration:underline; } <b>universitas Narotama Surabaya</b> <br> <i>fakultas Ilmu Komputer</i> </body> </html

9 Aturan CSS berdasarkan case to case <title>css_01</title> Universitas Narotama Surabaya <br> <b style=color:lime> Fakultas Ilmu Komputer </b> </body> </html> TIDAK EFEKTIF

10 Text <title>css_02</title> i { color:#ff3333 } Universitas Narotama Surabaya <br> <i>fakultas Ilmu Komputer</i> </body> </html>

11 Text <title>css_03</title> u { color:#3333cc } Universitas Narotama Surabaya <br> <u>fakultas Ilmu Komputer</u> </body> </html>

12 Text <title>css_04</title> h3 { color:# } <h3>fakultas Ilmu Komputer</h3> </body> </html>

13 Text <title>css_05</title> h2 { color:# } h3 { color:#ff3333 } <h2>sistem Informasi</h2> <br> <h3>sistem Komputer</h3> </body> </html>

14 Text <title>css_07</title> b,i { color:blue; text-decoration:underline; font-family:tahoma; } <b>universitas Narotama Surabaya</b> <br> <i>fakultas Ilmu Komputer</i> </body> </html> text-decoration: - underline (tampil garis dibawah text) - overline (tampil garis diatas text) - line-trough (tampil garis melalui text) - none (non-efek)

15 Text <title>css_08</title> b,i { color:blue; text-decoration:underline; font-family:tahoma; font-size: 28px; } <b>universitas Narotama Surabaya</b> <br> <i>fakultas Ilmu Komputer</i> </body> </html>

16 Soal (1) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: PREVIEW

18 Soal (3) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: PREVIEW END

19 Text <title>css_09</title> i { color:blue; text-decoration:underline; font-family:tahoma; font-size:14px; font-weight:bold; } <i>universitas Narotama Surabaya</i> </body> </html> font-weight: -normal -bold

20 Text <title>css_10</title> p { color:blue; font-family:tahoma; font-size:14px; font-weight:bold; font-style:italic; } <p>universitas Narotama Surabaya</p> </body> </html>

21 Text <title>css_11</title> p { color:blue; font-family:tahoma; font-size:14px; font-weight:bold; font-variant:small-caps; } <p>universitas Narotama Surabaya</p> </body> </html> font-variant: small-caps(mengganti semua kar.lower-case dengan kar.upper-case) none(tanpa efek) Catatan: font-variant tidak berlaku pada browser Netscape

22 Text <title>css_12</title> p { color:blue; font-family:tahoma; text-transform:lowercase; } <p>universitas NAROTAMA SURABAYA</p> </body> </html> text-transform: capitalize(kar.pertama huruf besar) uppercase(semua kar. huruf besar) lowercase(semua kar. Huruf kecil)

23 Text <title>css_13</title> p { color:blue; font-family:tahoma; letter-spacing:10px; } <p>universitas NAROTAMA</p> </body> </html> letter-spacing = mengendalikan jumlah spasi antar karakter

24 Text <title>css_14</title> p { color:blue; font-family:tahoma; text-indent:30px; } <p>universitas NAROTAMA</p> </body> </html> text-indent = membuat indent untuk awal paragraf

25 Body <title>css_15</title> body { background-color:blue; } </body> </html>

26 Body <title>css_16</title> body { background-image: url(bg.jpg); } </body> </html>

27 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

28 Bullet & Numbering <title>css_17</title> li { list-style-type:square; font-weight:bold; } <h3>fakultas Ilmu Komputer</h3> <ol> <li>sistem Informasi</li> <li>sistem Komputer</li> </ol> </body> </html>

31 Soal (6) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: PREVIEW END

32 Link Link Properties: A:link A:hover A:active

33 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

34 Link <title>css_18</title> a{ color: #000000; /* kode warna hitam */ text-decoration: none; } a:hover{ color :#FF9900; /* kode warna orange */ text-decoration : underline; } <a href=#>link 1</a> <br><br> <a href=#>link 2</a> </body> </html> PREVIEW

35 Link <title>css_19</title> a{ color: #000000; } /* kode warna hitam */ a:hover{ color : #FF9900; } /* kode warna orange */ a:active{ color: #006699; } /* kode warna biru */ <a href=#>link 1</a><br><br> <a href=#>link 2</a> </body> </html> PREVIEW

36 Form <title>form_01</title> input { background:yellow;} <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>

37 Form <title>form_02</title> input { background:yellow; border: 1px solid red;} <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> Jenisborder : dotted, dashed, solid, double, groove, ridge, inset dan outset

38 Form <title>form_03</title> input { background:yellow; border: 1px solid red; color: blue;} <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>

39 Form <title>form_04</title> select { background:yellow; border: 1px solid red; color: blue; } <form> Program Studi:<br> <select name=prodi> <option value=sk>sistem Komputer</option> <option value=si>sistem Informasi</option> </select> </form> </body> </html>

40 Form <title>form_05</title> textarea { background:yellow; border: 1px solid red; color: blue; } <form> Alamat:<br> <textarea name=alamat cols=30 rows=5></textarea> </form> </body> </html>

41 Soal (FORM_01) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: PREVIEW

42 Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: PREVIEW END

43 Table <title>css_20</title> table{ border: 1px solid black;} <table> <tr> <td>nim</td><td>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr> <tr> <td> </td><td>indra Cahyo</td> </tr> </table> </body></html> Catatan: Untuk declaration solid dapat juga menggunakan kode heksa

44 Table <title>css_21</title> table{ background-color: cyan; border: 1px solid orange; } <table> <tr> <td>nim</td><td>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr> <tr> <td> </td><td>indra Cahyo</td> </tr> </table> </body></html>

45 Table <title>css_22</title> tr {background-color: blue; color:white; text-align:center;} <table> <tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr> </table></body></html> Catatan: deklarasi border tidak berlaku pada selector <TR>

46 Table <title>css_23</title> td {background-color: blue; color:white; padding-left: 15px; <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html> Catatan: deklarasi padding tidak berlaku pada selector <TR>

47 Table <title>css_24</title> td {background-color: blue; color:white; padding-top: 10px;} <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html> Catatan: deklarasi padding tidak berlaku pada selector <TR>

48 Table <title>css_25</title> td {background-color: blue; color:white; padding-bottom: 10px;} <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html> Catatan: deklarasi padding tidak berlaku pada selector <TR>

49 Table <title>css_26</title> td {background-color: blue; color:white; border-bottom: 1px solid red;} <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html>

50 Table <title>css_27</title> td {background-color: blue; color:white; border-top: 1px solid red;} <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html>

51 Table <title>css_28</title> td {background-color: blue; color:white; border-right: 1px solid red;} <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html>

52 Table <title>css_29</title> td {background-color: blue; color:white; border-left: 1px solid red;} <table><tr> <td width=100>nim</td><td width=200>nama</td> </tr> <tr> <td> </td><td>lukmanul Khakim</td> </tr></table> </body></html>

53 Soal(07) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS: PREVIEW

58 Classes Penulisan.variable { deklarasi } Catatan: bagian deklarasi harus diawali dengan tanda. (titik)

59 Classes Text <title>kelas_01</title>.text{ font-family:tahoma; font-size: 16px; color: #006699; font-weight: bold; } <a class=text>universitas Narotama Surabaya</a> </body> </html> PREVIEW

60 Classes Link </body> </html> <title>kelas (LINK)</title>.link{ font-family:tahoma; color:#0000ff; text-decoration:underline;}.link:hover,.link:active{ font-family:tahoma; color:#ff9900;text-decoration:underline; } <a href=# class=link>link 1</a><br><br> <a href=# class=link>link 2</a> PREVIEW