CSS Itu Apa? Yuk Percantik Halaman HTML Kita

HTML Sudah Bekerja, Kenapa Kita Butuh CSS?#

Di project sebelumnya kita punya heading seperti:

1
<h1>BapakGabut</h1>

HTML memberi tahu browser bahwa:

Ini adalah heading utama halaman.

Makna tersebut sudah benar.

Tapi bagaimana kalau kita ingin heading itu memiliki warna tertentu?

Atau kita ingin:

• background header berbeda;
• font halaman berubah;
• navigasi tidak menggunakan tampilan link bawaan browser;
• konten memiliki ruang dari tepi halaman?

Kita ingin mengubah cara halaman ditampilkan, bukan mengganti makna elemen HTML-nya.

Di sinilah CSS mulai mengambil peran.

Secara sederhana:

1
HTML
2
↓
3
struktur dan makna halaman
4

5
CSS
6
↓
7
presentasi dan tampilan halaman

Misalnya HTML:

1
<h1>BapakGabut</h1>

Kemudian kita punya CSS:

1
h1 {
2
  color: blue;
3
}

Elemen tersebut tetap sebuah <h1>.

Yang berubah adalah tampilannya.

Sekarang teksnya berwarna biru.

CSS Itu Apa?#

CSS adalah singkatan dari:

Cascading Style Sheets.

Namanya terdengar cukup serius untuk sesuatu yang sebentar lagi kita gunakan mengganti warna background. 😄

CSS adalah bahasa yang digunakan untuk mengatur presentasi dokumen seperti HTML.

Dengan CSS kita nantinya bisa mengatur banyak hal:

1
warna
2
font
3
ukuran
4
jarak
5
border
6
background
7
layout
8
responsive
9
dan masih banyak lagi

Tapi jangan buru-buru.

Kita tidak perlu mempelajari semuanya hari ini.

Target kita jauh lebih sederhana:

Membuat halaman profil HTML kemarin mulai memiliki tampilan yang kita tentukan sendiri.

CSS Bisa Ditulis dengan Beberapa Cara#

Sebelum membuat file CSS, ada satu hal yang perlu kita tahu.

Gabuters mungkin akan menemukan CSS ditulis dengan beberapa cara ketika melihat tutorial atau contoh kode di internet.

1
<h1 style="color: blue;">BapakGabut</h1>

1
<head>
2
  <style>
3
    h1 {
4
      color: blue;
5
    }
6
  </style>
7
</head>

1
index.html
2
style.css

1
index.html

1
style.css

1
style=""

1
<style>

Ambil Lagi Project Halaman Profil Kita#

Buka kembali project dari artikel sebelumnya.

Strukturnya kurang lebih:

1
profil-saya/
2
├── index.html
3
└── foto-profil.jpg

Sekarang buat file baru:

1
style.css

Sehingga menjadi:

1
profil-saya/
2
├── index.html
3
├── style.css
4
└── foto-profil.jpg

Untuk sementara, style.css masih kosong.

Tidak masalah.

Sekarang kita perlu memberi tahu browser bahwa index.html menggunakan file CSS tersebut.

Hubungkan HTML dengan CSS#

Buka:

1
index.html

Di dalam <head>, tambahkan:

1
<link rel="stylesheet" href="style.css">

Sehingga bagian <head> kurang lebih menjadi:

1
<head>
2
  <meta charset="UTF-8">
3
  <meta
4
    name="viewport"
5
    content="width=device-width, initial-scale=1.0"
6
  >
7
  <title>Profil Saya</title>
8
  <link rel="stylesheet" href="style.css">
9
</head>

Perhatikan bagian:

1
href="style.css"

Browser akan mencari file style.css berdasarkan path tersebut.

Karena index.html dan style.css berada di folder yang sama, kita cukup menulis:

1
style.css

Simpan file.

Refresh browser.

Dan…

tidak terjadi apa-apa. 😄

Tenang.

Itu justru benar.

Kita baru menghubungkan CSS ke HTML.

File style.css kita masih kosong.

Sekarang baru kita isi.

CSS Pertama Kita#

Buka:

1
style.css

Lalu tulis:

1
body {
2
  background-color: #f4f4f4;
3
}

Simpan.

Kembali ke browser lalu refresh.

Kalau semuanya benar, background halaman yang sebelumnya putih sekarang menjadi abu-abu muda.

Kelihatannya sederhana.

Tapi perhatikan apa yang baru saja terjadi.

Kita tidak perlu mengubah struktur HTML.

Kita hanya menulis aturan di style.css, lalu browser menggunakan aturan tersebut ketika menampilkan halaman.

Hubungannya kira-kira seperti ini:

1
index.html
2
    │
3
    │ <link>
4
    ▼
5
style.css
6
    │
7
    │ aturan tampilan
8
    ▼
9
Browser

CSS kita sudah bekerja.

Coba Ubah Warna Teks#

Sekarang ubah CSS menjadi:

1
body {
2
  background-color: #f4f4f4;
3
  color: #333333;
4
}

Refresh lagi.

Kita baru menambahkan:

1
color: #333333;

Sekarang coba tambahkan:

1
h1 {
2
  color: #2563eb;
3
}

Simpan dan refresh.

Heading utama berubah warna.

Dari sini kita mulai bisa melihat pola:

1
h1 {
2
  color: #2563eb;
3
}

Untuk sementara, baca saja seperti ini:

1
h1
2
↓
3
bagian yang ingin kita atur
4

5
color
6
↓
7
hal yang ingin kita ubah
8

9
#2563eb
10
↓
11
nilai yang kita berikan

Bagian-bagian tersebut sebenarnya memiliki nama.

Tapi kita akan membahasnya dengan lebih rapi di artikel berikutnya.

Hari ini kita cukup melihat bagaimana CSS bekerja.

Ubah Font Halaman#

Tambahkan pada body:

1
body {
2
  background-color: #f4f4f4;
3
  color: #333333;
4
  font-family: Arial, sans-serif;
5
}

Refresh.

Tampilan teks sekarang mulai berbeda dari font bawaan browser.

Pada:

1
font-family: Arial, sans-serif;

browser akan mencoba menggunakan Arial terlebih dahulu.

Jika Arial tidak tersedia, browser dapat menggunakan font lain dari keluarga sans-serif.

Kita belum perlu masuk terlalu jauh ke typography.

Yang penting sekarang kita sudah melihat bahwa font juga bisa dikontrol dari CSS.

Navigasi Kita Juga Bisa Diubah#

Di halaman profil kita terdapat navigasi:

1
<nav>
2
  <a href="#tentang">Tentang</a>
3
  <a href="#belajar">Sedang Dipelajari</a>
4
  <a href="#kontak">Kontak</a>
5
</nav>

Sekarang tambahkan:

1
nav a {
2
  color: #2563eb;
3
  text-decoration: none;
4
}

Refresh.

Link navigasi tidak lagi menggunakan underline bawaan.

Kita juga menentukan sendiri warnanya.

Perhatikan:

1
nav a

Untuk sekarang cukup baca sebagai:

pilih link <a> yang berada di dalam <nav>.

Kenapa penulisannya seperti itu?

Nanti.

Itulah salah satu hal yang akan kita bongkar di artikel berikutnya.

Beri Warna pada Header#

Sekarang tambahkan:

1
header {
2
  background-color: #2563eb;
3
  color: white;
4
}

Refresh.

Header kita sekarang memiliki background biru.

Tapi mungkin ada sesuatu yang terlihat aneh.

Heading utama sebelumnya juga sudah kita beri warna biru:

1
h1 {
2
  color: #2563eb;
3
}

Biru di atas background biru tentu tidak nyaman dibaca.

Ubah warnanya menjadi putih:

1
h1 {
2
  color: #ffffff;
3
}

Link navigasinya juga masih menggunakan warna yang sebelumnya kita tentukan:

1
nav a {
2
  color: #2563eb;
3
}

Kalau dibiarkan, link-nya ikut menghilang di lautan biru. 😄

Ubah menjadi:

1
nav a {
2
  color: white;
3
  text-decoration: none;
4
}

Refresh lagi.

Sekarang header mulai terasa seperti bagian halaman yang memang kita desain sendiri.

Sedikit Ruang Biar Tidak Sesak#

Teks pada header mungkin masih terlalu dekat dengan tepi.

Tambahkan:

1
header {
2
  background-color: #2563eb;
3
  color: white;
4
  padding: 20px;
5
}

Sekarang isi header memiliki ruang dari tepinya.

Kita baru menggunakan:

1
padding: 20px;

Belum perlu membedah cara kerjanya.

Nanti kita punya pembahasan khusus tentang ukuran dan ruang pada elemen ketika masuk ke box model.

Kalau semuanya kita bahas sekarang, CSS #1 bisa berubah menjadi kitab. 😄

Beri Ruang pada Konten Utama#

Tambahkan:

1
main {
2
  padding: 20px;
3
}

Kemudian:

1
footer {
2
  padding: 20px;
3
  text-align: center;
4
}

Refresh.

Halaman kita mungkin belum terlihat seperti desain profesional.

Memang belum.

Tapi sekarang browser sudah mulai menampilkan halaman berdasarkan keputusan yang kita buat sendiri, bukan hanya style bawaan browser.

CSS kita sejauh ini kurang lebih:

1
body {
2
  background-color: #f4f4f4;
3
  color: #333333;
4
  font-family: Arial, sans-serif;
5
}
6

7
h1 {
8
  color: #ffffff;
9
}
10

11
nav a {
12
  color: white;
13
  text-decoration: none;
14
}
15

16
header {
17
  background-color: #2563eb;
18
  color: white;
19
  padding: 20px;
20
}
21

22
main {
23
  padding: 20px;
24
}
25

26
footer {
27
  padding: 20px;
28
  text-align: center;
29
}

Bandingkan dengan halaman sebelum kita membuat style.css.

Struktur HTML-nya tetap.

Yang mulai berubah adalah presentasinya.

Sekarang Coba Rusakkan CSS-nya#

Yup.

Sengaja. 😄

Coba ubah:

1
background-color: #2563eb;

menjadi:

1
background-color: red;

Refresh.

Bagus?

Belum tentu.

Tapi berubah.

Sekarang coba:

1
font-family: Georgia, serif;

Atau ubah warna heading menjadi sesuatu yang mencolok.

Tujuannya bukan mencari desain terbaik.

Tujuannya membangun kebiasaan:

1
ubah CSS
2
↓
3
simpan
4
↓
5
refresh
6
↓
7
lihat hasilnya

Eksperimen seperti ini penting.

Project latihan adalah tempat yang tepat untuk membuat sesuatu jelek, merusaknya, lalu memperbaikinya lagi.

Kalau CSS Tidak Berubah?#

Gabuters sudah menulis CSS.

Sudah refresh.

Tapi halaman tetap sama.

Jangan langsung menyalahkan browser. 😄

Coba periksa beberapa hal.

Pertama, pastikan nama file benar:

1
style.css

Kedua, pastikan HTML memiliki:

1
<link rel="stylesheet" href="style.css">

Ketiga, periksa lokasi file.

Kalau strukturnya:

1
profil-saya/
2
├── index.html
3
└── css/
4
    └── style.css

maka:

1
href="style.css"

tidak lagi menunjuk ke file yang benar.

Kita perlu menggunakan path yang sesuai, misalnya:

1
<link rel="stylesheet" href="css/style.css">

Dan tentu saja…

pastikan filenya sudah disimpan.

Kelihatannya sepele.

Tapi developer berpengalaman pun bisa menatap layar beberapa menit sebelum sadar:

Oh… belum di-save.

😄

HTML dan CSS Punya Tugas yang Berbeda#

Sekarang kita punya dua file utama.

index.html berisi struktur seperti:

1
<header>
2
  <h1>BapakGabut</h1>
3
</header>

Sedangkan style.css bisa berisi:

1
header {
2
  background-color: #2563eb;
3
  color: white;
4
}

Mulai terlihat pembagian tugasnya:

1
HTML
2
│
3
├── heading
4
├── paragraph
5
├── navigation
6
├── section
7
├── gambar
8
└── form
9

10
CSS
11
│
12
├── warna
13
├── font
14
├── background
15
├── jarak
16
└── layout/presentasi

Ini bukan berarti HTML dan CSS tidak saling berhubungan.

Justru keduanya bekerja bersama.

Tetapi memisahkan struktur/semantik dari aturan presentasi akan membuat project kita jauh lebih mudah dikembangkan.

Apa yang Sudah Kita Pelajari?#

Di artikel pertama CSS ini kita sengaja belum membahas terlalu banyak aturan.

Target kita bukan menghafal daftar property CSS.

Targetnya adalah memahami bagaimana CSS mulai bekerja bersama HTML.

Sekarang kita sudah tahu hubungan:

1
index.html
2
     │
3
     │ <link rel="stylesheet">
4
     ▼
5
style.css
6
     │
7
     ▼
8
mengatur presentasi halaman

Kita juga sudah mencoba beberapa hal seperti:

1
color
2
background-color
3
font-family
4
padding
5
text-align
6
text-decoration

Tidak perlu menghafalnya sekarang.

Yang lebih penting adalah ketika melihat:

1
h1 {
2
  color: blue;
3
}

Gabuters sudah bisa membaca secara kasar:

Sepertinya ini memilih h1, lalu memberi aturan agar warnanya biru.

Nah.

Untuk artikel pertama, itu sudah cukup.

Selanjutnya: CSS Tahu Elemen Mana yang Harus Diubah dari Mana?#

Ada satu pertanyaan yang belum kita jawab.

Tadi kita menulis:

1
h1 {
2
  color: blue;
3
}

Kemudian:

1
header {
2
  background-color: #2563eb;
3
}

Dan:

1
nav a {
2
  color: white;
3
}

Bagaimana CSS tahu elemen mana yang kita maksud?

Bagaimana kalau kita ingin memilih banyak elemen tertentu?

Atau hanya satu bagian tertentu?

Di sinilah kita akan mulai mengenal:

• selector;
• property;
• value;
• class;
• id;
• dan bagaimana sebuah aturan CSS sebenarnya dibaca.

Itulah yang akan kita bahas pada artikel berikutnya.

Untuk sekarang, halaman profil BapakGabut akhirnya mulai punya tampilan yang kita tentukan sendiri.

Dan perjalanan CSS kita baru dimulai.