cascading style sheet spesifikasi lengkap di : ...gembong.lecture.ub.ac.id/files/2012/09/css.pdf ·...

CSS

Cascading Style Sheet

Spesifikasi lengkap di :http://www.w3.org/TR/CSS2



CSS





Mengubah TextMengubah Text

Mengubah WarnaMengubah Warna

Mengubah PosisiMengubah Posisi

Mengubah UkuranMengubah Ukuran

Bagaimana cara menempatkan CSS?

Ada 3 cara yaitu :

• Inline ( pada tag HTML-nya )• Embedded ( Menempel pada tag <head> )• External ( File lain / biasanya file dengan extensi .css )

Bagaimana cara menempatkan CSS?

Ada 3 cara yaitu :

• Inline ( pada tag HTML-nya )• Embedded ( Menempel pada tag <head> )• External ( File lain / biasanya file dengan extensi .css )

Inline CSS

<body><h1 style="color:red;">Contoh css inline </h1></body>

<body><h1 style="color:red;">Contoh css inline </h1></body>

Embedded CSS

<head><style type="text/css">

p {color:red;

}</style></head><body>......</body>

<head><style type="text/css">

p {color:red;

}</style></head><body>......</body>

Contoh efek <U>..</U> menjadi pengatur warna

Tag <U>..</U> memiliki “tugas” baru disamping “tugas”lama, yaitu warna tulisan.

Hasilnya sama dengan kode berikut :

Contoh efek <U>..</U> menjadi pengatur warna

Tag <U>..</U> memiliki “tugas” baru disamping “tugas”lama, yaitu warna tulisan.

Hasilnya sama dengan kode berikut :

Efek yang sama pada dua kode I dan U

Tag <U> =underlineDan tag <I> =italicDiberi efek baru,yaitu warnamerah hurufnyaTag <B> = bold,diberi efek warnahijau

Tag <U> =underlineDan tag <I> =italicDiberi efek baru,yaitu warnamerah hurufnyaTag <B> = bold,diberi efek warnahijau

Efek yang sama pada dua kode I dan U

Beberapa efek pada satu kode B

• Misalkan pada tag <B>akan dilekatkan efekwarna, jenis huruf dan gayahuruf

• Perintahnya CSS-style nya

• B { color:lime;

text-decoration: underline;

font-family:Arial }

• Misalkan pada tag <B>akan dilekatkan efekwarna, jenis huruf dan gayahuruf

• Perintahnya CSS-style nya

• B { color:lime;

text-decoration: underline;

font-family:Arial }

Beberapa efek pada satu kode B

11

External CSS: tag link (bagus)

<head><linkrel="stylesheet"href="css_ku.css">

</head><body>

......</body>

<head><linkrel="stylesheet"href="css_ku.css">

</head><body>

......</body>

External CSS: tag link (bagus)

2. CSS-GLOBAL :Sekali Tulis, pakai bersama

Kita dapat mendefinisikansuatu file *.css yang berisikode-kode CSS

File tersebut dapat diacuoleh setiap HTML

Jika file HTML akanmengacu file CSS tersebutditulis :

<HEAD>

<LINK REL="stylesheet"HREF="global.css"

TYPE="text/css">

</HEAD>

B {color: red; text-decoration: underline;font-family: Arial }

I {color:blue; font-family:"MonotypeCorsiva"; font-size:20}

File : global.css Kita dapat mendefinisikansuatu file *.css yang berisikode-kode CSS

File tersebut dapat diacuoleh setiap HTML

Jika file HTML akanmengacu file CSS tersebutditulis :

<HEAD>

<LINK REL="stylesheet"HREF="global.css"

TYPE="text/css">

</HEAD>

Digunakan oleh

Dan Digunakan oleh

2. CSS-GLOBAL :Sekali Tulis, pakai bersama

B {color: red; text-decoration: underline;font-family: Arial }

I {color:blue; font-family:"MonotypeCorsiva"; font-size:20}

File : global.css

Css_global.html

Css_global2.html

Digunakan oleh

Dan Digunakan oleh

Selanjutnya 2 file html digabung dalam 1frame

Klik lihat hasil

Terlihat :Efek dari tag <B>dan tag <I> yangdidefinisikandalam STYLE difile global.css

Terlihat :Efek dari tag <B>dan tag <I> yangdidefinisikandalam STYLE difile global.css

Selanjutnya 2 file html digabung dalam 1frame

Klik lihat hasil

Bagaimana format / cara kerja CSS?

Ada 3 bagian penting css :1.Selector2.Properties3.Value / nilai

Bagaimana format / cara kerja CSS?

1. Selector

Pemilihan elemen

contoh :

p { color : red; }

Pemilihan elemen

contoh :

p { color : red; }

2. Properties

Bagian apa yg ingin diubah

contoh :

p { color : red; }

Bagian apa yg ingin diubah

contoh :

p { color : red; }

3. Values / Nilai

Isi dari perubahan,contoh :

p { color : red; }

dengan kata lain css ini melakukan perubahan warna (color)merah (red) pada tag <p>


p { color : red; }



p { color : red; }



p { color : red; }


Aturan penulisan CSSAturan penulisan CSS

Sintaks CSS

1. Selector2. Deklarasi3. Cascade

1. Selector ( sebelum kurung kurawal )

Cara melakukan seleksi :1. Element2. Class3. Id4. Posisi dokument



Cara melakukan seleksi :1.Element

Contoh :p { color : red; }

Pilih semua element <p> pada semua dokumen HTML.Contoh :<body><p>tulisan ini akan berwarna merah</p></body>












Cara melakukan seleksi :2. Class

Contoh :.namakelas { color : red; }

Pilih semua element yang memiliki nama class "namakelas"pada semua dokumen HTML. Contoh :<body><div class="namakelas"><p> ini anggota div dengan nama kelas : "namakelas" </p></div>











Contoh class (untuk ubah warna)

Class :merah berefek warnahuruf menjadi merah danclass:biru berefek warnahuruf menjadi biru. Dapatdi-inset pada tag <P> dantag <b>


Klik lihat hasil

Contoh class (untuk ubah ukuran huruf)

Font-size : xx-small, x-small, small, medium, large,x-large, xx-large

Contoh class (untuk ubah ukuran huruf)

Klik lihat hasil


Class :merah berefek warnahuruf menjadi merah danclass:biru berefek warnahuruf menjadi biru. Dapatdi-inset pada tag <P> dantag <b>


Klik lihat hasil


Cara melakukan seleksi :3. Id

Contoh :#idunik { color : red; }

Pilih semua element yang memiliki nama id "idunik" padasemua dokumen HTML. Contoh :<body><div id="idunik"><p> ini anggota div dengan nama id unik : "idunik" </p></div>












Cara melakukan seleksi :4. Posisi di Dokumen

Pilih semua elemen p yang diturunkan dari elemen denganid yang sama dengan #about


Pilih semua elemen p yang diturunkan dari elemen denganid yang sama dengan #about

1. Selector ( sebelum kurung kurawal )Contoh-contoh lain


2. Deklarasi ( properties dan value )

CSS mendeklarasikan sesuatu yang isinya bisa kita ubah,contoh :• font• color• background-color• border

(Kata diatas adalah properties)









Setiap properties memiliki nilai (values) yang bisa kitaaplikasikan, contoh :


Setiap properties memiliki nilai (values) yang bisa kitaaplikasikan, contoh :


Properti bisa granular, contoh properties "border" :


Properti bisa granular, contoh properties "border" :

2. Deklarasi ( properties dan value )2. Deklarasi ( properties dan value )


Properties granular bisa juga disingkat atau disebut shorthand


Properties granular bisa juga disingkat atau disebut shorthand


UNIT : unit adalah satuan yang digunakan untuk mengukursesuatu ( font, border, padding dll )

Unit ada 2 macam yaitu Absolut dan Relatif

Contoh absolut adalah px ( pixel )

Contoh relatf adalah em dan % (persen)














2. Deklarasi ( properties dan value )2. Deklarasi ( properties dan value )

3. Cascade

Secara kata, cascade berarti mengalir kebawah. Pengertiancascade disini adalah :

Menentukan deklarasi yang manakah, yang akan diaplikasikankedalam elemen HTML

Contoh :p { color : red; }p { color : blue; }

maka yang menang adalah warna biru, karena biru adalahyang terakhir diaplikasikan.













3. Cascade

Jadi bisa dikatakan, deklarasi terakhirlah yang menang.

Tetapi sebenarnya pemenangnya adalah :

Deklarasi yang paling akhir DAN paling spesifik

Jadi bisa dikatakan, deklarasi terakhirlah yang menang.

Tetapi sebenarnya pemenangnya adalah :

Deklarasi yang paling akhir DAN paling spesifik

3. Cascade

Layout

1.Model Box2.Display3.Position4.Float

1.Model Box2.Display3.Position4.Float

Layout

1. Box Model

terdiri dari :• Content / isi• Padding• Border• Margin

cascading style sheet spesifikasi lengkap di : ...gembong.lecture.ub.ac.id/files/2012/09/css.pdf ·...

Documents