Materi8-CSS full-tutorial-recomend.ppt a

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 --

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>
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
.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.in ->inches = 2,54 cm
2.cm ->centimeters
3.mm ->millimeters
4.pt ->point = 1/72 inch
5.pc ->picas = 12 point

Ukuran yang berhubungan dengan
Sudut
1.deg ->degrees (derajad)
2.grad ->grads (gradien)
3.rad ->radians

Waktu
1.ms -> mili seconds
2.s -> seconds

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%)}

Materi8-CSS full-tutorial-recomend.ppt a

More Related Content

Similar to Materi8-CSS full-tutorial-recomend.ppt a

Recently uploaded

Materi8-CSS full-tutorial-recomend.ppt a