Kelas Web Pertemuan-4-css-cascading-style-sheet.pdf

CSS?
Contoh sederhana
Selector
Mekanisme mengaplikasikan CSS
Elemen-elemenCSS

 Singkatan dari Cascading Style Sheet
 Merupakan suatu cara untuk memformat atau
membuat layout halaman web menjadi lebih
menarik dan mudah dikelola.
 Di dalamnya terdapat banyak style.
 CSS dapat dituliskan pada bagian <body>, <head>
suatu dokumen HTML atau diletakkan di sebuah file
eksternal.
 Perintah-perintahCSS dibatasi oleh tag <style> dan
</style>

Tampilan:
Script HTML:
<html>
<head>
<title>Style Sheet Sederhana </title>
<style>
h1
{
font-family: Arial;
color: blue;
text-align: center;
font-style :italic;
}
</style>
</head>
<body>
<h1>Style Sheet Sederhana</h1>
</body>
</html>

Adalah nama yang diberikan untuk setiap style
berbeda yang dibuat.
Di dalam style didefinisikan bagaimana setiap selector
akan bekerja (font, color dan lain-lain.). Kemudian di
dalam bagian body halaman web, selector tersebut
dipanggil untuk mengaktifkan style yang telah
didefinisikan.
Jenis-jenis Selector:
• Selector HTML
• Selector Class
• Selector ID

 Digunakan untuk mendefinisikan style yang berhubungan dengan tag
HTML, melakukan redefinisi tag normal HTML
 Syntax: SelectorHTML {Properti:Nilai;}
Script HTML:
<html>
<head>
<title>Selector HTML</title>
<style type="text/css">
b {font-family:arial; font-size:14px; color:red}
</style>
</head>
<body>

<b>Tulisan ini tebal karena menggunakan style CSS</b>
</body>
</html>
Tampilan:

 Digunakan untuk mendefinisikan style yang dapat dipakai tanpa
melakukan redefinisi tag HTML.
 Syntax: ClassSelector {Properti:Nilai;}
Script HTML:
<html>
<head>
<title>Selector Class</title>
.headline {font-family:arial; font-size:14px; color:red}
</style>
</head>
<body>
<b class="headline">
Tulisan ini tebal karena pengaruh selector class headline
</b><br>
<i class="headline">
Tulisan ini dicetak miring karena selector class headline
</i>
</body>
</html>
Tampilan:

 Dua tag yang sering dikombinasikan dengan selector class adalah
<SPAN> dan <DIV>
 Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak ada
pergantian baris (line break) yang disisipkan sebelum atau setelah
penulisannya.
 Tag <DIV> adalah "block tag" dalam HTML, berarti pergantian baris
secara otomatis disisipkan untuk memberikan jarak antara blok yang
dibuat dengan teks atau blok lain sebelum dan sesudahnya (seperti tag
<P> atau <TABLE>).
 Tag <DIV> sering digunakan untuk implementasi layer karena layer
merupakan blokblok informasi terpisah.Tag <DIV> merupakan pilihan
yang tepat saat membuat layer pada halaman web.

 Digunakan untuk mendefinisikan style yang berhubungan dengan suatu
object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer
 Syntax: #IDSelector {Properti:Nilai;}
Tampilan:

Script HTML:
<html>
<head>
<title>Selector ID</title>
#layer1 {position:absolute; left:100;top:75; z-index:2}
#layer2 {position:absolute; left:130;top:120; z-index:1}
</style>
</head>
<body>
<div id="layer1">
<table border="1" bgcolor="cyan">
<tr> <td>Ini adalah layer 1<br>Diletakkan pada posisi (100,100)</td></tr>
</table>
</div>
<div id="layer2">
<table border="1" bgcolor="yellow">
<tr><td>Ini adalah layer 2<br>Diletakkan pada posisi (130,120)</td></tr>
</table>
</div>
</body>
</html>

 Untuk beberapa style yang sebagian properti-nya
memiliki nilai yang sama, misalnya jenis font yang
sama; mendefinisikan font tidak perlu dilakukan
satu demi satu untuk setiap selector. Pendefinisian
dapat dikelompokkan, dengan cara melewatkan
font ke semua selector dalam satu kali.

Sebelum pengelompokan:
.headlines
{
font-family:arial;
color:black;
background:yellow;
font-size:14pt;
}
.sublines
{
font-family:arial;
color:black;
background:yellow;
font-size:12pt;
}
.infotext
{
font-family:arial;
color:black;
background:yellow;
font-size:10pt;
}
Setelah pengelompokan:
.headlines, .sublines, .infotext
{
font-family:arial;
color:black;
background:yellow;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}

1. Style didefinisikan dalam tag HTML (tag tunggal)
2. Style didefinisikan di dalam bagian <head> dan
diaplikasikan untuk seluruh dokumen HTML
tersebut.
3. Style didefinisikan di file eksternal yang selanjutnya
dapat digunakan oleh dokumen HTML manapun
dengan memasukkan CSS tersebut dalam
dokumen yang diinginkan melalui URL.

CSS mendefinisikan tag tunggalnya hanya dengan menambahkan style
seperti style="styledefinition:styleattribute;"
Script HTML:
<html>
<head>
<title>Penggunaan CSSTagTunggal</title>
</head>
<body>
Ini adalah contoh
<b style="font-size:16px;color:blue;">bold </b>
dengan menggunakan CSS.
</body>
</html>
Tampilan:

CSS dapat didefinisikan untuk satu halaman secara keseluruhan
hanya dengan menambahkan suatu definisi style pada bagian head
dokumen HTML.
Tampilan:

Script HTML:
<html>
<head>
<title>Penggunaan CSS untuk satu halaman Web</title>
.headlines, .sublines, .infotext {
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;}
.infotext {font-size:10pt;}
</style>
</head>
<body>
<span class="headlines">Selamat Datang</span><br>
<div class="sublines"> Ini adalah contoh penggunaan web yang menggunakan CSS.<br>
Contoh ini menggunakan CSS untuk satu halaman Web.<br>
Pendefinisian style cukup dilakukan di tag head.<br>
</div>
<br>
<table border="2"><tr>
<td class="sublines">Style juga dapat dilakukan dalam elemen table. </td></tr>
</table>
<br>
<hr>
<div class="infotext">contoh penggunaan CSS untuk satu halaman
</div>
<hr>
</body>
</html>

CSS dapat didefinisikan untuk semua halaman hanya dengan menulis
definisi CSS di dalam sebuah file teks yang selanjutnya dirujuk oleh
setiap halaman web yang akan menggunakannya.
Dengan demikian jika suatu saat ingin dilakukan perubahan style yang
berlaku untuk semua halamanWeb maka yang diubah ada file teks
eksternal tersebut.

Script HTML:
<html>
<head>
<title>Penggunaan CSS Eksternal</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<span class="headlines">Selamat Datang</span><br>
<div class="sublines">
Ini adalah contoh penggunaan web yang menggunakan CSS.<br>
Contoh ini menggunakan CSS Eksternal.<br>
Pendefinisian pemanggilan style dilakukan dengan menggunakan tag link.<br>
</div>
<table border="2"><tr>
<td class="sublines">
Style juga dapat dilakukan dalam elemen table.
</td></tr>
</table>
<hr>
<div class="infotext">contoh penggunaan CSS eksternal</div>
<hr>
</body>
</html>
File style.css:
.headlines, .sublines, .infotext
{
font-family:arial;
color:blue;
background:cyan;
font-weight:bold;
}
.infotext {font-size:10pt;}

 Font
 Text
 Color
 Link

Digunakan untuk mengatur
tingkah-laku huruf (font).
Elemen ini mempunyai
beberapa properti. Satu properti
dapat mempunyai beberapa
nilai.

Element text akan
membuat tampilan teks
menjadi lebih menarik

Elemen color yang digunakan
untuk mengatur warna teks
dan background halaman web

Digunakan sebagai penghubung sehingga dapat digunakan untuk
berpindah dari satu bagian ke bagian lain, dari satu halaman ke halaman
lain bahkan dari satu situs ke situs lainnya.CSS menyediakan elemen link
yang dapat digunakan untuk mengatur perilaku link.
• A:link  untuk link normal yang belum dikunjungi,
belum diklik.
• A:visited  untuk link yang telah dikunjungi.
• A:active  untuk link aktif. Link aktif adalah link
yang halaman tujuannya sedang ditampilkan oleh
web browser.
• A:hover  untuk link yang hover. Saat mouse
digerakkan atau mouse over di atas suatu link,
kondisi ini disebut link hover.

 CSS (Cascading Style Sheet) digunakan untuk
memformat atau membuat layout halaman web
menjadi lebih menarik dan mudah dikelola.
 Ada 3 mekanisme untuk mengaplikasikanCSS, yaitu:
Style didefinisikan dalam tag HTML (tag tunggal), di
dalam bagian <head>, didefinisikan di file eksternal.
 Elemen-elemen CSS terdiri dari Font,Text, Color dan Link

Kelas Web Pertemuan-4-css-cascading-style-sheet.pdf

More Related Content

Similar to Kelas Web Pertemuan-4-css-cascading-style-sheet.pdf

More from Fajar Baskoro

Recently uploaded

Kelas Web Pertemuan-4-css-cascading-style-sheet.pdf