5 pemrograman internet css

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)
misal ingin diberi warna biru

<font color="blue">
<h2>sebuah judul</h2>
</font>

misal didefinisikan
kode CSS berikut

#2 Ngapain pakai
CSS?

1/6

untuk memisahkan Konten
dengan Style / Cara
Menampilkan (Presentation)

memudahkan me-manage
tampilan website

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

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/d
emo_default.htm

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.

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

<h2 style=“color:red;”>
Sebuah Judul</h2>

<html>
<head>
<title>CSS Session</title>
<style type="text/css">
h2 { color:blue; }
</style>
</head>
<body>
<h2>sebuah judul</h2>
</body>
</html>

<head>
<title>CSS Session</title>
<link href=“MyStyle.css" rel="stylesheet"
type="text/css" />
</head>

memilih Elemen mana yang
akan di-terapkan style CSS

<body>
<h2>Kucing Kami... </h2>
</body>

body{
background:#ff7865;
}

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

next session
 MeLayout website dengan CSS
 JavaScript
 PHP?

5 pemrograman internet css

More Related Content

What's hot

Similar to 5 pemrograman internet css

More from Toni Tegar Sahidi

Recently uploaded

5 pemrograman internet css