SISTEM INFORMASI: Cascading Style Sheets

Pengenalan CSS

ü CSS = Cascading Style Sheet.

ü Suatustyle yang digunakanuntukmenampilkanelemenHTML.

ü Dapatmengaturdanmengontroltampilanhalamanweb serta memisahkan antara tampilan dan konten halamanweb.

ü Bukanlahsuatukeharusandalammembuatweb, akantetapimenggunakanCSS akanmembuattampilanweb menjadilebihmenarik.

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.

CSS Class Selector

ü 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:

SISTEM INFORMASI

Tuesday, 22 September 2015

Cascading Style Sheets

1 comment: