Day 7 Modul CSS Lengkap

(1)

(2)

CSS (Cascading Style Sheet)

Manfaat:

•

Memperindah tampilan halaman website.

•

Mempermudah mengubah secara keseluruhan warna dan tampilan.

•

Memformat ulang situs Anda secara cepat.

•

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)

•

Kelas (classes)

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

<STYLE TYPE=text/css>

selector { declaration }

</STYLE>

</HEAD>

<BODY>

……..

</BODY>

</HTML>

(5)

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>

(6)

CSS Pewarisan (inheritance)

Text

<html>

<head>

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>

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

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>

</html

(9)

CSS (Cascading Style Sheet)

Aturan CSS berdasarkan case to case

<html>

<head>

</head>

<body>

<br>

Fakultas Ilmu Komputer

</b>

</body>

</html>

TIDAK EFEKTIF

(10)

Text

<html>

<head>

i { color:#ff3333 }

</style>

</head>

<body>

<br>

</body>

</html>

(11)

Text

<html>

<head>

u { color:#3333CC }

</style>

</head>

<body>

<br>

<u>Fakultas Ilmu Komputer</u>

</body>

</html>

(12)

Text

<html>

<head>

h3 { color:#009900 }

</style>

</head>

<body>

<h3>Fakultas Ilmu Komputer</h3>

</body>

</html>

(13)

Text

<html>

<head>

h2 { color:#009900 }

h3 { color:#FF3333 }

</style>

</head>

<body>

<h2>Sistem Informasi</h2>

<br>

<h3>Sistem Komputer</h3>

</body>

</html>

(14)

Text

<html>

<head>

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;

font-family:Tahoma;

}

</style>

</head>

<body>

<b>Universitas Narotama Surabaya</b>

<br>

</body>

</html>

(15)

Text

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

</html>

(16)

CSS (Cascading Style Sheet)

• Soal (1)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

NEXT BACK

(17)

• Soal (2)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

NEXT BACK

(18)

• Soal (3)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(19)

CSS (Cascading Style Sheet)

Text

<html>

<head>

i { color:blue;

font-family:Tahoma;

font-size:14px;

font-weight:bold;

}

</style>

</head>

<body>

<i>Universitas Narotama Surabaya</i>

</body>

</html>

NEXT

font-weight:

(20)

CSS (Cascading Style Sheet)

Text

<html>

<head>

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>

(21)

Text

<html>

<head>

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)

Text

<html>

<head>

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>

(23)

Text

<html>

<head>

p { color:blue;

font-family:Tahoma;

letter-spacing:10px;

}

</style>

</head>

<body>

<p>UNIVERSITAS NAROTAMA</p>

</body>

</html>

NEXT BACK

(24)

Text

<html>

<head>

p { color:blue;

font-family:Tahoma;

text-indent:30px;

}

</style>

</head>

<body>

<p>UNIVERSITAS NAROTAMA</p>

</body>

</html>

NEXT BACK

(25)

Body

<html>

<head>

body

{

background-color:blue;

}

</style>

</head>

<body>

</body>

</html>

(26)

Body

<html>

<head>

body

{

background-image:

url(bg.jpg);

}

</style>

</head>

<body>

</body>

</html>

(27)

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

(28)

CSS (Cascading Style Sheet)

Bullet & Numbering

font-weight:bold; font-weight:bold; }

<h3>Fakultas Ilmu Komputer</h3> <ol>

<li>Sistem Informasi</li> <li>Sistem Komputer</li> </ol>

</body> </html>

(29)

• Soal (4)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

NEXT BACK

(30)

• Soal (5)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

NEXT BACK

(31)

• Soal (6)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(32)

CSS (Cascading Style Sheet)

Link

Link Properties:

•

A:link

•

A:link

•

A:hover

•

A:active

(33)

Link

Definisi style link:

•

A:link -> memberikan efek pada saat normal (unlink)

•

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

<html>

<head>

a

{ color: #000000; /* kode warna hitam */

a

{ color: #000000; /* kode warna hitam */

text-decoration: none; }

a:hover

{ color : #FF9900; /* kode warna orange */

text-decoration : underline; }

</style>

</head>

<body>

</body>

</html>

NEXT BACK

(35)

Link

<html>

<head>

a

{ color: #000000; } /* kode warna hitam */

a

{ color: #000000; } /* kode warna hitam */

a:hover

{ color : #FF9900; } /* kode warna orange */

a:active

{ color: #006699; } /* kode warna biru */

</style>

</head>

<body>

</body>

</html>

NEXT BACK

(36)

Form

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,

(37)

CSS (Cascading Style Sheet)

Form

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

(38)

Form

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>

(39)

CSS (Cascading Style Sheet)

Form

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>

(40)

CSS (Cascading Style Sheet)

Form

textarea { background:yellow; border: 1px solid red; border: 1px solid red; color: blue; }

</style> </head>

<body> <form> Alamat:<br>

</body> </html>

(41)

• Soal (FORM_01)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

NEXT BACK

(42)

• Soal (FORM_02)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

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

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

(45)

Table

tr {background-color: blue; color:white;

color:white; text-align:center;} </style>

</head> <body> <table> <tr>

<tr>

<td>04102001</td><td>Lukmanul Khakim</td> </tr>

</table></body></html>

NEXT BACK

(46)

Table

td {background-color: blue; color:white;

color:white;

padding-left: 15px;

<tr>

<td>04102001</td><td>Lukmanul Khakim</td> </tr></table>

</body></html>

NEXT BACK

(47)

Table

color:white;

padding-top: 10px;} </style>

</head> <body>

<tr>

</body></html>

NEXT BACK

(48)

CSS (Cascading Style Sheet)

Table

color:white;

padding-bottom: 10px;} </style>

</head> <body>

<tr>

</body></html>

NEXT BACK

(49)

Table

color:white;

border-bottom: 1px solid red;} </style>

</head> <body>

<tr>

</body></html>

(50)

Table

color:white;

border-top: 1px solid red;} </style>

</head> <body>

<tr>

</body></html>

(51)

CSS (Cascading Style Sheet)

Table

color:white;

border-right: 1px solid red;} </style>

</head> <body>

<tr>

</body></html>

(52)

Table

color:white;

border-left: 1px solid red;} </style>

</head> <body>

<tr>

</body></html>

(53)

• Soal (07)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(54)

CSS (Cascading Style Sheet)

• Soal (08)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(55)

CSS (Cascading Style Sheet)

• Soal (09)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(56)

CSS (Cascading Style Sheet)

• Soal (10)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(57)

CSS (Cascading Style Sheet)

• Soal (11)

Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:

(58)

CSS (Cascading Style Sheet) Classes

Penulisan

.variable { … deklarasi … }

</style>

NEXT BACK

(59)

CSS (Cascading Style Sheet) Classes

Text

<html>

<head>

<title>Kelas_01</title>

.text

{ font-family:tahoma; font-size: 16px;

color: #006699; font-weight: bold; }

</style>

</head>

<body>

</a>

</body>

</html>

NEXT BACK

(60)

CSS (Cascading Style Sheet) Classes

Link

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