Cascading Style Sheet (CSS)

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)

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>

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

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>

<title>CSS_04</title> <style type=text/css> h3 { color:# } </style> </head> <body> <h3>Fakultas Ilmu Komputer</h3> </body> </html>

<title>CSS_05</title> <style type=text/css> h2 { color:# } 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>

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

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

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

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

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

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>

<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

<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) Link Link Properties: A:hover A:link • •
A:active

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

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

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

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

• Soal (FORM_02) Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

• 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> </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

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> </td><td>Lukmanul Khakim</td> </table></body></html> Catatan: deklarasi border tidak berlaku pada selector <TR>

<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> </td><td>Lukmanul Khakim</td> </tr> <tr> <td> </td><td>Indra Cahyo</td> </tr> </table> </body></html>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> Catatan: deklarasi padding tidak berlaku pada selector <TR>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> Catatan: deklarasi padding tidak berlaku pada selector <TR>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html> Catatan: deklarasi padding tidak berlaku pada selector <TR>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html>

<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> </td><td>Lukmanul Khakim</td> </tr></table> </body></html>

CSS (Cascading Style Sheet) Soal (07)

Tugas : Kerjakan seluruh latihan dalam slide ini.. Tulis dikertas

Cascading Style Sheet (CSS)

Presentasi serupa

Presentasi berjudul: "Cascading Style Sheet (CSS)"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Cascading Style Sheet (CSS)

Presentasi serupa

Presentasi berjudul: "Cascading Style Sheet (CSS)"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan