Cascading Style Sheet (CSS) Didik Dwi Prasetya

Ukuran: px

Mulai penontonan dengan halaman:

Download "Cascading Style Sheet (CSS) Didik Dwi Prasetya"

Dewi Dharmawijaya
8 tahun lalu
Tontonan:

1 Cascading Style Sheet (CSS) Didik Dwi Prasetya

2 CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS) is a rule based language that applies styling to your HTML elements. 2

3 Mengapa CSS? v HTML tidak pernah dirancang untuk menjadi bahasa presentasi. <p color= red align= right ><font> v Penghapusan atribut presentasi dapat meningkatkan reusability dan maintainability. v CSS menjadikan dokumen yang bersih dan rapi. 3

4 Cascade vkekuatan CSS terletak pada konsep cascade. vprioritas cascade berdampak inheritance. 4

5 Sejarah Singkat v CSS 1 (1996) Tidak benar-benar digunakan HTML 3.2 (1997) Mimpi buruk pengembang web v CSS 2 (1998) Fitur: positioning, media types, shadow CSS 2.1 à Edisi revisi v CSS 3 (1999) Pembagian dokumen ke dalam module 5

6 Sintaks CSS The CSS syntax is made up of 5 parts: vselector vproperty/value vdeclaration vdeclaration block vcurly braces 6

7 Sintaks CSS (2) v Selector biasanya merupakan elemen HTML. v Declaration terdiri dari pasangan property dan value (nilai) Property: style yang akan diubah Value: nilai properti 7

8 Selektor id dan class vcss memfasilitasi pendefinisian own selector (id dan class) vid: mendefinisikan style pada elemen unik Definisi: #header {color: red} Cara akses: <div id= header > vclass: mendefinisikan style pada elemen serupa Definisi:.center {text-align: center} Cara akses: <div class= center > 8

9 Komentar CSS v Komentar digunakan untuk menjelaskan kode. v Komentar diabaikan oleh browser Tidak dieksekusi. v Penulisan komentar diawali dengan /* dan ditutup dengan */ /* Baris ini merupakan komentar */ p { text-align:center; /* Komentar lain */ } color: red; 9

10 Implementasi CSS vmetode penerapan CSS di halaman web Inline Internal External 10

11 Inline Style vmenerapkan style langsung di HTML melalui atribut style vsesuai jika hanya dipakai sekali pada elemen vkode kurang readable dan bersih vcontoh: <p style="color:red; font-size: 12px;"> Paragraf merah dengan ukuran 12px </p> 11

12 Internal Style vmenggunakan tag <style> di elemen head vsesuai jika hanya dipakai di satu halaman saja. vcontoh: <style> p { text-align: center; } color: red; </style> 12

13 External Style vmemisahkan dokumen HTML dan style sheet vmenggunakan <link> di head vsesuai jika digunakan berulang di beberapa halaman (direkomendasikan) vcontoh: <link rel="stylesheet" href="style.css"> Ket: file style.css berisi aturan-aturan CSS 13

14 Urutan Prioritas Aturan v Jika beberapa property ditentukan pada selector yang sama di tempat yang berbeda, nilai yang digunakan adalah nilai pada style sheet yang paling spesifik. v Urutan prioritas tampilan terurut dari paling rendah ke tinggi 1. Nilai default browser 2. External Style Sheet (file css) 3. Internal Style Sheet (di bagian head) 4. Inline Style (di elemen html) 14

15 CSS Layout v3 konsep layout CSS: CSS box model Floating Positioning v3 konsep secara bersama-sama mengendalikan elemen di halaman web. 15

16 CSS Box Model Margin Border Padding Content 16

17 Margin, Padding, Border 17

18 Floating vmenempatkan posisi elemen vnilai float: left, right, none vuntuk me-restore ke normal flow: clear: left; clear: right; clear: both; 18

19 CSS Positioning v Konsep dasar ketiga setelah box model dan float. v Tipe positioning: position: relative; position: absolute; position: fixed; (subkategori absolute) 19

20 CSS Positioning (1) vrelative: Normal flow 20

21 CSS Positioning (2) vrelative: #box2 { position: relative; } left: 20px; top: 20px; 21

22 CSS Positioning (3) v Absolute: relasi ke ancestor #box2 { position: absolute; } left: 20px; top: 20px; 22

23 Fitur-Fitur CSS3 vselector baru (attr^, $, *) vrounded corner (border-radius) vborder image vbox shadow (box-shadow) vtext shadow 23

24 Studi Kasus vanalisis desain header CSS berikut: 24

dokumen-dokumen yang mirip

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML