PENGENALAN CSS
-
Upload
baker-ramirez -
Category
Documents
-
view
124 -
download
26
description
Transcript of PENGENALAN CSS
![Page 1: PENGENALAN CSS](https://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/html5/thumbnails/5.jpg)
![Page 6: PENGENALAN CSS](https://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/html5/thumbnails/6.jpg)
![Page 7: PENGENALAN CSS](https://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/html5/thumbnails/8.jpg)
![Page 9: PENGENALAN CSS](https://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/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://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/html5/thumbnails/11.jpg)
![Page 12: PENGENALAN CSS](https://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/html5/thumbnails/12.jpg)
![Page 13: PENGENALAN CSS](https://reader036.fdokumen.com/reader036/viewer/2022082317/5681351e550346895d9c7ed0/html5/thumbnails/13.jpg)