Pengenalan CSS
ü CSS = Cascading Style Sheet.
ü Suatustyle yang
digunakanuntukmenampilkanelemenHTML.
ü Dapatmengaturdanmengontroltampilanhalamanweb
serta memisahkan antara tampilan dan konten halamanweb.
ü Bukanlahsuatukeharusandalammembuatweb,
akantetapimenggunakanCSS akanmembuattampilanweb menjadilebihmenarik.
Struktur CSS
Struktur CSS
ü PerintahCSS terdiriatas2 komponen, yakniSelector
& Declaration.
ü Selector
berfungsiuntukmemberitahubrowser bahwapadaelemenmanarule CSS diterapkan.
ü Selector dapatberupaelemenHTML,
selector class atauselector id.
ü Declaration merupakanaturanCSS yang
diterapkan, terdiriatasproperty danvalue.
Aturan Penulisan CSS (Internal Style)
ü
Menggunakantag
<style>
Kode CSS
diletakkan diantara tag <head> dari dokumen HTML.
Aturan Penulisan CSS (Inline Style)
Menambahkan
langsung kode CSS kedalam tag HTML.
Aturan Penulisan CSS (External Style)
ü
Menggunakantag
<link> untuk merujuk ke file css khusus.
Sintaks
CSS
Grouping
ü
Untuk
mempersingkat penulisan, CSS juga memungkinkanuntuk melakukan grouping pada
selector‐selector yang memiliki property yang sama.
ü
Berfungsiuntukmemberikanstyle
yang berbedapadasebuahelemenHTML
ü
Diawalidenganmenambahkantanda‘.’(titik)
padafile css
ü
Padafile
HTML ditambahkanproperty ‘class’untukmemanggilselector tersebut.
ü
SatuelemenHTML
dapatmemanggillebihdarisatuclass
CSS
Class Selector
CSS ID
Selector
ü
Berfungsijugauntukmemberikanstyle
yang berbedapadasebuahelemenHTML
ü
Diawalidenganmenambahkantanda‘#’padafile
css
ü
Padafile
HTML ditambahkanproperty ‘id‘untukmemanggilselector tersebut.
ü
Penulisanid
tidakbolehdiawalidenganangka
ü
SatuelemenHTML
hanyabolehmenggunakansatuid
CSS ID
Selector
¨ BerfungsiuntukmengaturpanjangdanlebardarisebuahelemenHTML.
¨ contoh:
¤ height:100px;
¤ width:200px;
¨ Nilai/ value:
CSS Box
Model
ü
SebuahelemenHTML
dapatkitaanggapsebagaisebuahbox/ kotak.
ü
Digunakanpadasaatkitaakanmerancangtampilansebuahwebsite.
ü
Padadasarnyaberfungsisebagaitempatyang
membungkusisidarielemen‐elemenHTML.
ü
Tag
yang biasanyadigunakanuntukmerancangtampilanadalah<div>, walaupuntag
lain jugabisamenerapkanbox model.
ü
Terdiriatas4
bagian: Margin, Border, Padding, Content.
CSS Box
Model
CSS
Margin : Contoh
CSS Padding : Contoh
ü
CSS Float
ü
Berfungsiuntukmemaksasebuahelemenmenjadiberadadikiriataudikananhalaman.
ü
Elemenyang beradasetelahelemenyang diberifloat
akanterpengaruhfungsifloat tersebut.
ü
Elemenyang beradasebelumelemenyang diberifloat tidakakanterpengaruh.
ü
Property:
o
float:left;
o
float:right;
ü
Untukme‐nonaktifkanfungsifloat gunakan:
o clear:both;
ü
Biasanyadigunakanuntukmembuatgallery.
CSS Pseudo‐Class
ü
Berfungsiuntukmemberikanefekyang berbedapadasebuahselector.
ü
Biasanyadigunakanuntuklink / anchor.
ü
Property:
