Lingkar Belajar Mahasiswa

Himpunan Mahasiswa Teknik Informatika UHO

MODUL PEMBELAJARAN
PEMROGRAMAN WEB
PENGENALAN CSS BESERTA PENGGUNAANNYA

Pemateri
Muhammad Ijlal Prayoga
 Pengenalan Cascading Style Sheet (CSS)

Beserta Penggunaannya

1. Pengenalan Dasar CSS

Secara istilah, CSS adalah bahasa penulisan yang digunakan
untuk mendeskripsikan penampilan sebuah dokumen markup. CSS
selalu digunakan bersamaan dengan HTML, meskipun kita dapat juga
menggunakannya untuk mengatur style dokumen markup lain seperti XML, SVG
dan XUL. HTML dirancang tidak ditujukan untuk mendesain sebuah halaman
web, tapi hanya untuk menampilkan konten saja. Pada saat HTML beranjak ke
versi 3.2, diperkenalkan tag yang digunakan untuk mengatur tampilan sebuah
teks, seperti jenis font yang digunakan, warna, dan ukuran.

CSS biasanya disimpan di dalam sebuah file berekstensi .css dan

disematkan di dalam dokumen HTML untuk memberikan style pada halaman
tersebut. Meski demikian, kita tetap dapat menambahkan sintaks CSS langsung
di dalam dokumen HTML, di dalam tag untuk mengakomodir penerapan style
yang hanya digunakan di dalam dokumen tersebut. Kita juga dapat menyematkan
sintaks CSS langsung di dalam atribut style pada suatu tag HTML untuk
menerapkan style yang hanya digunakan pada tag itu saja.
2. Penggunaan CSS

File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan
kedalam file HTML atau PHP yang ingin kita design dengan CSS menggunakan
syntax berikut ini.

dengan tag link seperti di atas di gunakan untuk menghubungkan file html dengan
file css. syntax di atas di letakkan pada file html. pada atribut rel dan type di
tag link di atas di gunakan untuk mendefinisikan bahwa yang di panggil atau yang
di hubungkan adalah file Style sheet atau css. kemudian atribut href di gunakan
untuk meletakkan letak file css. pada contoh di atas file style.css terletak satu
folder atau direktori dengan file html yang di tambahkan syntax di atas.

jika file css terletak di luar folder maka bisa menghubungkanya dengan :

jika file css terletak dalam sebuah folder. katakan saja nama foldernya adalah
” assets “. maka untuk menghubungkannya :
2.1 Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan
kita atur. Contohnya:

Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna

teks red (merah).

Selektor dapat berupa nama tag, class, id, dan atribut.

Contoh:
2.2 Blok Deklarasi
Blok deklarasi adalah tempat kita menuliskan atribut-atibut CSS
yang akan diberikan ke pada selektor. Contoh:

Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px.
Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup
dengan }.

2.3 Properti dan Nilainya

Properti merupakan atribut atau sekumpulan aturan yang akan

diberikan kepada elemen yang dipilih.

Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya
terdapat satu properti, boleh tidak menggunakan titik koma. Properti
harus ditulis di dalam blok deklarasi. Contoh: