2 property css (shared)

PROFIL
Nama : Yusra Fernando, S.Kom., M.Kom.
Pendidikan : S1, Teknik Informatika/(Ti) (Teknokrat 2004)
S2, Ilmu Komputer/(Cs) (IPB 2012)
Email : yusra.fernando@teknokrat.ac.id
yusra.fernando@teknokrat.ac.id
Yusra Fernando, M.Kom
CONTACT ME
2

INTRODUCTION TO WEB DEVELOPMENT
UNIVERSITAS TEKNOKRAT INDONESIA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
YUSRA FERNANDO, S.KOM., M.KOM
by:
3

FONT PROPERTIES
 Digunakan untuk merubah jenis huruf, ketebalan,
ukuran dan style pada text.
Property Keterangan Nilai
font-family Menentukan jenis huruf Jenis huruf standar
font-size Menentukan ukuran font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length

FONT PROPERTIES
font-style Mengatur teks agar dimiringkan atau tidak italic
font-weight Menebalkan atau menipiskan teks bold
bolder
lighter
100
200
300
400
500
600
700
800
900

<html>
<head>
<title>Latihan CSS</title>
<style type="text/css">
.judul { font-family: verdana; font-size: 20pt; font-style: italic;
font-weight: bold }
.paragraf { font-family: verdana; font-size: 10pt }
</style>
</head>
<body>
……………….
<div align="center" class="judul">SEKAPUR SIRIH</div>
<p align="justify" class="paragraf">
……………….
</p>
……………….
FONT PROPERTIES

TEXT PROPERTIES
 Digunakan untuk mengontrol segala bentuk dari text,
seperti merubah warna text, menambah atau
mengurangi spasi diantara karakter pada teks, mengatur
peletakkan text, mendekorasi text, indent text pada
baris awal dan lain-lain.
color Untuk mengatur warna teks nama warna
Kode RGB
letter-spacing Menambah atau mengurangi spasi
diantara karakter pada teks
length
text-align Mengatur peletekkan teks left
right
center
justify

TEXT PROPERTIES
text-decoration Mendekorasi teks None
underline
overline
line-through
blink
text-indent Membuat indent teks pada baris
awal
length
text-transform Untuk melakukan konversi
terhadap teks
none
capitalize
uppercase
lowercase

<html>
<head>
.judul { font-family: verdana; font-size: 20pt; font-style: italic;
font-weight:bold; color:#000099; letter-spacing: 5px;
text-align: center; text-decoration: underline }
.paragraf {font-family: verdana; font-size: 10pt; text-indent: 30px}
</style>
</head>
<body>
……………….
<div class="judul">SEKAPUR SIRIH</div>
<p align="justify" class="paragraf">
……………….
</p>
……………….
TEXT PROPERTIES

BACKGROUND PROPERTIES
 Digunakan untuk mengontrol warna latar belakang dari sebuah elemen, set
sebuah gambar menjadi latar belakang, mengulang gambar latar belakang
secara vertikal atau horizontal, dan memposisikan gambar latar belakang
dalam sebuah halaman.
background-color Mengatur warna latar
belakang
nama warna
kode RGB
Transparent
background-image Menset sebuah gambar
menjadi latar belakang
url(nama_file_gambar)

background-repeat Mengatur bagaimana
gambar background
diulang
repeat
repeat-x
repeat-y
no-repeat
background-position Mengatur posisi gambar
latar belakang dalam
sebuah halaman web
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos

<html>
<head>
body {background-image: url(bk.gif)}
</style>
</head>
<body>
……………….
</body>
</html>

MARGIN PROPERTIES
 Digunakan untuk mendefinisikan margin disekitar
elemen spasi.
margin-bottom Mengatur margin bawah
sebuah elemen
Length
%
margin-left Mengatur margin kiri sebuah
elemen
Length
%
margin-right Mengatur margin kanan
sebuah elemen
Length
%
margin-top Mengatur margin atas sebuah
elemen
Length
%

<html>
<head>
body
{
margin-top: 3cm; margin-right: 3cm;
margin-bottom: 3cm; margin-left: 3cm
}
</style>
</head>
<body>
……………….
</body>
</html>
MARGIN PROPERTIES

2 property css (shared)

Recommandé

Recommandé

Contenu connexe

Plus de YUSRA FERNANDO

Plus de YUSRA FERNANDO (20)

Dernier

Dernier (20)

2 property css (shared)