PENGENALAN CSS Cascading Style Sheet Fungsi mendefenisikan style

  • Slides: 13
Download presentation
PENGENALAN CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan

PENGENALAN CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.

MEMBUAT CSS q. CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut. <body>

MEMBUAT CSS q. CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut. <body> <b style = “color : blue”> teks tebal dan biru </b> </body>

q. CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”>

q. CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>

Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector

Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector { property 1 : value 1 ; property 2 : value 2; …. property. N : value. N ; } Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector.

q. CARA KETIGA : Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file

q. 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 : 5

Contoh : <style type=“text/css” > hr { color : red ; height : 5 px ; width : 50%; } </style> Keterangan : Tag adalah Atribut adalah Selector adalah Property adalah Value adalah style type=“text/css” hr color, height, width red, 5 px, 50%

ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # (

ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik (. )