Scribd
Unggah
15 tayangan

Modul Css

Diunggah oleh

riya.ummusakha
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
15 tayangan

Modul Css

Diunggah oleh

riya.ummusakha
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

MATERI II

CASCADING STYLE SHEETS (CSS)


I. KONSEP CSS
Apa itu CSS :
 Feature untuk membuat dynamic HTML.
 Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
 Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan
berwarna biru)
 Support ke semua browser.

Aturan penulisan :
 Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
 Nama property bersifat case sensitive.
color : green;
property : color
value : green

Cara penggunaan CSS :


 External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
 <link, merupakan tag pembuka diakhiri dengan tanda “>”
 rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
 type=“text/css”, file yang dipanggil berupa css
 href=“css_files.css”, alamat dokumen stylesheet yang dipanggil

 Internal Style Sheet


Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>

1
 Inline Style sheet
Contoh Penggunaan :

<HTML>
<HEAD>
<TITLE>centranet</TITLE>

</HEAD>
<BODY style="color: white;
background: green;
font-family : arial;“ >
<H1>ZEFNET</H1>
<P>ZEFNET adalah sebuah web
Developer dan Linux Center
</BODY>
</HTML>

ATURAN PENULISAN PADA CSS


Syntaxis CSS dibagi dalam 3 bagian :

selector {property : value}

dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah

Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;

Cara penulisan yang salah :


FONT-FAMILY : “sans-serif”;
FONT-SIZE : ‘small’;

Cara mendeklarasikan kelompok : (tanda koma serta &)


H1, H2 {color : green};
H3, H4 & H5 {color : red};

Cara menuliskan komentar :


 Menggunakan tanda : /* ….. */
 Menggunakan tanda : <!-- -->

2
BACKGROUND GAMBAR
Properties Value Keterangan
background- url Alamat gambar
image yang dituju
background- repeat Diulang dlm hal
repeat repeat-x Diulang sumbu x
repeat-y Diulang sumbu y
no-repeat Tampil 1 gbr

Background- top left Atas kiri hal


position top center Atas tngh hal
top right Atas kanan hal
center left Tgh kiri hal
center center Pusat hal
center right Tngh kanan hal
bottom left Bwh kiri hal
bottom center Bwh tgh hal
bottom right Bwh kanan hal
x-% y-% Pakai nilai %
x-pos y-pos

FORMAT TEXT PADA WEB

Properties Value Keterangan


Pengaturan warna
color green, dll
Pengaturan Spasi (jrk antar karakter)
letter-spacing Normal Ukrn standar HTML
Length Ukrn panjang
(cm,px)
Perataan Text
text-align left
right
center
justify
text-decoration none Bentuk standar
underline Bergaris bwh
overline Bergaris atas
line-through Text dicoret
blink Text berkedip

Pengaturan text indentasi


text-indent length Dengn cm, px
% Dengan persentase
Pengubahan Bentuk Karakter
text-transform capitalize
uppercase
lowercase
none

3
PENGATURAN FONT

Properties Value Keterangan


Jenis Font
font-family arial, dll
Ukuran Huruf
Font-size Small Kecil
Medium Menengah
Large Besar
Length Besar font (pt,px)
% Persentase
Pengaturan gaya pada font
font-style normal
italic
oblique

Ketebalan huruf
font-weight normal
bold
100 ~ 900

PENGATURAN HYPERLINK & TOMBOL YANG MENARIK

Syntax penulisan pada CSS :


a:link {property : value}

Selector Keterangan
a:link Keadaan awal pemicu link aktif
a:visited Keadaan pemicu link setelah
dikunjungi
a:active Keadaan pemicu yang sedang aktif
a:hover Kejadian pada pemicu link saat mouse
digerakkan diatasnya

4
5

Anda mungkin juga menyukai