Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Download
Standard view
Full view
of .
Look up keyword
Like this
19Activity
0 of .
Results for:
No results containing your search query
P. 1
catatan css

catatan css

Ratings: (0)|Views: 527|Likes:
Published by Leonsius
comsmacc.blogspot.com
comsmacc.blogspot.com

More info:

Published by: Leonsius on Aug 21, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

02/01/2013

pdf

text

original

MULOK/ XII/ 09-10
Hal :1
TUTORIA L CSS
1. Pengenalan CSS
CSS merupakan kepanj angan dari Cascading St yle Sheet yait u suat u dokumen yang digunakan unt uk
melakukan pengat uran halaman web.
Apa itu CSS :
CSS singkat an dari Cascading St yle Sheet s
St yles didefinisikan bagaimana manampilkan elemen HTML
St yles umumnya disimpan ke dalam St yle Sheet
St yles dit ambahkan HTML unt uk membant u pekerj aan
Ext ernal St yle Sheet s dapat membant u banyak pekerj aan
Ext ernalSt yle Sheet disimpan dalam CSS files
Mult iple St yle dapat didefinisi banyak j endela menj adi sat u

Menggunakan CSS t idak memerlukan perangkat lunak t ert ent u karena merupakan script yang t elah embeded dengan HTML. Cukup menggunakan aplikasi seperti notepad, anda sudah mampu mencipt akan script CSSsendiri

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan t ersendiri.

Suat u st yle sheet merupakan t empat dimana anda mengont rol dan memanage st yle-st yle yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bias menyebut nya sebagai t emplat e dari document s HTML yang menggunakanya.

Anda j uga bisa membuat efek-efek sepsial di web anda dengan menggunakan st yle sheet . Sebagai cont oh anda bisa membuat st yle sheet yang mendefinisikan st yle unt uk <H1> dengan st yle bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan f ont verdana dan masih banyak lagi yang bias anda lakukan dengan st yle sheet .

Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

Pada perkembangannya CSS sudah masuk level 3 unt uk sekarang, dimana dimulai CSS level 1 at au yang sering di sebut CSS aj a, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yait u CSS level 1.

CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai
banyak keunt ungan, diant aranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan set ia XHTML
- Menghemat pekerj aan t ent unya, dimana hanya membuat 1 halaman CSS.
- Mudah menggant i-gant i t ampilan dengan hanya merubah file CSS nya saj a.
- Dan banyak lagi yang lainnya.
MULOK/ XII/ 09-10
Hal :2
2. Sintaks dari HTML
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
select or { propert y1: value; propert y2:value, . . .}
example:H1{ color:green; background-color:orange}
Ket:
1. Selector
Bagian pert ama sebelum t anda \u201c {}\u201d disebut select or.Select or adalah t ag ht ml yang umumnya kamu
ket ahui .
2. Declaration
Terdiri dari propert y dan nilainya.Propert y adalah at ribut yang kamu ingin ubah dan t iap propert y
mempunyai nilai/ value.
Cont oh:
1.
2.
3.
4.
5.
6.
Cat at an:
Jangan ada spasi ant ara propert y value dengan unit nya(1).
Nama propert y bersifat case sensit if dan menggunakan huruf kecil.
Jika nilai / val ue lebih dari sat u kat a, maka gunakan t anda pet ik di ant ara nilai(2)
Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property
lain(3,5).
Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda
koma(6).
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :
1. Int ernal CSS
Yait u menuliskan langsung script CSS di file HTML-nya.
Cont oh :
<html>
<head>

<title>Belajar CSS</title>
<style type=\u201dtext/css\u201d>
p {color: white; }
body {background-color: black; }

</style>
</head>
<body>

<p>Selamat Datang CSS</p>
</body>
</html>
p {margin-left: 20px}
P{font-family:\u201dsans serif\u201d}
p {text-align:center;color:red}
body{ color:black}
p{text-align: center;
color: black;
font-family: arial
}
h1,h2,h3,h4,h5,h6
{color: green
}
MULOK/ XII/ 09-10
Hal :3
2. Ext ernal CSS
Yait u memanggil file CSS dari t empat / folder/ lokasi lain, dengan kat a lain file CSS t erpisah dengan
file HTML. Browser akan membaca definisi st yle dari file t est .css dan akan mengikut i format
t ersebut .Ekst ernal st yle dit ulis di t ext edit or lain dengan ekst ent ion .css Unt uk lebih j elasnya kit a
lihat cont oh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=\u201dstylesheet\u201d type=\u201dtext/css\u201d href=\u201dtest.css\u201d/>
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
3. Inline CSS
Yait u penulisan kode CSS dalam t ag HTML. Lihat cont oh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=\u201dbackground: blue; color: white;\u201d>Style Menggunakan

CSS</p> </body> </html>

Class Select or

Dengan class selector dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya, dua type paragraph dalam dokumen.Yang satu paragraph align-right dan yang satu paragraph align-cent er.

Cont oh:
at au
Penggunaan at ribut class di dalam dokumen ht ml
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Catatan:
Jangan memberi nama class dengan angka.
Memberikan kat a/ kalimat lebih dari sat u class, penulisannya adalah:
<p class="center bold">
This is a paragraph.
</p>
.right {text-align: right}
.center {text-align: center}
p.right {text-align: right}
p.center {text-align: center}

Activity (19)

You've already reviewed this. Edit your review.
1 hundred reads
1 thousand reads
Oka Moch B Fitra liked this
meekomeeko liked this
Wahyuni Widigdo liked this
haddad2 liked this
Doar Siregar liked this
cingti liked this
Putu Pair liked this
zietpers liked this

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->