View
634
Download
4
Category
Preview:
DESCRIPTION
CSS
Citation preview
Cascading Style Sheet Cara Efisien bikin Desain
Toni Tegar Sahidi tonitegarsahidi@gmail.com
STT Stikma Internasional, Malang
CSS OVERVIEW #1 Apa sih CSS tu? #2 Ngapain pakai CSS? #3 Konsep Dasar CSS..? #4 Selector
#1 Apa sih CSS?
1/6
CSS memberitahu browser
bagaimana me-render sebuah
elemen HTML!
CSS Styles ditambahkan ke
HTML 4.0 untuk menyelesaikan
masalah.
Tanpa CSS
<h2>sebuah judul</h2>
(tanpa CSS) misal ingin diberi warna biru
<font color="blue"> <h2>sebuah judul</h2>
</font>
Dengan CSS
misal didefinisikan kode CSS berikut
h2 { color:blue; }
<h2>sebuah judul</h2>
#2 Ngapain pakai
CSS?
1/6
untuk memisahkan Konten dengan Style / Cara
Menampilkan (Presentation)
memudahkan me-manage tampilan website
Kenapa?
HTML sebenarnya tidak pernah dimaksudkan untuk
mengandung tag formatting untuk dokumen
HTML sebenarnya bertujuan untuk mendefinisikan konten
dari dokumen
<h1>This is a heading</h1> <p>This is a paragraph.</p>
Ketika tag <font> diperkenalkan di HTML 3.2
MIMPI BURUK WEB DEVELOPER!!
Pendefinisian font dan warna yang banyak harus ditambahkan
di SETIAP halaman website.
website kecil tak masalah... Website BESAAAAR?
Itulah kenapa W3C mengenalkan CSS
pada HTML 4.0*
Sekarang sudah HTML 5!
Sejak itu, semua formatting dapat dilepaskan dari dokumen
HTML dan diletakkan di file yang berbeda*.
*di file yang sama pun bisa saja, tapi not recommended
http://www.w3schools.com/css/demo_default.htm
#3 SINTAKS CSS
2/5
h2 { color:blue; margin : 1em; }
selector
Select / memilih elemen dalam
dokumen HTML yang akan
diaplikasikan style (di
desain/diformat)
h2 { color:blue; margin : 1em; }
h2 adalah selector
declaration
Memberi tahu browser bagaimana
menampilkan elemen
h2 { color:blue; declaration
margin : 1em; }
h2 { color:blue;
margin : 1em; declaration
}
property & value
Property adalah style attribute
(sifat elemen) yang ingin Anda
ganti. Setiap property memiliki nilai
(value).
h2 { color : blue; margin : 1em; }
*color dan margin adalah property
h2 { color : blue; margin : 1em; }
*blue dan 1em adalah value
#3 TIGA TIPE CSS
2/5
#BROWSER Style Sheet #USER Style Sheet #AUTHOR Style Sheet
#1 BROWSER Style Sheet
Tampilan default yang diberikan
oleh Web Browser kepada kita.
#2 USER Style Sheet
Beberapa browser memungkinkan
kita untuk men-setting sendiri
tampilan default kita.
#3 AUTHOR Style Sheet
Style Sheet yang didefinisikan oleh
web developer untuk pengunjung
situs.
#3 AUTHOR Style Sheet
Style Sheet yang didefinisikan oleh
web developer untuk pengunjung
situs.
Author Style Sheet dibuat oleh kita (Web Developer)
#3 AUTHOR
STYLE SHEET
2/5
Ada 3 Metode untuk Mengaplikasikan Author Style Sheet
#1 Inline Style #2 Header Style
#3 External File Style
#1 Inline Style #2 Header Style
#3 External File Style
<h2 style=“color:red;”> Sebuah Judul</h2>
diletakkan di HTML elemennya
#1 Inline Style #2 Header Style
#3 External File Style
<html> <head> <title>CSS Session</title> <style type="text/css"> h2 { color:blue; } </style> </head> <body> <h2>sebuah judul</h2> </body> </html>
#1 Inline Style #2 Header Style
#3 External File Style
<head> <title>CSS Session</title> <link href=“MyStyle.css" rel="stylesheet" type="text/css" /> </head>
#4 Selector
1/6
memilih Elemen mana yang akan di-terapkan style CSS
ADA 3 #element #class #id
element
<body> <h2>Kucing Kami... </h2> </body>
body{ background:#ff7865; }
class
untuk men-select semua yang sekelas/sejenis
<h2>Kucing Kami... </h2> <img src="kucing.jpg" alt="kucing kami" title="miauuw" /> </br> <img class="comment" src="kucing.jpg" alt="kucing kami" title="miauuw" />
img.comment{ width:100px; }
self Learning CSS dengan id
next session
MeLayout website dengan CSS
JavaScript
PHP?
Recommended