Scribd
Unggah
22 tayangan

Modul Web Pert-4

Modul ini membahas dasar-dasar CSS (Cascading Style Sheets) untuk mengatur tampilan dan format halaman web, meliputi pengantar CSS, struktur dan gaya halaman web, memilih dan mengatur elemen, gaya teks yang menarik, dan merancang tata letak yang responsif."

Diunggah oleh

Tsaniya pcy
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
22 tayangan

Modul Web Pert-4

Modul ini membahas dasar-dasar CSS (Cascading Style Sheets) untuk mengatur tampilan dan format halaman web, meliputi pengantar CSS, struktur dan gaya halaman web, memilih dan mengatur elemen, gaya teks yang menarik, dan merancang tata letak yang responsif."

Diunggah oleh

Tsaniya pcy
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

Modul Pemrograman Web

S1 Ilmu Komputer

Pertemuan Ke-4:
Dasar Cascading Style Sheets (CSS)

Disusun Oleh:
Asisten Dosen Pemrograman Web
Jurusan Ilmu Komputer Universitas Lampung
Tim Penyusun

Pengarah
RIZKY PRABOWO, M.KOM
Penyusun
● Satria Sapta Nugraha 2017051022

● Rendy Lutfi Prabowo 2017051053

● Rifan Setiadi 2017051019

● Kurniawan Dwi Yulianto 2057051010

● Alifan Renaldi 2017051044

● Fachri Azka Nur 2017051054

● Putu Putra Eka Persada 2057051016


Gambaran Umum
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk
mengatur tampilan dan format sebuah dokumen HTML. Dengan
menggunakan CSS, Anda dapat mengontrol warna, ukuran, tata letak, dan
gaya elemen-elemen dalam halaman web.

Capaian Pembelajaran
1. Praktikan mampu memahami struktur dan gaya halaman web

2. Praktikan bisa memilih dan mengatur elemen

3. Praktikan mampu membuat gaya teks yang menarik

4. Praktikan dapat merancang tata letak yang responsif

Materi Praktikum
Pengantar CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk


mengontrol tampilan dan format sebuah dokumen HTML. Dengan
menggunakan CSS, Anda dapat mengubah gaya elemen-elemen dalam
halaman web, seperti warna, ukuran, tata letak, dan jenis font. CSS
memisahkan tampilan dari struktur konten HTML, sehingga memungkinkan
pengembang web untuk dengan mudah mengubah dan memperbarui
tampilan situs web secara terpusat.

Sejarah CSS dimulai pada tahun 1994 ketika Håkon Wium Lie dan Bert Bos
mengajukan proposal untuk menciptakan CSS. Pada saat itu, halaman web
masih sangat sederhana dan tampilan gaya terbatas. CSS diciptakan
dengan tujuan memisahkan tampilan dari struktur HTML, yang
memungkinkan pengembang web untuk lebih fleksibel dalam mengatur
tampilan situs.

Versi pertama CSS, CSS level 1, diterbitkan pada tahun 1996 sebagai
spesifikasi W3C (World Wide Web Consortium). Ini menetapkan dasar-
dasar CSS, termasuk properti dan nilai dasar serta mekanisme pemilihan
elemen.

Selanjutnya, CSS level 2 diterbitkan pada tahun 1998. Versi ini


memperkenalkan fitur-fitur baru, seperti selektor lanjutan, dukungan untuk
posisi dan tata letak yang lebih fleksibel, serta media print untuk tampilan
cetak.

Pada tahun 1999, CSS level 2.1 diterbitkan sebagai revisi dari CSS level 2. Ini
adalah versi yang paling banyak digunakan saat ini dan mengatasi
beberapa bug dan tidak konsistensi yang ada pada CSS level 2.

Kemudian, CSS level 3 mulai dikembangkan dengan fokus pada


penambahan fitur-fitur baru yang lebih canggih. CSS level 3 terdiri dari
berbagai modul yang masing-masing menghadirkan fitur dan
fungsionalitas baru, seperti selektor lebih lanjut, animasi, transisi, bayangan,
dan fleksibilitas tata letak.

Sejak CSS level 3, CSS telah terus berkembang dengan penambahan fitur-
fitur baru dan peningkatan kinerja. Saat ini, banyak fitur CSS level 3 telah
diadopsi dan didukung oleh berbagai browser, meskipun implementasinya
mungkin berbeda di setiap browser.

CSS juga terus berkembang dengan adanya CSS level 4 dan CSS level 5
yang sedang dalam pengembangan. Perkembangan CSS terus mengikuti
kebutuhan pengembang web untuk menciptakan tampilan yang lebih
kreatif, interaktif, dan responsif di halaman web.

Struktur dan Gaya Halaman Web

Penyisipan CSS

CSS dapat disisipkan langsung dalam tag HTML menggunakan atribut style
atau disisipkan dalam tag <style> di dalam tag <head>. Alternatifnya, CSS
dapat disimpan dalam file eksternal dengan ekstensi .css dan dihubungkan
dengan menggunakan tag <link>.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
h1 {
color: blue;
font-size: 24px;
}

p {
color: green;
font-size: 16px;
}

img {
width: 200px;
height: 150px;
}

a {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah contoh paragraf.</p>
<img src="gambar.jpg" alt="Deskripsi Gambar">
<a href="https://www.contoh.com">Tautan</a>
</body>
</html>

Selector CSS

Selektor CSS digunakan untuk memilih elemen yang akan diberi gaya.
Pemilihan dapat berdasarkan nama tag, kelas, ID, atau atribut.

/* Selektor elemen */
h1 {
color: blue;
}
/* Selektor kelas */
.teks-hijau {
color: green;
}

/* Selektor ID */
#gambar {
width: 200px;
height: 150px;
}

/* Selektor atribut */
[a] {
color: red;
}

Properti CSS

Properti CSS mengatur gaya dan tampilan elemen yang dipilih.

h1 {
color: blue; /* Mengatur warna teks menjadi biru */
font-size: 24px; /* Mengatur ukuran font menjadi 24 piksel */
}

p {
color: green; /* Mengatur warna teks menjadi hijau */
font-size: 16px; /* Mengatur ukuran font menjadi 16 piksel */
}

img {
width: 200px; /* Mengatur lebar gambar menjadi 200 piksel */
height: 150px; /* Mengatur tinggi gambar menjadi 150 piksel */
}

a {
color: red; /* Mengatur warna tautan menjadi merah */
text-decoration: none; /* Menghilangkan garis bawah pada tautan
*/
}
Memilih dan Mengatur Elemen CSS

Dalam CSS, Anda dapat memilih dan mengatur elemen-elemen dalam


halaman web dengan menggunakan berbagai jenis selektor. Berikut
adalah beberapa jenis selektor yang umum digunakan:

● Selektor elemen adalah memilih elemen berdasarkan nama tag


HTML.

p {
color: blue;
font-size: 18px;
}

● Selektor kelas adalah memilih elemen dengan kelas tertentu.

.nama-kelas {
color: red;
font-size: 16px;
}

● Selektor ID adalah memilih elemen dengan ID tertentu.

#nama-id {
background-color: yellow;
padding: 10px;
}

● Selektor atribut adalah memilih elemen berdasarkan atribut atau


nilai atribut.

[type="submit"] {
background-color: green;
color: white;
padding: 5px 10px;
}

● Selektor kombinasi adalah menggabungkan beberapa selektor


untuk memilih elemen yang lebih spesifik.
div p {
color: blue;
}

● Pseudo elemen dan Pseudo kelas adalah menggunakan pseudo


elemen dan pseudo kelas untuk mengubah gaya elemen dalam
keadaan tertentu.

a:hover {
color: red;
text-decoration: underline;
}

p:first-child {
font-weight: bold;
}

● Selektor Lebih Lanjut:


○ Selektor potongan (descendant selector): Memilih elemen
yang merupakan turunan langsung dari elemen lain.
○ Selektor anak (child selector): Memilih elemen yang menjadi
anak langsung dari elemen lain.
○ Selektor tetangga sebelumnya (previous sibling selector):
Memilih elemen yang merupakan saudara sebelumnya dari
elemen lain.
○ Selektor tetangga berikutnya (next sibling selector): Memilih
elemen yang merupakan saudara berikutnya dari elemen lain.

div p {
color: blue;
}

div > p {
color: red;
}

h2 + p {
font-weight: bold;
}

p ~ span {
font-style: italic;
}

Gaya yang menarik dalam CSS

Membuat gaya teks yang menarik dalam halaman web dengan


menggunakan beberapa properti CSS berikut:

● Warna Teks (color): Mengubah warna teks.

p {
color: blue;
}

● Ukuran Font (font-size): Mengatur ukuran font teks.

h1 {
font-size: 24px;
}

● Jenis Font (font-family): Mengganti jenis font teks.

body {
font-family: Arial, sans-serif;
}

● Ketebalan Font (font-weight): Mengatur ketebalan font teks.

h2 {
font-weight: bold;
}

● Gaya Font (font-style): Menerapkan gaya font teks seperti italic atau
oblique.

em {
font-style: italic;}
● Penyajian Teks (text-align): Menentukan penataan teks seperti rata
kiri, rata kanan, rata tengah, atau rata kanan-kiri.

p {
text-align: center;
}

● Garis Bawah (text-decoration): Menambahkan garis bawah pada


teks.

a {
text-decoration: underline;
}

● Spasi Antar Huruf (letter-spacing): Mengatur jarak antara huruf-


huruf dalam teks.

h3 {
letter-spacing: 2px;
}

● Spasi Antar Kata (word-spacing): Mengatur jarak antara kata-kata


dalam teks.

p {
word-spacing: 5px;
}

● Transformasi Teks (text-transform): Mengubah tampilan teks


menjadi huruf besar, huruf kecil, atau kapitalisasi awal.

h4 {
text-transform: uppercase;
}
Tata Letak Responsif

Merancang tata letak responsif memungkinkan halaman web


menyesuaikan diri dengan berbagai perangkat dan ukuran layar. Berikut
adalah beberapa teknik yang dapat digunakan:

● Media Query: Mengubah gaya CSS berdasarkan ukuran layar atau


fitur perangkat.

.container {
width: 100%;
}

@media (max-width: 600px) {


.container {
width: 80%;
margin: 0 auto;
}
}

● Unit Responsif: Menggunakan unit persentase atau viewport units


untuk mengatur ukuran dan margin.

.container {
width: 100%;
padding: 5% 10%;
}

.item {
width: 50%;
margin: 2vw;
}

● Grid CSS: Menggunakan sistem tata letak grid untuk tata letak
responsif.

.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.item {
grid-column: span 1;
}

● Flexbox: Menggunakan flexbox untuk mengatur elemen dalam tata


letak responsif.

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.item {
flex-basis: 48%;
margin-bottom: 20px;
}

● Gambar Responsif: Mengatur gambar agar menyesuaikan ukuran


kontainer dengan properti CSS seperti max-width: 100%.

img {
max-width: 100%;
height: auto;
}

Anda mungkin juga menyukai