CSS (Cascading Style Sheet) Utuk memperindah tampilan pada website yang dbuat.
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.
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>
Contoh 1 :
<html>
<html>
<head>
<title>CSS_01</title>
<style
type=text/css>
b { color:lime }
</style>
</head>
<body>
Universitas
Narotama Surabaya
<br>
<br>
<b>Fakultas
Ilmu Komputer</b>
</body>
</html>
Contoh 2 :
<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>
Perbedaan
CSS pewarisan (inheritance) dengan CSS
Selektor-Kontekstual (Contextual Selector) !!!
Pewarisan (inheritance)
<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>
<br>
<i>Fakultas
Ilmu Komputer</i>
</body>
</html>
Selektor Kontekstual (Contextual Selector)
<html>
<head>
<title>Selektor-Kontekstual</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
Aturan CSS
berdasarkan case to case (Tidak Efektif
Digunakan)
<html>
<head>
<title>CSS_01</title>
</head>
<body>
Universitas
Narotama Surabaya
<br>
<br>
<b
style=color:lime>
Fakultas
Ilmu Komputer
</b>
</body>
</html>
Contoh 3 :
<html>
<html>
<head>
<title>CSS_02</title>
<style
type=text/css>
i { color:#ff3333 }
</style>
</head>
<body>
Universitas
Narotama Surabaya
<br>
<br>
<i>Fakultas
Ilmu Komputer</i>
</body>
</html>
Contoh 4
<html>
<html>
<head>
<title>CSS_03</title>
<style
type=text/css>
u { color:#3333CC }
</style>
</head>
<body>
Universitas
Narotama Surabaya
<br>
<br>
<u>Fakultas
Ilmu Komputer</u>
</body>
</html>
Contoh 5
<html>
<html>
<head>
<title>CSS_04</title>
<style
type=text/css>
h3 { color:#009900 }
</style>
</head>
<body>
<h3>Fakultas
Ilmu Komputer</h3>
</body>
</html>
Contoh 6<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>
Contoh 7
<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>
Catatan : text-decoration:
-
underline
(tampil garis dibawah text)
-
overline
(tampil garis diatas text)
-
line-trough (tampil garis melalui text)
-
none
(non-efek)
Contoh 8
<html>
<head>
<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>
No comments:
Post a Comment