Dokumen tersebut merupakan laporan tentang pembelajaran CSS pada pertemuan ke-5 mata kuliah Pemrograman Berbasis Web. Dokumen menjelaskan pengertian CSS, cara penulisan sintaks CSS, penggunaan selector, dan cara menghubungkan CSS dengan file HTML. Diakhir dokumen terdapat contoh soal tugas penerapan CSS ke dalam kode HTML.
Materi pemrograman web di KuliahKita yang membahas bahasa yang digunakan untuk mendefinisikan cara menampilkan halaman situs yaitu CSS di http://kuliahkita.com/kelas/pengembangan-web/
Materi pemrograman web di KuliahKita yang membahas bahasa yang digunakan untuk mendefinisikan cara menampilkan halaman situs yaitu CSS di http://kuliahkita.com/kelas/pengembangan-web/
PPT Seri Belajar Pembuatan Website dengan HTML, CSS, dan Javascript
Dapat melihat video tutorial dibawah:
https://www.youtube.com/playlist?list=PLM81x4SWlGyvE5MIANju_8xCk5E88tG2n
PPT Seri Belajar Pembuatan Website dengan HTML, CSS, dan Javascript
Dapat melihat video tutorial dibawah:
https://www.youtube.com/playlist?list=PLM81x4SWlGyvE5MIANju_8xCk5E88tG2n
Pertemuan 3 mengenai dasar-dasar penggunaan css
Dapat melihat video tutorial dibawah:
https://www.youtube.com/playlist?list=PLM81x4SWlGyvE5MIANju_8xCk5E88tG2n
Style Untuk Font Family
Membuat Teks Italic
Membuat Teks Tebal
Mengatur Ukuran Font
Mengatur Jarak Baris Dalam Paragraf
Mengubah Warna Text
Mengubah Warna Background Text
1. LAPORAN PBW
Tugas 4
Melda Vandy Septiandika
(1210651108)
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2. Pertemuan 5
Pemrograman Berbasis Web
CSS adalah singkatan dari Cascading Style Sheets.
CSS adalah aliran dari suatu kode ke kode lain yang saling
berhubungan.
CSS merupakan kumpulan kode-kode berurutan dan saling
berhubungan untuk mengatur format / tampilan suatu
halaman HTML.
3.
Memudahkan dalam penggantian format secara
keseluruhan.
Lebih praktis.
Untuk mengubah tampilan web, tanpa mengubah
layout utamanya.
Terdiri dari beberapa set peraturan yang memiliki: selector,
property, value.
selector {property: value;}
Selector menunjukkan bagian mana yang hendak
diatur/diformat.
Property bagian dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
4.
Contoh sintaks CSS:
h1 {color: red;}
Keterangan:
Selector: h1
Property: color
Value: red
Terjemahan bahasa manusia: mengatur color dari h1
ke red (warna merah)
Anda dapat menulis satu kode CSS untuk berbagai
macam selector dengan cara menggunakan
pemisah koma.
Misalkan mengatur tag-tag h1, h2, h3
menggunakan warna merah, maka CSSnya
menjadi:
h1, h2, h3 {color: red;}
5.
Untuk mengatur lebih dari satu property gunakan
pemisah titik koma ( ; )
Contoh:
h1, h2, h3 {
color: red;
font-family: arial;
font-size: 150%;
}
Menggunakan syntax pembuka /* dengan penutup */
untuk menuliskan komentar di CSS.
Contoh:
/* tulis komentar anda disini */
p {
text-align: justify;
/* tulis lagi komentar anda disini */
color: blue;
font-family: arial;
}
6.
Ada 3 cara memasang CSS ke dalam HTML:
1.Inline CSS
2.Embedded CSS
3.Import CSS file
Kode CSS dituliskan langsung ke dalam tag HTML.
Penulisan cara ini tidak memerlukan selector dalam kode
CSS.
Cara ini sebaiknya hanya digunakan jika memformat suatu
elemen hanya satu kali.
Contoh:
<p style=“color:blue;”>
isi paragraf.
</p>
7.
Menempelkan kode CSS diantara tag <head> dan
</head> atau dapat juga diantara tag <body> dan
</body>
Contoh:
<head>
<style type=“text/css”>
p {color:blue;}
</style>
</head>
Kode CSS dituliskan pada file tersendiri berekstensi
.css
Kemudian file .css tersebut diimport diantara tag
<head> dan </head>
Contoh:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
Pada kode href itulah yang merujuk pada file CSS,
yaitu berada pada folder css dengan nama file
style.css
8.
Pada contoh sebelumnya, penggunaan tag HTML sebagai
selector.
Misalkan membuat kode CSS untuk tag <h1>, sintaks
CSSnya h1 {color: red;}
Sehingga ketika menggunakan tag <h1> maka teksnya
berwarna merah.
Jika membutuhkan format tersendiri untuk elemen
tertentu bagaimana? Maka dibutuhkan penentuan Class dan
ID Selector.
Class selector adalah penulisan selector untuk
sekelompok elemen yang sering digunakan pada
beberapa elemen.
Format penulisan class selector:
.nama_class_selector {property: value;}
Deklarasi di HTML menggunakan atribut class.
Contoh: <div class="nama_class_selector"> dan diakhiri dengan tag
</div>
9.
Penulisan kode CSS:
.tengah {text-align: center;}
p.tengah {color: red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS ke HTML:
<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 digunakan untuk menentukan format style pada
elemen tunggal yang unik.
Menggunakan atribut id pada HTML, dan didefinisikan
dengan tanda # pada sintaks CSS.
Contoh: