MODUL II

Tujuan :
➢ Mahasiswa mampu menjelaskan mengenai pengenalan CSS, Selector, Komentar,
dan Mekanisme membuat perintah-perintah CSS PHP.
➢ Mahasiswa mengetahui jenis-jenis CSS
➢ Mahasiswa mampu menggunakan CSS untuk memformat atau membuat halaman
web terlihat lebih menarik

Tugas Pendahuluan :
1. Apa yang anda ketahui tentang CSS Layout, Jelaskan deskripsi tentang
masing-masing atribut pada CSS Layout!
2. Apa yang anda ketahui tentang CSS Layout, Jelaskan deskripsi tentang
masing-masing atribut pada CSS Layout!

3. Jelaskan apa yang anda ketahui tentang list-style-position?

MATERI
A. CSS (Cascading Style Sheet)
CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa pemrograman untuk
mengontrol tampilan dan gaya halaman web. Dengan CSS dapat digunakan mengatur warna,
ukuran, jenis huruf, jarak antar elemen, tata letak, dan atribut tampilan lainnya dari elemen
HTML.
1.1 Jenis Penempatan CSS
1. Eksternal CSS
Pada metode eksternal, kode CSS dibuat menjadi sebuah file dengan format .css. URL file ini
nantinya akan di-link dengan menggunakan elemen HTML link yang ditempatkan di
bagian head (baris ke-5 pada kode di bawah). Metode inilah yang kita gunakan pada prosedur
penambahan CSS di atas.
Contoh :
 2. Internal CSS
Pada metode internal, kode CSS langsung didefinisikan pada dokumen HTML.
Konfigurasi diletakkan didalam elemen HTML style dan menempatkannya pada
bagian head (baris 5-10 pada kode di bawah).
Contoh :

3. Inline CSS
Pada metode inline, konfigurasi CSS langsung ditempatkan pada elemen yang
bersangkutan melalui atribut style (baris ke-8 pada kode di bawah).
Contoh :

1.2 CSS Selector

CSS selektor adalah bagian dari deklarasi CSS yang mendefinisikan tentang elemen
mana yang akan diatur. Di dalam style didefinisikan bagaimana setiap selector akan
bekerja (font, color dan lain-lain.). Kemudian di dalam bagian body halaman web,
selector tersebut dipanggil untuk mengaktifkan style yang telah didefinisikan.
Jenis – jenis selector:
 a. Selector berdasarkan Nama Elemen
Digunakan untuk mendefinisikan style yang berhubungan dengan tag
HTML,melakukan redefinisi tag normal HTML
Syntax:

b. Selector berdasarkan Class

Digunakan untuk mendefinisikan style yang dapat dipakai tanpa melakukan
redefinisi tag HTML.
Syntax:

c. Selector berdasarkan ID
Digunakan untuk mendefinisikan style yang berhubungan dengan suatu
objectmemanfaatkan ID unik, biasa digunakan saat bekerja dengan layer.
Syntax:

1.3 Elemen Elemen CSS

1. Font
Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini mempunyai
beberapa properti. Satu properti dapat mempunyai beberapa nilai.
2. Text
Element text akan membuat tampilan teks menjadi lebih menarik
 3. Color
Elemen color yang digunakan untuk mengatur warna teks dan background halaman
web

4. Link
Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari satu
bagian ke bagian lain, dari satu halaman ke halaman lain bahkan dari satu situs ke
situs lainnya. CSS menyediakan elemen link yang dapat digunakan untuk mengatur
perilaku link.
1.4 CSS Image
CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html.
Elemenini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa
nilai.
Tabel 1.4.1. Property dan value CSS yang mendukung format Gambar
Attribute Values
background Color
size
percentage pos-key-term url
repeat repeat-x repeat-y
no-repeat fixed

scroll
background-attachment Fixed

Scroll
background-color Color

none
background-image url
background-position Size
percentage pos-key-term
background-repeat repeat
repeat-x
repeat-y
no-repeat
border Solid double
groove
dotted
dashed inset
outset ridge
hidden four-
sides
width-key-term
border-bottom size
color
width-key-term
border-bottom-color Color
border-bottom-style solid
 double
groove
dotted
dashed
inset
outset
ridge
hidden
border-bottom-width size
width-key-term
border-color Color
border-left size
color
width-key-term
border-left-color Color
border-left-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
border-left-width size
width-key-term
border-right size
color
width-key-term
border-right-color Color
border-right-style solid
double
groove
 dotted
dashed
inset
outset
ridge
hidden
border-right-width size
width-key-term
border-style solid double
groove
dotted
dashed inset
outset ridge
hidden four-
sides
width-key-term
border-top size
color
width-key-term
border-top-color Color
border-top-style solid
double
groove
dotted
dashed
inset
outset
ridge
hidden
border-top-width size
width-key-term
border-width size
width-key-term
 clear Left
right
both
color Color
display block
inline
float Left
right

TUGAS MODUL CSS

1. Buat halaman web yang berisikan yang memuat tentang CSS Image, CSS Navigasi,
CSSLayout dan CSS Dropdown, sesuai dengan apa yang telah dipelajari pada modul 3
ini. Contoh tampilan adalah seperti ini: