Cascading Style Sheet Bagian 1 Mata Kuliah Pemrograman

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

� 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: 10 px; .

� Penulisan element CSS dalam HTML ada 3 kelompok : 1. CSS Tag HTML 2. CSS Element id 3. CSS Element class

� Penulisan CSS adalah berada pada hirarki head pada hirari HTML. � CSS bisa langsung dituliskan di dalam head dengan memberikan MIME Type (text/css) Contoh : <style type=“text/css”>. . . Content. . </style � CSS juga bisa dibuat diluar file HTML, dengan (external link). Contoh : <link rel=“stylesheet” type=“text/css” href=“style. 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 ( ; )

� 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: 12 px; �}

� 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: 300 px; � background-color: #CCCCCC; � font-family : arial; � color: #000000; � font-size: 12 px; �}

� 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: 300 px; � background-color: #CCCCCC; � font-family : arial; � color: #000000; � font-size: 12 px; �}

� Padding adalah properti yang digunakan untuk membuat jarak antar objek Contoh : padding : 1 px 2 px 3 px 4 px; * 1 px (top), 2 px(right), 3 px(button), 4 px(left) padding : 2 px 2 px: ( padding : 2 px; ) � Margin adalah properti yang digunakan untuk membuat jarak (margin) objek dari layar Contoh : margin : 1 px 2 px 3 px 4 px; * 1 px (top), 2 px(right), 3 px(button), 4 px(left) margin : 2 px 2 px; margin : 0 auto; (membuat objek di tengah) � kajskas

Terimakasih atas perhatiannya. Semoga apa yang kita pelajari bersama bermanfaat bagi kita semua. Amiiin. Sumber: 1. Internet & World Wide Web How To Program Fourth Edition, P. J. Deitel, H. M. Deitel, Prentice Hall. 2. Pro CSS for High Traffic Website, Antony Kennedy and Inayaili de. Leon, Appress 3. 4. http: //www. w 3 c. org http: //www. w 3 schools. com