Cascading Style Sheet

(1)

(2)

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.

(3)

CSS (Cascading Style Sheet)

Konsep:

• Pewarisan (inheritance)

• Selektor-Kontekstual (Contextual Selector)

• Kelas (classes)

NEXT BACK

(4)

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>

NEXT BACK

(5)

CSS (Cascading Style Sheet)

Tag Komentar

…aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ …aturan-aturan css disini… /* masukkan komentar Anda dalam blok ini */ </style> </head> <body> ……… </body> </html> NEXT BACK

(6)

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>

(7)

CSS Selektor-Kontekstual (Contextual Selector)

Text

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

(8)

CSS (Cascading Style Sheet)

Perbedaan CSS pewarisan (inheritance) dengan

CSS Selektor-Kontekstual (Contextual Selector) !!!

<html> <head> <title>CSS Inheritance</title> <html> <head> <title>Selektor-Kontekstual</title>

Pewarisan (inheritance)

Selektor Kontekstual (Contextual Selector)

<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> <title>Selektor-Kontekstual</title> <style type=text/css> b,i { color:blue; text-decoration:underline; } </style> </head> <body>

<i>Fakultas Ilmu Komputer</i> </body>

</html

NEXT BACK

(9)

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

NEXT BACK

(10)

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>

NEXT BACK

(11)

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>

NEXT BACK

(12)

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>

NEXT BACK

(13)

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>

NEXT BACK

(14)

CSS (Cascading Style Sheet)

Text

<html>

<head>

<title>CSS_07</title>

<style type=text/css>

b,i { color:blue;

text-decoration:

- underline (tampil garis dibawah text) - overline (tampil garis diatas text) - line-trough (tampil garis melalui text)

- none (non-efek)

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>

NEXT BACK

(15)

CSS (Cascading Style Sheet)

Text

<html> <head> <title>CSS_08</title> <style type=text/css> b,i { color:blue; text-decoration:underline; text-decoration:underline; font-family:Tahoma; font-size: 28px; } </style> </head> <body>

<i>Fakultas Ilmu Komputer</i> </body>

</html>

NEXT BACK

(16)

CSS (Cascading Style Sheet)

• Soal (1)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

NEXT BACK

(17)

CSS (Cascading Style Sheet)

• Soal (2)

NEXT BACK

(18)

CSS (Cascading Style Sheet)

• Soal (3)

END PREVIEW

(19)

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>

NEXT font-weight: - normal - bold

(20)

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>

NEXT BACK

(21)

CSS (Cascading Style Sheet)

Text

<html>

<head>

<title>CSS_11</title>

<style type=text/css>

p { color:blue;

font-family:Tahoma;

font-variant:

small-caps (mengganti semua kar.lower-case

dengan kar.upper-case)

none (tanpa efek)

font-family:Tahoma;

font-size:14px;

font-weight:bold;

font-variant:small-caps;

}

</style>

</head>

<body>

<p>Universitas Narotama Surabaya</p>

</body>

</html>

NEXT BACK

(22)

CSS (Cascading Style Sheet)

Text

<html>

<head>

<title>CSS_12</title>

<style type=text/css>

p { color:blue;

text-transform:

capitalize (Kar.pertama huruf besar) uppercase (Semua kar. huruf besar) lowercase (Semua kar. Huruf kecil)

p { color:blue;

font-family:Tahoma;

text-transform:lowercase;

}

</style>

</head>

<body>

<p>UNIVERSITAS NAROTAMA SURABAYA</p>

</body>

</html>

NEXT BACK

(23)

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>

NEXT BACK

(24)

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>

NEXT BACK

(25)

CSS (Cascading Style Sheet)

Body

<html>

<head>

<title>CSS_15</title>

<style type=text/css>

body

{

background-color:blue;

}

</style>

</head>

<body>

</body>

</html>

NEXT BACK

(26)

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>

NEXT BACK

(27)

CSS (Cascading Style Sheet)

Catatan:

Nilai list-style-type:

disc -> efek lingkaran

circle -> efek persegi empat

NEXT BACK

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)

CSS (Cascading Style Sheet)

Bullet & Numbering

<html> <head> <title>CSS_17</title> <style type=text/css> li { list-style-type:square; font-weight:bold; font-weight:bold; } </style> </head> <body>

<h3>Fakultas Ilmu Komputer</h3> <ol> <li>Sistem Informasi</li> <li>Sistem Komputer</li> </ol> </body> </html> NEXT BACK

(29)

CSS (Cascading Style Sheet)

• Soal (4)

NEXT BACK

(30)

CSS (Cascading Style Sheet)

• Soal (5)

NEXT BACK

(31)

CSS (Cascading Style Sheet)

• Soal (6)

END PREVIEW

(32)

CSS (Cascading Style Sheet)

Link

Link Properties:

• A:link

• A:hover

• A:active

NEXT

(33)

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

NEXT BACK

(34)

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>

NEXT BACK

(35)

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>

NEXT BACK

(36)

CSS (Cascading Style Sheet)

Form

<html> <head> <title>Form_01</title> <style type=text/css> input { background:yellow; } </style> </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br>

<input name=nim type=text size=20><br> Nama Lengkap<br>

</body> </html>

NEXT BACK

Catatan: untuk selector input berlaku pada,

<input type=radio>, <input type=checkbox>, <input type=submit> & <inputy type=button>

(37)

CSS (Cascading Style Sheet)

Form

<html> <head> <title>Form_02</title> <style type=text/css> input { background:yellow; border: 1px solid red;} border: 1px solid red;} </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br>

</body> </html>

NEXT BACK

Jenis border : dotted, dashed, solid, double, groove,

ridge, inset dan outset

(38)

CSS (Cascading Style Sheet)

Form

<html> <head> <title>Form_03</title> <style type=text/css> input { background:yellow; border: 1px solid red; color: blue; } color: blue; } </style> </head> <body> <h2>Form Mahasiswa</h2> <form name=form_mahasiswa> NIM<br>

</body> </html>

NEXT BACK

(39)

CSS (Cascading Style Sheet)

Form <html> <head> <title>Form_04</title> <style type=text/css> select { background:yellow;

border: 1px solid red; color: blue; } 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> NEXT BACK

(40)

CSS (Cascading Style Sheet)

Form

<html> <head> <title>Form_05</title> <style type=text/css> textarea { background:yellow;

border: 1px solid red; border: 1px solid red; color: blue; } </style> </head> <body> <form> Alamat:<br>

</body> </html>

NEXT BACK

(41)

CSS (Cascading Style Sheet)

• Soal (FORM_01)

NEXT BACK

(42)

CSS (Cascading Style Sheet)

• Soal (FORM_02)

END PREVIEW

(43)

CSS (Cascading Style Sheet)

Table <html> <head> <title>CSS_20</title> <style type=text/css>

table { border: 1px solid black; }

</style> </head> <body> <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> NEXT BACK

(44)

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

(45)

CSS (Cascading Style Sheet)

Table

<html> <head> <title>CSS_22</title> <style type=text/css> tr {background-color: blue; color:white; color:white; text-align:center;} </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> NEXT BACK

(46)

CSS (Cascading Style Sheet)

Table

<html> <head> <title>CSS_23</title> <style type=text/css> td {background-color: blue; color:white; 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> NEXT BACK

(47)

CSS (Cascading Style Sheet)

Table

<html> <head> <title>CSS_24</title> <style type=text/css> td {background-color: blue; color:white; 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> NEXT BACK

(48)

CSS (Cascading Style Sheet)

Table

<html> <head> <title>CSS_25</title> <style type=text/css> td {background-color: blue; color:white; 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> NEXT BACK

(49)

CSS (Cascading Style Sheet)

Table

<html> <head> <title>CSS_26</title> <style type=text/css> td {background-color: blue; color:white; 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> NEXT BACK

(50)

CSS (Cascading Style Sheet)

Table

border-top: 1px solid red;}

(51)

CSS (Cascading Style Sheet)

Table

border-right: 1px solid red;}

(52)

CSS (Cascading Style Sheet)

Table

border-left: 1px solid red;}

(53)

CSS (Cascading Style Sheet)

• Soal (07)

(54)

CSS (Cascading Style Sheet)

• Soal (08)

(55)

CSS (Cascading Style Sheet)

• Soal (09)

(56)

CSS (Cascading Style Sheet)

• Soal (10)

(57)

CSS (Cascading Style Sheet)

• Soal (11)

(58)

CSS (Cascading Style Sheet) Classes

Penulisan

<style type=text/css>

.variable { … deklarasi … }

</style>

NEXT BACK

(59)

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>

NEXT BACK

(60)

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

</html>

NEXT BACK