( Cascading Style Sheet) Bagian 1

Presentasi berjudul: "( Cascading Style Sheet) Bagian 1"— Transcript presentasi:

1 ( Cascading Style Sheet) Bagian 1
CSS ( Cascading Style Sheet) Bagian 1 Mata Kuliah : Pemrograman Web Pertemuan 3

2 CSS (Cascading style sheet)
Adalah bahasa pemrograman yang digunakan untuk membantu menata tata letak sebuah halaman web. Terkadang element yang terpasang di html hanya mempunyai satu propertis saja, maka dengan bantuan CSS setiap element di dalam html bisa dimodifikasi. Oleh karena itu setiap element yang dibuat dengan CSS bisa mempunyai sifat inheritance (turunan). Pendeklarasian sebuah CSS berada pada hirarki head pada hirarki HTML. Setiap element di dalam CSS mempunyai atribut masing-masing, misal font-size:10px;.

3 PENULISAN ELEMENT (Selectors) css
Penulisan element (selector) CSS dalam HTML ada 3 kelompok : CSS Tag HTML CSS Element id CSS Element class

4 PENULISAN css Embedded style sheet = CSS bisa langsung dituliskan di dalam head dengan memberikan MIME Type (text/css) Contoh : <style type=“text/css”> ...Content.... </style External style sheet = CSS juga bisa dibuat diluar file HTML, dengan (external link). <link rel=“stylesheet” type=“text/css” href=“style.css”> Inline style sheet = CSS juga bisa dibuat satu baris di dalam element html. <h1 style=“color:#000000;” >

5 FORMAT PENULISAN ELEMENT (selector) dan atribut css
body{ background:#FFFFF; } #wrapper{ margin : 0 auto; Dalam setiap penulisan Element diikuti dengan tanda kurung kurawal. Dalam penulisan setiap atribut, cara penulisannya adalah nama atribut diikuti oleh tanda titik dua ( : ) kemudian properti atributnya dan diakhiri dengan semikolon ( ; )

6 Penulisan css tag html Dalam penulisan CSS tag HTML, adalah cukup dengan memberikan element pada setiap element HTML yang akan diberi atribut pada CSS. Contoh : body{ background-color:#CCCCCC; font-family : arial; color:#000000; font-size:12px; }

7 Penulisan css ELEMENT ID
Dalam penulisan CSS element div, adalah dengan menambahkan karakter # (cross) pada setiap pembuatan element. Pada pemanggilan di HTML dengan menggunakan id, <div id=“header”>content</div> Contoh : #header{ height:300px; background-color:#CCCCCC; font-family : arial; color:#000000; font-size:12px; }

8 Penulisan css ELEMENT class
Dalam penulisan CSS element div, adalah dengan menambahkan karakter . (titik) pada setiap pembuatan element. Pada pemanggilan di HTML dengan menggunakan id, <div class=“header”>content</div> Contoh : .header{ height:300px; background-color:#CCCCCC; font-family : arial; color:#000000; font-size:12px; }

9 GROUP SELECTOR Terkadang di dalam penulisan element biasanya mempunyai atribut yang sama pada setiap element. CSS memperbolehkan penulisan atribut secara bersama-sama pada sebuah grup element. Contoh : h1, h2, h3, h4 { border:solid red 1px; }

10 ELEMENT CLASS PADA TABEL
Dalam pembuatan sebuah tabel, kontruksi dari bentuk tabel yang terdiri dari kolom- kolom bisa kita modifikasi dengan menggunakan CSS. <table class=“aturtabel”> <tr> <td>Satu</td> <td>Dua</td> </tr> </table> Dalam CSS: . aturtabel{ border-collaps:collaps; } . aturtabel td{ border:red solid 1px; }

11 INHERITANCE PADA ELEMENT (SELECTOR) CSS
Dalam selector CSS mendukung juga Fungsi inheritance (turunan), dimana setiap atribut element dari sebuah element turunan tidak akan mempengaruhi sebuah element yang lain. Contoh : #header h1{color:#000000;} h1{color:#123456;} Pada baris pertama terdapat element h1 yang merupakan turunan dari id#header. Sedangkan h1 pada baris kedua memiliki attribut sendiri sehingga ketika dijalankan akan menghasilkan 2 element yang berbeda.

12 Atribut padding dan margin
Padding adalah properti yang digunakan untuk membuat jarak antar objek Contoh : padding : 1px 2px 3px 4px; * 1px (top), 2px(right), 3px(button), 4px(left) padding : 2px 2px 2px 2px: ( padding : 2px; ) Border adalah properti yang digunakan untuk memberikan garis pada sebuah konten. border: 1px solid red; (membuat garis setebal 1px dengan garis penuh dan berwarna merah) Margin adalah properti yang digunakan untuk membuat jarak (margin) objek dari layar margin : 1px 2px 3px 4px; margin : 2px 2px 2px 2px; margin : 0 auto; (membuat objek di tengah)

13 MODEL KOTAK (BOX model)
Di dalam pengaturan tata letak sebuah halaman web site agar terlihat menarik seringkali dikotak- kotak/di blok dan diletakkan di beberapa bagian halaman website. Pengkotak-kotakan tersebut tidak lepas dari beberapa blok (blok kotak) yang berisi tentang bagian-bagian yang akan ditampilkan di halaman web browser, kotak- kotak tersebut secara virtual digambarkan ke dalam tata letak halaman web site. Misalnya : kotak untuk header, kotak footer, kotak isi halaman, kotak kanan atau kotak kiri. Ketika browser mendeteksi element menggunakan model kotak, maka kotak tersebut dilengkapi dengan Padding, Border dan Margin. Perhatikan gambar.

14 MODEL kotak (BOX MODEL)

15 FLOATING attribut (atribut mengambang)
Seperti halnya kita dalam membuat sebuah halaman web site, maka pada setiap posisi element akan saling berurutan dari atas sampai ke bawah. Maka untuk menangani permasalahan tersebut misalnya menempatkan kotak di posisi kanan maupun kiri, maka kita gunakan fungsi atribut float. Dengan Floating model kotak bisa kita tempatkan berada di posisi kanan maupun kiri dari sebuah layar web site. Dalam penggunaan float selalu diakhiri dengan pembersihan floating dengan memberikan attribut ( clear:left; / clear:right / clear:both) Perhatikan gambar.

16 Floating attribut HEADER KOTAK KANAN Float:left KOTAK KIRI
Float : right; FOOTER

17 Next >> CSS (cascading style sheet) 2
Terimakasih atas perhatiannya. Semoga apa yang kita pelajari bersama bermanfaat bagi kita semua. Amiiin. Sumber: Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M .Deitel, Prentice Hall. Pro CSS for High Traffic Website, Antony Kennedy and Inayaili deLeon, Appress Learning Web Design Third Edition, Jennifer Niederst Robbins, O’Reilly Media Nufan Balafif Next >> CSS (cascading style sheet) 2