pengenalan css
TRANSCRIPT
![Page 1: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/1.jpg)
PENGENALAN CSS
CSS = Cascading Style Sheet
Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
![Page 2: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/2.jpg)
MEMBUAT CSS
CARA PERTAMA :mengetikkan langsung dalam tag html sebagai atribut .
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>
![Page 3: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/3.jpg)
CARA KEDUA :
Menggunakan tag style di dalam tag head.
<head> <style type=“text/css”>
……… style definitions ………
</style></head>
![Page 4: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/4.jpg)
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 ; }
![Page 5: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/5.jpg)
![Page 6: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/6.jpg)
![Page 7: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/7.jpg)
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>
![Page 8: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/8.jpg)
![Page 9: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/9.jpg)
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%
![Page 10: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/10.jpg)
ID SELECTOR dan CLASS
ID selector didefenisikan sendiri
ID selector diawali tanda # ( octothorpe)
CLASS diawali dengan tanda titik ( . )
![Page 11: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/11.jpg)
![Page 12: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/12.jpg)
![Page 13: Pengenalan css](https://reader034.vdocuments.net/reader034/viewer/2022042507/559c53281a28ab34038b4644/html5/thumbnails/13.jpg)