PW1-Pertemuan 3 - Lestari

Pemrograman Web 1
PG065- 3
© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur

Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260
Website: http://fti.bl.ac.id Email: sekretariat_fti@bl.ac.id
PERTEMUAN - 3
CSS
FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 2

Pengenalan CSS
 CSS Singkatan dari Cascading Style Sheets
 CSS kumpulan kode program yang digunakan untuk
mendesain atau mempercantik tampilan halaman
HTML
 Dengan menggunakan CSS, kita bisa memisahkan
antara struktur dan tampilan sebuah halaman web.
 CSS mengatur tampilan/presentasi visual,
sementara HTML/XHTML mengatur
struktur/content dari halaman web.
Menambahkan CSS ke HTML
 Ada 3 cara untuk menambahkan CSS ke dalam

dokumen HTML :
 Inline Style
 Internal Style Sheets
 External Style Sheets
Inline Style
 Metode Inline Style adalah cara menginput
kode CSS langsung ke dalam tag HTML dengan
menggunakan atribut style
Internal Style Sheets
 Digunakan untuk memisahkan kode CSS dari tag
HTML namun tetap dalam satu halaman HTML
 Atribut style yang sebelumnya berada di dalam
tag, dikumpulkan pada pada sebuah tag <style>
 Tag style ini harus berada pada bagian <head>
dari halaman HTML.
 Ditulis di dalam <head>..</head> dengan
menambahkan <style type=’text/css’>…</style>
atau <style>…</style>
External Style Sheets
 Aturan CSS dibuat dalam sebuah file terpisah
dengan ekstension .css.
 Dengan cara ini semua file dalam sebuah
website bisa menggunakan 1 file CSS yang
sama.
FAKULTAS TEKNOLOGI INFORMASI 9
Contoh inline,internal dan eksternal stytle
belajar.css
Hasil
Pengertian Selector, Property dan Value pada CSS
 Selector : Suatu cara untuk menghubungkan

kode css dengan tag HTML
 Property : Elemen apa yang akan di ubah dari
sebuah tag HTML
 Value : Nilai dari property
Aturan Penulisan
CSS

Jenis-jenis Selector
 Class Selector
 ID Selector
 GROUP Selector

Class Selector
 Class Selector akan ‘mencari’ seluruh tag yang
memiliki atribut class dengan nilai yang sesuai.
 Penamaan Class Selector diawali dengan tanda titik
(.) contoh :
 Untuk menggunakannya, tambahkan atribut
class=‘NAMASELECTOR’ pada tag HTML yang
diinginkan, contoh :
<p class="paragraf_pertama"> Ini adalah sebuah paragraf
pertama</p>
 Sebuah nama class dapat dimiliki oleh lebih dari 1
tag, dan dalam sebuah tag dapat memiliki lebih dari
1 class.
Contoh class selector


<!DOCTYPE html>
<html>
<head>
<meta charset=nutf-8">
<title>class selector</title>
<style type= 'text/css'>
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px;
}
.penting {
color:green;
font-size:40px;
}
</style>
</head>
<body>
<p class="paragraf_pertama"> Ini adalah sebuah paragraf pertama</p>
<p> Ini adalah sebuah paragraf kedua</p>
<h1 class="judul">Judul Artikel</h1>
<h2 class="judul penting ">Sub Judul Artikel</h2>
<h2> h2 tanpa class selector</p>
</body>
</html> 19
ID Selector
 Penamaan id Selector diawali dengan tanda #
 Untuk menggunakannya, tambahkan atribut
id=‘NAMASELECTOR’ pada tag HTML yang
diinginkan
Group Selector
 Memberikan aturan yang sama untuk
beberapa element sekaligus
 Menuliskan beberapa selector sekaligus
dengan tanda koma (,) sebagai pemisah.
 Contoh
 h1, h2, h3, h4, h5, h6{ color:red;}
Beberapa contoh Property
 Background
 Text
 Font

CSS Background Properties (1)
Property Description Values
background Property yang digunakan untuk background-color
menyeting semua background background-image
property dalam sebuah deklarasi background-repeat
saja. background-attachment
background-position
background- Menentukan apakah background scroll
attachment gambar posisinya fixed(tetap) atau fixed
scroll
background- Menentukan warna background color-rgb
color color-hex
color-name
transparent
background- menentukan gambar sebagai url(‘namafilegambar’)
image background none
CSS Background Properties (2)
background-repeat Menentukan bagaimana repeat
background gambar akan repeat-x
ditampilkan secara berulang repeat-y
no-repeat
background-position Menentukan posisi background top left
yang berupa gambar top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
CSS Text Properties (1)

color Menentukan warna text color-hex
color-name
letter-spacing Menentukan jarak spasi antar normal
huruf length unit (px,cm,em)
text-align Perataan text dalam sebuah left
element right
center
justify
text-decoration Menambahkan dekorasi ke dalam none
text underline
overline
line-through
blink
text-indent Memberikan indent pada baris Length unit (px,cm,em)
pertama %
CSS Text Properties (2)
text-transform Menentukan bentuk huruf none
capitalize
uppercase
lowercase
word-spacing Menentukan jarak spasi antar kata normal
length unit (px,cm,em)
Contoh penggunaan selector

Hasil

CSS Font Properties (1)
Font Sebuah property singkat untuk font-style
menyeting semua properti untuk font-variant
font dalam sebuah deklarasi font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Menentukan jenis huruf family-name
generic-family
font-weight Menentukan ketebalan huruf normal
bold
bolder
lighter
CSS Font Properties (2)
font-size Menentukan ukuran huruf xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-style Menentukan style huruf normal
italic
oblique
Contoh
Silakan di copy paste

<html>
<head><title>Pengaturan font dengan css</title>
<style type= 'text/css'>
.tebel{font-weight :bold; font-size:20px; 7}
.miring{font-style:italic; font-family :arial; 10}
.title{font-size :30px; color :red; }
.isi{color:blue; font-family:tahoma; 16}
</style>
</head>
<body>
<p class= 'title' >Selamat datang</p>
<p class= 'isi' >terima kasih anda telah mengunjungi <span class='tebel'
>website saya</span>website ini merupakan <span class='miring'>website
pribadi</span></p>
</body>
</html>

Hasil
CSS List Properties

list-style Digunakan untuk menentukan list-style-type
semua list properties sekaligus. list-style-position
list-style-image
list-style-image Menetapkan image sebagai none
penanda list url (‘namafilegambar’)
list-style-position Menentukan tempat penanda list inside
item outside
list-style-type Menentukan tipe penanda list item none, disc, circle, square,
decimal, decimal-leading-
zero, lower-roman, upper-
roman, lower-alpha, upper-
alpha, lower-greek, lower-
latin, upper-latin
CSS Styling Links Properties (1)
 Digunakan untuk memberikan style pada link yang ada di
halaman website.
 Link bisa diatur menggunakan CSS property.
 Ada 4 state property yang bisa digunakan, yaitu
Property Description
a:link Kondisi Link normal, belum dikunjungi
a:visited Kondisi Link yang sudah pernah dikunjungi
a:hover Kondisi ketika kursor melewati link
a:active Kondisi link ketika sedang diklik

Contoh CSS List (list.html)
Contoh CSS List (list.css)

<html>
<head>
<title>membuat list dengan css</title>
<link rel='stylesheet' type= 'text/css' href= 'list.css'>
</head>
<body>
<ul class= 'list1'>
<li><a href= 'http://fti.budiluhur.ac.id'>FTI</a></li>
<li>FE</li>
<li>FIKOM</li>
<li>FT</li>
<li>FISIP</li>
<li>ASTRI</li>
</ul>
<ul class= 'list2'>
<li><a href='http://fti.budiluhur.ac.id'>FTI</a></li>
<li>FE</li>
<li>FIKOM</li>
<li><a href='http://ft.budiluhur.ac.id'>FT</a></li>
<li>FISIP</li>
<li>ASTRI</li>
</ul>
</body>
</html> 39
Hasil list.html
CSS Box Model (1)
 Box model merupakan konsep dasar CSS.
 Berdasarkan box model, setiap element dalam dokumen
menghasilkan kotak (box) yang mempunyai property width,
height, padding, border dan margin.
 Komponen kotak tersebut bisa digambarkan sbb:
CSS Box Model (1)
 Margin : Spasi dari sebuah element dengan element

lain di sekelilingnya, margin selalu bersifat transparan.
 Border : Garis tepi pembatas element. Kita bisa
mengatur berbagai hal tentang border, seperti
ketebalan, warna, dan jenis garis yang digunakan
 Padding : Jarak antara konten dengan garis tepi
(border)
 Content : Isi web berupa text dan gambar ditampilkan.
Kita bisa mengatur lebar dan tinggi konten ini
menggunakan property width dan height.
Width, Height, Overflow Property (1)

width Digunakan untuk menentukan lebar content area px
%
auto
height Digunakan untuk menentukan tinggi content area px
%
auto
max-width Digunakan untuk menentukan lebar maksimum px
content area %
auto
max-width Digunakan untuk menentukan lebar maksimum px
content area %
auto
Width, Height, Overflow Property (2)

max-height Digunakan untuk menentukan tinggi maksimum content px
area %
auto
min-width Digunakan untuk menentukan lebar minimum content px
area %
auto
min-height Digunakan untuk menentukan tinggi minimum content px
%
auto
overflow Digunakan untuk menentukan apa yang harus dilakukan visible
terhadap content jika sebuah element ukurannya lebih hidden
kecil dibandingkan contentnya scroll
auto
Contoh (box1.html)
Hasil (box1.html)
Padding Property
padding Menentukan empat padding sebuah padding-top
elemen (atas, kanan, bawah, kiri) padding-right
sekaligus padding-bottom
padding-left
padding-LOCATION Menentukan padding LOCATION length
sebuah elemen %
Note : LOCATION bisa berisi top, bottom, left, right

Contoh (box2.html)
Silakan copy paste
<html>
<head>
<title>CSS Box Model</title>
<style type='text/css'>
div.tiga{ text-align:justify;
background :lightgreen; padding-top :20px;
padding-right:100px;
padding-bottom :25px;
padding-left:5px;
}
</style>
</head>
<body>
<div class= 'tiga'>
cerdas berbudi luhur adalah dua hal yang tidak terpisahkan, kecerdasan tanpa dilandasi budi luhur akan
cenderung digunakan untuk membodohi dan mencelakakan orang lain, sebaliknya budi luhur tanpa diimbangi
kecerdasan akan merupakan sasaran kejahatan dan penindasan orang lain.
</div>
</body>
</html>
49
Hasil (box2.html)
Border Property (1)
border Digunakan untuk menentukan property border-width
border(atas, kiri, kanan, bawah) dalam border-style
satu deklarasi saja border-color
border-color Menentukan warna keempat border color
border-style Menentukan style dari keempat None / hidden / dotted
border sekaligus / dashed / solid /
double / groove / ridge
/inset / outset
border-width Menentukan ukuran dari keempat thin /

border sekaligus
medium / thick
length
Border Property (2)

border-LOCATION Digunakan untuk menentukan border-bottom-width
property border bagian LOCATION border-style
dalam satu deklarasi saja border-color
border-LOCATION-color Menentukan warna border LOCATION border-color
border-LOCATION-style Menentukan style border bawah border-style
border-LOCATION-width Menentukan lebar border bawah Thin / medium / thick
length

Contoh (box3.html)
Hasil (box3.html)
Margin Property

margin Mengatur margin properti untuk kempat sisi margin-top
(atas, kanan, bawah, kiri) sekaligus margin-right
margin-bottom
margin-left
margin-LOCATION Mengatur margin location auto

length
%

Contoh (box4.html)
Hasil (box4.html)
Latihan : Buat HTML dan CSS nya
58

PW1-Pertemuan 3 - Lestari

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PW1-Pertemuan 3 - Lestari

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Web 1

© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 2

 Ada 3 cara untuk menambahkan CSS ke dalam

 Selector : Suatu cara untuk menghubungkan

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 15

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 16

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 18

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 23

Property Description Values

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 28

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 29

FAKULTAS TEKNOLOGI INFORMASI PEMROGRAMAN WEB 1 – PG065- 3 33

Property Description Values

a:link Kondisi Link normal, belum dikunjungi

a:visited Kondisi Link yang sudah pernah dikunjungi

a:hover Kondisi ketika kursor melewati link

a:active Kondisi link ketika sedang diklik

 Margin : Spasi dari sebuah element dengan element

Property Description Values

Property Description Values

Note : LOCATION bisa berisi top, bottom, left, right

border-width Menentukan ukuran dari keempat thin /

Property Description Values

Note : LOCATION bisa berisi top, bottom, left, right

Property Description Values

margin-LOCATION Mengatur margin location auto

Note : LOCATION bisa berisi top, bottom, left, right

Anda mungkin juga menyukai