PRIN STIANINGSIH TEACHER OF SMK NEGERI 1 PEKANBARU PENGENALAN CSS PRIN STIANINGSIH TEACHER OF SMK NEGERI 1 PEKANBARU
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
MEMBUAT CSS CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
Selector { property1 : value1 ; Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector. Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; }
CARA KETIGA : Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head. <head> <link rel=“stylesheet” type=“text/css” href=“namafile.css”/> </head>
Contoh : <style type=“text/css” > hr { color : red ; height : 5px ; width : 50%; } </style> Keterangan : Tag adalah style Atribut adalah type=“text/css” Selector adalah hr Property adalah color, height, width Value adalah red, 5px, 50%
ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik ( . )
<!DOCTYPE html> <html> <head> <style type="text/css"> h1{ background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; } </style> </head> <body> <h1>CSS background-color example!</h1> <div> This is a text inside a div element. <p>This paragraph has its own background color.</p> We are still in the div element. </div> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set postion example.</p> <p>Now the background image is only shown once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> body { margin-left:200px; background:#5d9ab2 url('img_tree.png') no-repeat top left; } .container text-align:center; .center_div border:1px solid gray; margin-left:auto; margin-right:auto; width:90%; background-color:#d0f0f6; text-align:left; padding:8px; </style> </head> <body> <div class="container"> <div class="center_div"> <h1>Hello World!</h1> <p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p> </div> </body> </html>