Download to read offline
Uploaded byPutu Mardika
Pert 05 HTML dan Web Programming
Dokumen ini menjelaskan tentang CSS (Cascading Style Sheets) dalam pengaturan tampilan HTML, mencakup sintaks dasar, cara penulisan, dan berbagai metode implementasinya seperti inline, embedded, dan external CSS. Penjelasan meliputi penggunaan selector, property, dan kelas dalam CSS. Contoh implementasi dan pernyataan CSS juga disertakan untuk memberikan pemahaman yang lebih baik.
![Modul Ajar KBC SKI Kelas 3 MI [MODULKELAS.COM]](https://cdn.slidesharecdn.com/ss_thumbnails/modulajarkbcskikelas3mimodulkelas-260130161838-4934e483-thumbnail.jpg?width=640&height=640&fit=bounds)
Pert 05 HTML dan Web Programming
- 1. HTML & WEBPROGRAMMING By : I Ngh Putu Mardika, S.Pd
- 2. Review-01 • Buatlahweb layout dengan tampilan seperti salah satu gambar berikut! Logo Nav igasi Nav igasi Nav igasi Logo Nav igasi
- 3.
- 4. Mengenal CSS •Singkatan dari cascading Style sheet • Cara untuk mengatur tampilan html • Mempermudah dalam pengaturan html
- 5. Syntax CSS •Syntax : selector { property: value } selector { property: value; property: value } • Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya.
- 6. Contoh CSS h1{ color: red } Artinya: Selector: h1 Property: color Value: red Mengatur color dari h1 ke warna merah (red)
- 7. Contoh CSS header{ background-color:black} nav{ background-color:black;} body{ margin:0}
- 8. Pengelompokan Selector h1,h2,h3{ color: red } p, a, ul {color:blue} p, ul, a {color:blue}
- 9. Penggunaan Banyak Properties header { background-color:black; color:white; text-align:center; padding:5px; }
- 10. Cara Penulisan YangBaik nav { line-height: 30px; background-color : #eeeeee; height : 300px; width :100px; float:left; padding:5px; }
- 11. CSS Comment /*Tulis komentar anda di sini */ p { text-align: justify; /* Tulis komentar anda di sini */ color: blue; font-family: arial; }
- 12. INPLEMNTASI CSS •Inline CSS • Embed atau memasang kode css ke dalam bagian <head> • Pada link ke external CSS • Import CSS file
- 13. 1. Inline CSS • Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS • sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
- 14. Cotoh inline CSS <p style=”color:blue”> Isi paragraf. </p>
- 15. 2. Embedded CSS • menempelkan kode CSS di antara tag <head> dan </head>. • Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. • Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat
- 16. Contoh embedded CSS <head> <style type="text/css" media=screen> p {color:blue;} </style> </head> <body> </body>
- 17. 3. External CSS • Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . • perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web.
- 18. SELECTOR • ElementSelector element html sebagai selector contoh : h1 { color : blue } • Class Selector mempergunakan atribut class sebagai selector • ID selector mempergunakan atribut ID seagai selector
- 19. CLASS SELECTOR •Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali. Cara penulisan Class Selctor .nama-class {property: value;} Contoh : .