MAKALAH PEMROGRAMAN WEB

TENTANG CSS (CASCADING STYLE SHEETS)

DISUSUN OLEH :
NAMA
NIM
KELAS
PRODI
SEMESTER
MATA KULIAH
DOSEN PENGAMPU

: Sarifudin
: 1400018104
:B
: Teknik Informatika
:2
: Pemrograman Web
: Fiftin Noviyanto, ST.M,Eng.

UNIVERSITAS AHMAD DAHLAN

FAKULTAS TEKNOLOGI INDUSTRI
TAHUN AJARAN 2014/2015
1

DAFTAR ISI
BAB 1 PENDAHULUAN ......................................................................... 3
A.Latar Belakang ............................................................................................... 3
B. Rumusan Masalah ......................................................................................... 3
C. Tujuan ........................................................................................................... 3

BAB 1 PEMBAHASAN ............................................................................ 3

A. Pengertian CSS ............................................................................................. 3
B. Syntax ........................................................................................................... 4
C. Implementasi CSS ........................................................................................ 5
D. Struktur CSS ................................................................................................. 6
E. Cara Kerja CSS ............................................................................................. 7
F. Class dan Id Selector ..................................................................................... 9
G. Contoh Programnya ...................................................................................... 10
BAB III PENUTUP ............................................................................................ 10
A. Kesimpulan .................................................................................................... 11
B. Saran ............................................................................................................... 11
DAFTAR PUSTAKA ......................................................................................... 11

BAB I
PENDAHULUAN
A. Latar Belakang
Perkembangan dunia informatika memang selalu mengalami peningkatan yang sangat pesat.
Hal ini terbukti dengan adanya pengguna internet di berbagai bidang. Mengingat pentingnya
dunia internet, para programmer berusaha membuat dan mendesain program-program dan
aplikasi yang dibutuhkan saat melakukan browsing internet. Hal ini yang menjadi dasar kami
menyusun makalah ini. Namun dari sekian pemrograman yang ada, yang akan dibahas adalah
mengenai pemrograman tentang CSS
B.
1.
2.
3.
4.

Rumusan Masalah
Pengertian CSS
Bagaimana struktur dasar CSS ?
Apa saja elemen dasar CSS ?
Bagaimana cara kerja CSS ?

C.
1.
2.
3.
4.

Tujuan
Supaya kita mengetahui apa itu CSS
Supaya kita mengetahui struktur CSS
Supaya kita mengetahui elemen dasar CSS
Supaya kita mengetahui cara kerja CSS

BAB II
PEMBAHASAN
A. Pengertian CSS
Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu
artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain
yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS
adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format /
tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS
Jika anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ketrebuchet, anda harus
merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup
merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadangkadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser
yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan
3

menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web
anda terlihat baik di semua browser.

B. SYNTAX
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki:
1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Contoh di atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1ke
warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah,
maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type
font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan
property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus
kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan
mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
4

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi
catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala
teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai
catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
C. IMPLEMENTASI CSS
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:
1. Inline CSS.
2. Embed atau memasang kode css ke dalam bagian <head>.
3. Nge link ke external CSS.
4. Import CSS file.
Mari kita bahas satu per-satu.
1) Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak
memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=color:blue>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warnabiru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada
elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntaxproperty:
value.
2) Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS
dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat
menggunakan font berwarna biru.
3) External CSS
5

1.
2.
3.
4.

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu
perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara
ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web
anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css,
lalu tuliskan kode-kode css di dalam file tersebut.
p {font-family: arial; font-size: small;}
h1 {color: red; }
Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=stylesheet href=style.css type=text/css>
</head>

4) Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode
yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat
elemen H1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, textalign=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini,
internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
D. STRUKTUR CSS
6

Struktur CSS sangatlah sederhana. Bayangkan, kita hanya perlu menyusun 3 jenis elemen,
yaitu selector, property, dan value. Selector adalah semua pengenal yang digunakan untuk
memilih (select) elemen mana saja dalam kode HTML yang ingin kita atur style-nya. Dengan
kata lain, selector menunjukkan objek apa yang akan diatur style-nya. Properti adalah atribut dari
objek tersebut, sedangkan value adalah nilai atributnya.
Secara sederhana bisa dituliskan sebagai berikut:
selector { property: value }
Berikut beberapa contoh penggunaannya:
1.
Penggunaan pada sebuah elemen (tag HTML)
h1 { color: red }
h1 -> selector berupa tag HTML
color -> property
red -> value
2.
Beberapa selector dipisahkan dengan koma (,)
h1,h2,h3 { color: red }
3.
Memilih tag dalam tag pisahkan dengan spasi
div p { background-color:yellow; }
Contoh di atas berarti memilih tag p yang ada di dalam tag div.
4.
Beberapa property dipisahkan dengan titik koma (;)
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
5.
Selector class dimulai dengan tanda titik (.)
6. .intro{
7. background-color:yellow;
}
Class pada tag HTML tertentu
p.hometown {
background-color:yellow;
}
8.
Selector id diawali dengan tanda pagar (#)
9. #firstname {
10. background-color:yellow;
}
11.
Memilih semua elemen HTML, gunakan tanda bintang/asterisk (*)
* { background-color:yellow; }
Jika diterapkan pada semua tag, menjadi seperti ini
div * {
background-color:yellow;
}
E. CARA KERJA CSS
Bagaimana cara CSS bekerja?
Dalam pelajaran ini anda akan belajar bagaimana membuat style sheet pertama Anda. Anda akan
mengenal tentang model CSS dasar dan kode yang diperlukan untuk menggunakan CSS dalam
dokumen HTML.
7

Banyak sifat yang digunakan dalam Cascading Style Sheets (CSS) yang mirip dengan HTML.
Jadi, jika Anda terbiasa menggunakan HTML untuk tata letak, Anda kemungkinan besar akan
banyak mengenali kode. Mari kita lihat contoh konkret.
Sintaks dasar CSS
Katakanlah kita ingin warna merah yang bagus sebagai latar belakang halaman Web:
Menggunakan HTML kita bisa melakukannya seperti ini:
<body bgcolor="#FF0000">
Dengan CSS hasil yang sama dapat dicapai seperti ini:
body {background-color: #FF0000;}
Seperti yang akan Anda perhatikan, kode ini kurang lebih sama untuk HTML dan CSS.
Contoh di atas juga menunjukkan model CSS mendasar. Tapi mana Anda meletakkan kode CSS?
Ini adalah apa yang kita akan pergi ke sekarang.
Menerapkan CSS untuk suatu dokumen HTML
Ada tiga cara yang dapat diterapkan CSS untuk suatu dokumen HTML. Metode ini semua
dijelaskan di bawah ini. Kami sarankan Anda fokus pada Metode ketiga yaitu eksternal.
Metode 1: In-line (gaya atribut)
Salah satu cara untuk menerapkan CSS untuk HTML adalah dengan menggunakan gaya
atribut HTML. Bangunan pada contoh di atas dengan warna latar belakang merah, dapat
diterapkan seperti ini: <html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Metode 2: Internal (gaya tag)
Cara lain adalah dengan memasukkan kode CSS menggunakan <style> tag HTML.
Sebagai contoh seperti ini: <html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Metode 3: Eksternal (link ke style sheet)
Metode yang disarankan adalah link ke style sheet disebut eksternal. Sepanjang tutorial
ini kita akan menggunakan metode ini dalam semua contoh kami.
8

Sebuah style sheet eksternal hanyalah sebuah file teks dengan ekstensi. Css. Seperti file
lain, Anda dapat menempatkan style sheet pada server Web Anda atau hard disk. Sebagai
contoh, katakanlah style sheet Anda bernama style.css dan terletak dalam folder bernama gaya.
Caranya adalah dengan membuat link dari dokumen HTML (default.htm) ke style sheet
(style.css). link tersebut dapat dibuat dengan satu baris kode HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Perhatikan bagaimana jalan untuk style sheet kita diindikasikan menggunakan atribut href.
Baris kode harus dimasukkan di bagian header dari kode HTML yaitu antara <head> dan
tag </ head>. Seperti ini:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Link ini memberitahu browser bahwa itu harus menggunakan tata letak dari file CSS ketika
menampilkan file HTML.
Hal yang benar-benar cerdas adalah bahwa beberapa dokumen HTML dapat dihubungkan
dengan style sheet yang sama. Dengan kata lain, satu file CSS dapat digunakan untuk
mengontrol tata letak dokumen HTML banyak.
Teknik ini dapat menghemat banyak pekerjaan. Jika Anda, misalnya, ingin mengubah
warna latar belakang dari sebuah website dengan 100 halaman, sebuah style sheet dapat
menyelamatkan Anda dari keharusan untuk mengubah secara manual semua 100 dokumen
HTML. Menggunakan CSS, perubahan dapat dibuat dalam beberapa detik hanya dengan
mengubah satu kode pada style sheet pusat.
F. Class dan Id selector
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu
kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di
luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan
tag </div>.
Contoh:
Penulisan kode CSS:
tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
9

<p>Teks tengah akan berwarna merah.</p>

<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
Fungsi CLASS :
1.

Class digunakan untuk menentukan style pada sekelompok element

2.
Class biasanya terdapat di dalam selector ID
3.
Class memungkinkan kalian untuk menetapkan style tertentu untuk setiap
element html dengan banyak class yang sama .
4.
Class di lambangkan dengan simbol "." ( titik )
5.
lihat contoh di bawah untuk lebih jelasnya :
ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk
memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk
memformat bagian menu / sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar
kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag</div>.
Fungsi ID :

1.

ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak elementelement lain di dalamnya.
2.
ID di lambangkan dengan simbol "#" ( pager )
3.
ID di tulis ke html / body dengan style "<div
4.
id="nama_selector_anda">" dan di tutup dengan kode </div>
5.
contoh singkat ID
G. Contoh Programnya
Contoh coding dan Outputnya

10

11

BAB III
PENUTUP
A. Kesimpulan
Perkembangan dunia informatika yang semakin canggih pada saat ini menawarkan
kemudahan bagi setiap orang dalam membantu menyelesaikan segala kebutuhan dan
pekerjaannya.Internet sebagai salah satu bukti nyata dengan adanya perkembangan ini .Maka
dari itu,para programmer berusaha untuk merancang beberapa pemrograman di internet .CSS
adalah salah satu unsur penting dalam pemrograman di internet.
Untuk itu para perogrammer,khususnya pemula yang ingin membuat CSS yang
baik,sebaiknya sebelum membuat CSS harus mengetahui tentang pengertian CSS ,struktur dasar
CSS, kode-kode CSS, elemen dasar CSS, langkah pembuat halaman CSS.
Dan seperti yang telah disampaikan sebelumnya, selain itu ia juga harus menguasai langkahlangkah atau cara-cara membuat dan mendesain CSS sehingga tampilannya bagus dan menarik
yang akan diberikan kepada pengguna nantinya.
B. Saran
Semoga makalah yang telah disusun ini dapat menjadi pedoman bagi pemula sebelum
membuat CSS. Jangan pernah puas hanya karena mendaptkan ilmu yang baru satu bab kita tahu,
teruslah belajar dan berusah. SEMANGAT !

DAFTAR PUSTAKA
http://cssdanhtm.blogspot.com/
http://w3function.com/blog/index.php?p=det&idn=31
http://wisnau.wordpress.com/2012/02/28/struktur-css/
http://rumahpintar-kembar.com/2012/06/17/cara-penggunaan-css-pada-web/

12

13