CSS
advertisement
CSS
CASCADING STYLE SHEET
Alasan Pengembangan CSS
Dikembangkan oleh W3C dengan tujuan
untuk menetapkan standar style yang dapat
diinterpretasikan oleh berbagai jenis browser
Dalam persaingan Netscape dan Microsoft
untuk mendominasi dunia, mereka
menambahkan atribut HTML yang hanya
dikenali oleh browser buatannya sehingga
menyulitkan pengembang web
PENGERTIAN
• CSS adalah standar pembuatan dan pemakaian
style (font, warna, jarak baris, dll) untuk
dokumen web
• CSS memisahkan presentation sebuah
dokumen dari content dokumen itu sendiri
• CSS memudahkan pembuatan dan
pemeliharaan dokumen web
Cascading Style Sheets
perintah yang mampu berjalan diantara tag
HTML
keuntungan css :
menghemat pekerjaan pengaturan web
Aturan CSS
Sintaks :
Selector {Properti : Value}
Selector : elemen HTML
Properti : atribut-atribut HTML
Value
: nilai atribut
Semua elemen HTML dapat menjadi selector
Contoh : h1 {color:#1234AD}
Contoh CSS
<html>
<head><title> - </title>
<style type="text/css">
selector {property :value }
</style>
</head>
<body>
<selector> xxxx </selector>
</body>
</html>
ket :
selector yang di tentukan di dalam tag <head> akan menjadi tag di dalam tag
<body>
Penulisan Selector
1. selector { property : value; }
2. selector { property1 : value1;property2:value2}
3. selector {
property1:value1;
property2:value2;
property3:value3}
4. selector1 { property1 : value1 }
5. selector2 { property1 : value1 }
6. selector1, selector2 & selector3 { property1 : value1 }
Penulisan Komentar
1. menggunakan tanda / diikuti *
contoh : /* penulisan huruf miring */
pada css :
selector {
/* untuk variasi angka */
property1 : value1 }
2. menggunakan tanda < diikuti ! dan tanda -<!-- komentar1 -->
khusus untuk komentar <!-- hanya berlaku
di luar blok css
Penerapan CSS
Terdapat 3 jenis penerapan :
Inline style sheet (dalam elemen HTML)
Internal style sheet (dalam dokumen HTML)
External style sheet (menggunakan file
eksternal)
Jenis kedua dan ketiga dideklarasikan di bagian
HEAD
Inline style sheet
Inline style sheet (dalam elemen HTML)
<p style=“color:green”>
css sebagai inline style
</p>
TIDAKdideklarasikan di bagian HEAD
Internal style sheet
Internal style sheet (dalam dokumen HTML)
Dideklarasikan di bagian HEAD
<html>
<head><title> internal css </title>
<style type=“text/css”>
H1{color:blue}
</style>
</head>
External style sheet
External style sheet (menggunakan file eksternal)
Dideklarasikan di bagian HEAD
<html>
<head><title> external css </title>
<link rel=“stylesheet” type=“text/css”
href=“css/styleku.css”>
</head>
Pengelompokan/Grouping
Untuk menghemat waktu dan mengurangi
jumlah kode, perintah-perintah CSS dapat
dikelompokkan
Pengelompokan selector
Pengelompokan deklarasi
Pengelompokan nilai
Pengelompokan Selector
Pengelompokan selector :
h1,h2,h3 {font-family:arial;color:#123456}
Pengelompokan Deklarasi
Pengelompokan deklarasi :
H1 {font-weight:bold;font-size:14pt}
Pengelompokan Nilai
Pengelompokan nilai :
h1 {font:bold 12pt arial}
Pewarisan/Inheritance
Bila tidak didefinisikan, maka akan
menggunakan style dari induknya
<head>
<style type=“text/css”>
body {color:navy}
h1 {color:lightyellow;font:bold 12pt arial}
H2 {font:bold 12pt arial}
b {text-decoration:underline}
</style>
</head>
Pewarisan/Inheritance
<body>
<h1>Header tingkat 1 ini mendefinisikan warna teksnya
green sehingga tidak mewarisi warna navy
(body)</h1>
<h2>Header tingkat 2 ini tidak mendefinisikan warna
teks maka menggunakan definisi warna induknya
(body)</h2>
<b>Elemen bold ini juga tidak mendefinisikan warna
teksnya sehingga nasibnya sama dengan h2, harus
mewarisi warna teks induknya</b>
</body>
Macam-macam Selector : Class
Selain elemen HTML, selector CSS dapat berupa
Class.
Dengan class, perintah CSS lebih fleksibel, dapat
diterapkan untuk semua elemen HTML dan
membuat beberapa format yang berbeda untuk
suatu elemen.
Deklarasi class diawali dengan tanda titik (‘.’).
Pemakaian class menggunakan atribut ‘class’.
Class dapat menggunakan elemen DIV dalam
pemakaiannya.
Contoh penerapan Class
<style type=“text/css”>
.mhs {color:blue;font-family:arial}
p.berita{font-family:arial;font-style:italic}
</style>
……….
Pemakaian didalam elemen BODY :
<div class=“mhs”>…</div>
<p class=“mhs”>…</p>
<td class=“mhs”>…</td>
<p class=“berita”>…</p>
<div class=“berita”>…</p>
salah!!
<h1 class=“berita”>…</p>
salah!!
Macam-macam Selector : ID
Deklarasi ID menggunakan tanda ‘#’.
Pemakaian ID CSS didalam elemen BODY
menggunakan atribut ‘ID’. Selector jenis ini juga
dapat menggunakan elemen DIV dalam
pemakaiannya. Contoh :
Contoh penerapan ID
<head>
<style type=‘text/css’>
#mhs02{color:red}
</style>
</head>
<body>
<p id=‘mhs02’>Test</p>
<div id=‘mhs02’>Test</id>
</body>
Pseudo Class
Untuk menentukan style yang digunakan jika
elemen HTML dikenai mengalami kejadian
tertentu, misalnya diklik mouse.
Pseudo class anchor (a) :
A:link
A:visited
A:hover
A:active
A:focus
Contoh Pseudo Class
<head>
<style=‘text/css’>
a:link {text-decoration:none}
a:hover {text-decoration:none;color:yellow}
</style>
</head>
<body>
<a href=‘dok.html’>Link 01</a>
</body>
Properties CSS
Properti CSS banyak sekali, dikelompokkan
kedalam beberapa kategori :
Font
Color & Background
Text
List
Box Model
Visual Formatting Model (normal & float)
User Interface & Downloadable Font
Media Types
Visual Effects
Positioning Scheme
Properti CSS
Kategori font :
font-family
font-size
font-style
font-weight
font-variant
font : style variant weight size line-height family
Properti CSS
Kategori color dan background :
color
background-color
background-image
background-repeat
background-attachment
background-position
background : color image repeat attachment
position
Properti CSS
Kategori text :
text-indent
text-align
text-decoration
text-shadow
text-transform
letter-spacing
word-spacing
line-height
white-space
Properti CSS
Kategori list :
list-style-type
list-style-image
list-style-position
list-style : style position image
Properti CSS
Kategori box model :
margin
padding
border
width
height
Properti CSS
Kategori visual formatting model :
display
float
clear
Properti CSS
Kategori user interface dan downloadable font :
cursor
color
Properti CSS
Kategori media type :
screen
print
Properti CSS
Kategori visual effect :
overflow
clip
visibility
Properti CSS
Kategori positioning scheme :
position
z-index
Ukuran Panjang Dalam CSS
1. em -> untuk ukuran pecahan decimal
2. ex -> x-height, untuk menentukan
ukuran yang sifatnya vertikal.
3. px -> pixels, ukuran yang menyesuaikan
pixel monitor.
Ukuran Besar dan Kecil dalam
CSS
1.
2.
3.
4.
5.
in ->inches = 2,54 cm
cm ->centimeters
mm ->millimeters
pt ->point = 1/72 inch
pc ->picas = 12 point
Ukuran yang berhubungan dengan Sudut
1. deg ->degrees (derajad)
2. grad ->grads (gradien)
3. rad ->radians
Ukuran yang berhubungan dengan Waktu
1. ms -> mili seconds
2. s -> seconds
Ukuran yang berhubungan dengan
Frekuensi
1. Hz -> Hertz
2. kHz -> kilo Hertz
Ukuran Presentase
a {font-size : 10pt}
a {line-height : 110%}
bahwa line-height selector a besarnya 110% dari
font size 10pt.
Penggunaan URL dalam CSS
{statement : url("http://alamat file di dalam web")}
contoh :
body {
background-image:url(http://www.yahoo.com/image/logo.jpg)
}
penggunaan color :
body {color :#800}
body {color :#800000}
body {color :rgb(255,0,0)}
body {color :rgb(100%,0%,0%)}
