Sintaks dan selektor CSS

Untuk modul pengenalan sintaks dan selektor CSS dalam mata kuliah Pemrograman Web, berikut adalah panduan yang mencakup penjelasan dasar, contoh, dan cara mengimplementasikannya menggunakan alat di Ubuntu 24.04.

1. Pengenalan CSS

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendesain tampilan dan format elemen dalam dokumen HTML. Dengan CSS, Anda dapat mengontrol warna teks, jenis font, spasi antar paragraf, ukuran kolom, gambar latar belakang, dan tata letak secara keseluruhan.

2. Sintaks Dasar CSS

Setiap aturan CSS terdiri dari tiga bagian utama:

• Selektor (Selector): Menentukan elemen HTML mana yang akan diberi gaya.
• Properti (Property): Aspek dari elemen yang ingin Anda ubah (misalnya, warna, ukuran font).
• Nilai (Value): Spesifikasi dari properti yang dipilih.

Format umum dari aturan CSS adalah:

selektor {
  properti: nilai;
}

Contoh:

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

Aturan di atas akan membuat semua elemen `

` memiliki teks berwarna biru dengan ukuran font 16 piksel. ==3. Selektor CSS Selektor digunakan untuk "memilih" elemen HTML yang ingin Anda beri gaya. Berikut adalah beberapa selektor dasar:

a. Selektor Elemen (Type Selector)

Menargetkan semua elemen dari jenis tertentu.

Contoh:

h1 {
  text-align: center;
}

Aturan ini akan membuat semua elemen `< h1 >` memiliki teks yang terpusat.

b. Selektor Kelas (Class Selector)

Menargetkan elemen yang memiliki atribut `class` tertentu. Ditandai dengan tanda titik (`.`) diikuti nama kelas.

Contoh:

.highlight {
  background-color: yellow;
}

Aturan ini akan memberikan latar belakang kuning pada semua elemen yang memiliki kelas `highlight`.

c. Selektor ID

Menargetkan elemen dengan atribut `id` tertentu. Ditandai dengan tanda pagar (`#`) diikuti nama ID.

Contoh:

#header {
  font-size: 24px;
}

Aturan ini akan mengatur ukuran font menjadi 24 piksel untuk elemen dengan ID `header`.

d. Selektor Grup (Group Selector)

Menggunakan koma untuk menggabungkan beberapa selektor yang memiliki aturan gaya yang sama.

Contoh:

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Aturan ini akan mengatur jenis font untuk elemen `< h1 >`, `< h2 >`, dan `< h3 >`.

e. Selektor Universal

Menargetkan semua elemen pada halaman. Ditandai dengan tanda bintang (`*`).

Contoh:

* {
  margin: 0;
  padding: 0;
}

Aturan ini akan menghapus margin dan padding default dari semua elemen.

4. Menggunakan Tool di Ubuntu 24.04

Untuk mempraktikkan CSS di Ubuntu 24.04, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan:

a. Editor Teks

• Visual Studio Code (VS Code): Editor kode sumber yang populer dengan dukungan untuk berbagai bahasa pemrograman.

Instalasi VS Code:

1. Tambahkan Repository Microsoft:

sudo apt update
sudo apt install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
  

2. Instalasi VS Code:

sudo apt update
sudo apt install code
 

3. Jalankan VS Code:

code
  

• Gedit: Editor teks bawaan GNOME yang sederhana dan mudah digunakan.

Instalasi Gedit:

sudo apt update
sudo apt install gedit
 

Jalankan Gedit:

gedit
 

b. Browser Web

Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia:

• Firefox: Browser default di Ubuntu.

Instalasi Firefox:

sudo apt update
sudo apt install firefox
 

Jalankan Firefox:

firefox
 

• Google Chrome: Browser populer dari Google.

Instalasi Google Chrome:

1. Unduh Paket DEB:

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    

2. Instalasi Paket:

sudo apt install ./google-chrome-stable_current_amd64.deb
    

3. Jalankan Chrome:

google-chrome

5. Contoh Praktik

Setelah alat-alat di atas terinstal, Anda dapat membuat file HTML dan CSS untuk mempraktikkan konsep yang telah dipelajari.

Langkah-langkah:

1. Buat Folder Proyek:

mkdir proyek-css
cd proyek-css
  

2. Buat File HTML (`index.html`):

 <!DOCTYPE html>
 <html lang="id">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Belajar CSS</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <h1 class="judul">Selamat Datang</h1>
   <p id="paragraf1">Ini adalah contoh paragraf pertama.</p>
   <p class="highlight">Paragraf ini disorot dengan latar belakang kuning.</p>
 </body>
 </html>

3. Buat File CSS (`style.css`):

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.judul {
  color: blue;
  text-align: center;
}

#paragraf1 {
  font-size: 18px;
}

.highlight {
  background-color: yellow;
}

Pranala Menarik

• Web Programming