PWEB CSS
Download as PPT, PDF0 likes651 views
CSS digunakan untuk mendefinisikan gaya teks seperti jenis huruf, ukuran, dan warna. CSS dapat ditulis langsung di dalam tag HTML, digunakan tag style di dalam head, atau disimpan ke dalam file CSS terpisah. Selector seperti ID dan kelas digunakan untuk menentukan elemen mana yang akan diterapkan gaya CSS.
PWEB CSS
- 1. PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
- 2. MEMBUAT CSS CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
- 3. CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
- 4. 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 ; }
- 7. 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>
- 9. 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%
- 10. ID SELECTOR ID selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. ID selector diawali tanda # (sharp/kres/octothorpe)
- 11. Sebuah paragraf dengan content sebagai selector ID. #content { font-family: Arial, sans-serif; font-size: 14px; color: red; } <p id="content"> Artikel Belajar CSS ID Selector </p>
- 12. CLASS class digunakan untuk menentukan style juga sama seperti id. Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“nama-class” pada HTML
- 13. Sebuah paragraf dengan content sebagai selector ID. .teks-hijau { color: green } <p class="teks-hijau"> Paragraf ini memiliki Class teks-hijau </p>