Dokumen tersebut membahas tentang CSS (Cascading Style Sheets) yang digunakan untuk mengatur format dan tampilan halaman web. CSS memungkinkan penggantian format secara keseluruhan tanpa mengubah struktur konten. Dokumen tersebut menjelaskan sintaks dasar CSS, pengelompokan selector, komentar, dan cara mempasang CSS baik secara inline, embedded atau menggunakan file eksternal. Selain itu juga membahas tentang penggunaan class dan ID selector
1. Pemrograman Berbasis WEB
Tugas 4
Oleh
(Yudha Anggara)
(1210651028)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2013/2014
2. Pertemuan 5
Pemrograman Berbasis Web
Apa itu CSS?
Cascading Style Sheets.
-kode berurutan dan saling berhubungan
untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan CSS:
penggantian format secara keseluruhan.
Sintax CSS:
selector {property: value;}
3. Sintax CSS (cont’d)
h1 {color: red;}
color dari h1 ke red (warna merah)
Pengelompokan Selectors
cara menggunakan pemisah koma.
tag-tag h1, h2, h3 menggunakan warna merah, maka
CSSnya menjadi:
h1, h2, h3 {color: red;}
Penggunaan Multi Property
h1, h2, h3 {
color: red;
font-family: arial;
font-size: 150%;
}
CSS Comment
komentar di CSS.
/* tulis komentar anda disini */
4. p {
text-align: justify;
/* tulis lagi komentar anda disini */
color: blue;
font-family: arial;
}
Pemasangan CSS di HTML
1.Inline CSS
2.Embedded CSS
3.Import CSS file
Inline CSS
kali.
<p style=“color:blue;”>
isi paragraf.
</p>
Embedded CSS
<head> dan </head> atau dapat juga
diantara tag <body> dan </body>
<head>
<style type=“text/css”>
p {color:blue;}
</style>
</head>
5. Import CSS File
<head> dan </head>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"
/>
</head>
href itulah yang merujuk pada file CSS, yaitu berada pada folder
css dengan nama file style.css
Class dan Id Selector
<h1>, sintaks CSSnya h1 {color:
red;}
<h1> maka teksnya berwarna merah.
dibutuhkan penentuan Class dan ID Selector.
Class Selector
sering digunakan pada beberapa elemen.
.nama_class_selector {property: value;}
class.
<div class="nama_class_selector"> dan diakhiri dengan tag </div>
6. Class Selector (cont’d)
.tengah {text-align: center;}
p.tengah {color: red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
<p class=“tengah”>Teks tengah akan berwarna merah</p>
<div class="tengah">
<h1>Tag h1 tengah akan berwarna hitam</h1>
</div>
<h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>
ID selector
yang unik.
id pada HTML, dan didefinisikan dengan tanda # pada
sintaks CSS.