Modul Css

Cascading Style Sheet
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.
NEXT
Konsep:
• Pewarisan (inheritance)
• Selektor-Kontekstual (Contextual Selector)
• Kelas (classes)
BACK NEXT
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>
BACK NEXT
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>
BACK NEXT
CSS Pewarisan (inheritance)
Text
<html>
<head>
<title>CSS_01</title>
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 BACK NEXT
CSS Selektor-Kontekstual (Contextual Selector)
Text
<html>
<head>
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 BACK NEXT

Perbedaan CSS pewarisan (inheritance) dengan

CSS Selektor-Kontekstual (Contextual Selector) !!!
Pewarisan (inheritance) Selektor Kontekstual (Contextual Selector)
<html> <html>
<head> <head>
<title>CSS Inheritance</title> <title>Selektor-Kontekstual</title>
<style type=text/css> <style type=text/css>
b { color:blue; text-decoration:underline } b,i { color:blue;
i { color:blue; text-decoration:underline } text-decoration:underline;
</style> }
</head> </style>
<body> </head>
<b>Universitas Narotama Surabaya</b> <body>
<br> <b>Universitas Narotama Surabaya</b>
<i>Fakultas Ilmu Komputer</i> <br>
</body> <i>Fakultas Ilmu Komputer</i>
</html> </body>
</html
BACK NEXT
Aturan CSS berdasarkan case to case
<html>
<head>
</head>
<body>
TIDAK EFEKTIF
<br>
<b style=color:lime>
Fakultas Ilmu Komputer
</b>
</body>
</html>
BACK NEXT
Text
<html>
<head>
i { color:#ff3333 }
</style>
</head>
<body>
<br>
</body>
</html>
BACK NEXT
Text
<html>
<head>
u { color:#3333CC }
</style>
</head>
<body>
<br>
<u>Fakultas Ilmu Komputer</u>
</body>
</html>
BACK NEXT
Text
<html>
<head>
h3 { color:#009900 }
</style>
</head>
<body>
<h3>Fakultas Ilmu Komputer</h3>
</body>
</html>
BACK NEXT
Text
<html>
<head>
h2 { color:#009900 }
h3 { color:#FF3333 }
</style>
</head>
<body>
<h2>Sistem Informasi</h2>
<br>
<h3>Sistem Komputer</h3>
</body>
</html>
BACK NEXT
Text text-decoration:
- underline (tampil garis dibawah text)
<html> - overline (tampil garis diatas text)
<head> - line-trough (tampil garis melalui text)
- none (non-efek)
b,i { color:blue;
font-family:Tahoma;
}
</style>
</head>
<body>
<br>
</body>
</html>
BACK NEXT
Text
<html>
<head>
b,i { color:blue;
font-family:Tahoma;
font-size: 28px;
}
</style>
</head>
<body>
<br>
</body>
</html>
BACK NEXT
• Soal (1)
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
PREVIEW BACK NEXT

• Soal (2)
PREVIEW BACK NEXT

• Soal (3)
PREVIEW END
Text
<html>
<head>
i { color:blue;
font-family:Tahoma;
font-size:14px; font-weight:
font-weight:bold; - normal
} - bold
</style>
</head>
<body>
<i>Universitas Narotama Surabaya</i>
</body>
</html>
NEXT
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>
BACK NEXT
Text
font-variant:
<html> small-caps (mengganti semua kar.lower-case
<head> dengan kar.upper-case)
none (tanpa efek)
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 BACK NEXT

Text
text-transform:
capitalize (Kar.pertama huruf besar)
<html> uppercase (Semua kar. huruf besar)
<head> lowercase (Semua kar. Huruf kecil)
p { color:blue;
font-family:Tahoma;
text-transform:lowercase;
}
</style>
</head>
<body>
<p>UNIVERSITAS NAROTAMA SURABAYA</p>
</body>
</html>
BACK NEXT
Text
<html>
<head>
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 BACK NEXT

Text
<html>
<head>
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 BACK NEXT

Body
<html>
<head>
body
{
background-color:blue;
}
</style>
</head>
<body>
</body>
</html>
BACK NEXT
Body
<html>
<head>
body
{ background-image:
url(bg.jpg);
}
</style>
</head>
<body>
</body>
</html>
BACK NEXT
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
BACK NEXT
Bullet & Numbering
<html>
<head>
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>
BACK NEXT
• Soal (4)
PREVIEW BACK NEXT

• Soal (5)
PREVIEW BACK NEXT

• Soal (6)
PREVIEW END
Link
Link Properties:
• A:link
• A:hover
• A:active
NEXT
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
BACK NEXT
Link
<html>
<head>
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>
</body>
</html>
PREVIEW BACK NEXT

Link
<html>
<head>
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>
</body>
</html>
PREVIEW BACK NEXT

Form
<html>
<head>
<title>Form_01</title>
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>, BACK NEXT
<input type=submit> & <inputy type=button>
Form
<html>
<head>
input { background:yellow;
border: 1px solid red;}
</style>
</head>
<body>
NIM<br>
Nama Lengkap<br>
</form>
</body>
</html>
Jenis border : dotted, dashed, solid, double, groove,

ridge, inset dan outset BACK NEXT
Form
<html>
<head>
input { background:yellow;
border: 1px solid red;
color: blue; }
</style>
</head>
<body>
NIM<br>
Nama Lengkap<br>
</form>
</body>
</html>
BACK NEXT
Form
<html>
<head>
select { background:yellow;
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>
BACK NEXT
Form
<html>
<head>
textarea { background:yellow;
color: blue; }
</style>
</head>
<body>
<form>
Alamat:<br>
<textarea name=alamat cols=30 rows=5></textarea>
</form>
</body>
</html>
BACK NEXT
• Soal (FORM_01)
PREVIEW BACK NEXT

• Soal (FORM_02)
PREVIEW END
Table
<html>
<head>
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 BACK NEXT
Table
<html>
<head>
table { background-color: cyan;
border: 1px solid orange; }
</style>
</head>
<body>
<table>
<tr>
<td>NIM</td><td>NAMA</td>
</tr>
<tr>
</tr>
<tr>
<td>04102002</td><td>Indra Cahyo</td>
</tr>
</table>
</body></html>
BACK NEXT
Table
<html>
<head>
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>
<tr>
</tr>
</table></body></html>
Catatan: deklarasi border tidak berlaku pada selector <TR> BACK NEXT
Table
<html>
<head>
td {background-color: blue;
color:white;
padding-left: 15px;
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Catatan: deklarasi padding tidak berlaku pada selector <TR> BACK NEXT
Table
<html>
<head>
color:white;
padding-top: 10px;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Table
<html>
<head>
color:white;
padding-bottom: 10px;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
Table
<html>
<head>
color:white;
border-bottom: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
Table
<html>
<head>
color:white;
border-top: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
Table
<html>
<head>
color:white;
border-right: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
Table
<html>
<head>
color:white;
border-left: 1px solid red;}
</style>
</head>
<body>
<table><tr>
</tr>
<tr>
</tr></table>
</body></html>
BACK NEXT
• Soal (07)
PREVIEW BACK NEXT

• Soal (08)
PREVIEW BACK NEXT

• Soal (09)
PREVIEW BACK NEXT

• Soal (10)
PREVIEW BACK NEXT

• Soal (11)
PREVIEW BACK NEXT

CSS (Cascading Style Sheet) Classes
Penulisan
.variable { … deklarasi … }
</style>
Catatan: bagian deklarasi harus diawali dengan tanda . (titik) BACK NEXT
Text
<html>
<head>
<title>Kelas_01</title>
.text { font-family:tahoma; font-size: 16px;
color: #006699; font-weight: bold; }
</style>
</head>
<body>
<a class=text>Universitas Narotama Surabaya</a>
</body>
</html>
PREVIEW BACK NEXT

Link
<html>
<head>
<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; }
</style>
</head>
<body>
<a href=# class=link>Link 1</a><br><br>
<a href=# class=link>Link 2</a>
</body>
</html>
PREVIEW BACK NEXT

Modul Css

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Css

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascading Style Sheet

CSS (Cascading Style Sheet)

• Memperindah tampilan halaman website.

• Penulisan script CSS terletak diantara tag <HEAD>…</HEAD>

Catatan: selector ini kesemuanya untuk bold+italic text BACK NEXT

Perbedaan CSS pewarisan (inheritance) dengan

Aturan CSS berdasarkan case to case

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Catatan: font-variant tidak berlaku pada browser Netscape BACK NEXT

letter-spacing = mengendalikan jumlah spasi antar karakter BACK NEXT

text-indent = membuat indent untuk awal paragraf BACK NEXT

disc -> efek lingkaran

Bullet & Numbering

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Definisi style link:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Catatan: untuk selector input berlaku pada,

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

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Anda mungkin juga menyukai