CSS Dasar
•Download as PPTX, PDF•
0 likes•753 views
CSS digunakan untuk mengatur gaya dan tata letak elemen pada halaman web. Dengan CSS, penampilan elemen HTML dapat diformat dengan cara mendefinisikan properti seperti warna, ukuran huruf, tata letak dan lainnya melalui deklarasi CSS. CSS memungkinkan pemisahan konten dari tampilan sehingga perubahan desain dapat dilakukan dengan mengedit satu file CSS.
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to CSS Dasar
Similar to CSS Dasar (20)
CSS Dasar
- 1. Cascading Style Sheet CSS I Putu Eka Swastika
- 2. • Mengatur style elemen yang ada dalam halaman web. • Mendefinisikan cara elemen HTML yang akan ditampilkan. • Ditulis dengan menggunakan penanda(markup laguage).
- 3. • mulai dari memformat teks sampai memformat layout. • Gaya biasanya disimpan dalam file css eksternal . • Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web hanya dengan mengedit satu file tunggal .
- 4. • CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) pada tahun 1996, untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. • Hingga kini terus didukung oleh HTML versi paling baru (v 5) dan oleh semua Internet Browser.
- 5. • HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen. • HTML itu dimaksudkan untuk menentukan isi dari sebuah dokumen. • Ketika tag seperti <font>, dan atribut warna ditambahkan dengan spesifikasi HTML 3.2 , mulai mimpi buruk bagi pengembang web
- 6. • Lebih fleksibel dalam penempatan posisi layout. (contoh: Z-Index). • Menjaga HTML dalam penggunaan tag yang minimal (ukuran berkas HTML) • Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya. • CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
- 7. CSS SYNTAX Selector ditempatkan sebelum declaration sehinga properti dan nilai pada declaration akan diterapkan pada selector yang dimaksud. Declaration terdiri dari pasangan property dan value, yang masing – masing dipisahkan dengan tanda “;”. Terdiri Dari 2 Bagian Utama Declaration (merupakan isi dari property dan nilai dari CSS.) . SELECTOR (bagian yang akan diberikan style pada HTML)
- 8. Jenis dan fungsi masing-masing. SELECTOR Digital Media I Putu Eka Swastika, S.Pd Class SelectorType Selector Type Selector merupakan bentuk paling dasar dari selector css. Dengan menggunakan tag HTML tertentu, kita dapat menerapkan style css langsung pada tag yang dimaksud. 21 Class selector digunakan jika ingin menerapkan style yang berbeda untuk sekelompok elemen yang identik.
- 9. Jenis dan fungsi masing-masing. SELECTOR Digital Media I Putu Eka Swastika, S.Pd Descendant SelectorID Selector ID selector digunakan jika kita ingin menerapkan style yang berbeda hanya untuk satu elemen tertentu. 43 Mengatur style dari beberapa selector yang bertingkat/berjenjang. Sehingga tidak perlu mengatur secara khusus syle setiap bagian tingkatannya.
- 10. Jenis dan fungsi masing-masing. SELECTOR Digital Media I Putu Eka Swastika, S.Pd Universal Selector universal selector merupakan jenis selektor yang dapat diterapkan pada seluruh elemen html. 5
- 11. Cara menambahkan CSS pada dokumen HTML Digital Media I Putu Eka Swastika, S.Pd • Metode ini digunakan dengan membuat style (mengkoding CSS) pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan dalam format .css. • Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>. External style sheet/Linked Style Sheet • CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. • Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag- tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. • CSS didefinisikan langsung pada tag HTML yang bersangkutan. • Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. • Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Inline Style Sheet 1 2 3 Internal style sheet/Embedded Style Sheet
- 12. Digital Media I Putu Eka Swastika, S.Pd • Contoh isi dalam mystyle.css: • Cara memanggil mystyle.css pada index.html External style sheet/ Linked Style Sheet
- 13. Digital Media I Putu Eka Swastika, S.Pd • Contoh penulisan Internal style sheet: Internal style sheet/ Embedded Style Sheet
- 14. Digital Media I Putu Eka Swastika, S.Pd • Contoh penulisan inline style sheet Inline Style Sheet
- 15. 1. Browser pertama akan membaca exsternal style sheet untuk ditampilkan. 2. Setelah itu bila terdapat CSS internal di dalam HTML (Head) untuk selector/tag yang sama, maka yang akan menjadi acuan tampilan adalah internal style sheet. 3. Berikutnya akan di cek apakah di setiap Tag terdapat style yg ditulis dengan Attr Style, maka yg ditampilkan sesuai inline style sheetnya. Digital Media I Putu Eka Swastika, S.Pd Prioritas Dalam Menampilkan CSS Urutan Kompilasi External InternalInline
- 16. Digital Media I Putu Eka Swastika, S.Pd • Silahkan Download Filenya di link: http://goo.gl/q9IwaH • Baca kemudian latihan dengan mengerjakan contoh yang ada. • kemudian kerjakan tugas dan dikumpulkan. Materi Pengayaan dan Latihan untuk Property yg dpt Digunakan dalam CSS