CSS DI WEB
Assalamualaiikum..
Hallo Selamat Datang Di Web Praktikum.
Kali ini Saya Akan Menjelaskan kegunaan dan bagai mana penggunaan CSS pada web site.
Berikut adalah caranya..
Pertama pengertian Css
CSS itu apa ? Css adalah CaseCading Style Sheet berguna atau berfungsi sebagai mengatur gaya tampilan di WebSite.
Manfaat Dari Css
manfaat utama dari css adalah
kode html lebih sederhana dan lebih mudah diatur.
ukuran file menjdai lebih kecil menjadikan load file lebih cepat.
mudah untuk mengubah tampilan .
dapan berkolaborasi dengan Js Java Script.
Dan dapat digunakan Hampir Di semua jenis Web Browser.
Demikianlah Pnegrtian Singkat dari CSS.
Selanjutnya adalah Beberapa Praktikum Dari CSS Berikut ini..
1.Inline Css
Ya ini adalah Inline Di css tag <style> css di atas digunakan untuk memberikan langsung pada tag html kita.
ini adlah hasil preview nya
Bisa kita lihat hasil nya ,, pada tulisan di atas ada bayangan pada textnya warna pink ,, bayangan tersebut bisa kita gunakan dengan menambah atribut Text-Shadow: di dalam tag <p> secara langsung dengan ukuran yang kita bisa sesuaikan.
2.Embede dengan Class Dan Id 1
Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id.
Seperti kita lihat kodingan di atas pada tag <style> ada #BhsIndo dan di dalam nya ada Declaration yang berfungsi sebagai pengatur style dari #BhsIndo seperti contoh di atas dan sebagai pembeda supaya ketika kita mengubah Style nya itu tidak akan salah.
Css ini adalah secara internal Atau di gabung langsung dengan html kode nya.
Hasil Previwnya
dan ini adalah hasil previewnya.
3.Embeded Dengan Class dan Id 2
Pada Embeded 2 Ini Adalah pengimplementasian dari Embeded 1
ini adalah Hasil preview nya
4.External Css Dengan Class Dan Id
Berkut ini adalah Penggunaan Class id, dan Css secara file terpisah atau tidak tergabung dengan html code nya
berikut contoh code nya
yang di atas ini adalah hmtl nya saja
Dan ini adalah Css nya Secara External atau yang tadi yaitu Beda file dengan Html nya
Ini Previewnya
5.Embede Heading Color
Fungsi utama dai Embed ini adalah sebagai Pemberi warna Pada Heading yang ingin kita buat
Berikut contohnya
Dan ini Previewnya
6.Format Text Di css
Selanjutnya Adalah penggunaan Css untuk Format Text yaitu text bisa kita rumah posisi dan texk bisa kita rumah menjadi huruf kapital, besar dan kecil dengan penggunaan tag tag html dan Css Berikut contoh nya
ini preview nya
7.Format Karakter & Spacing With Css External
Yang berikut ini adalah format Karakter dan Spacing , jadi kegunaan Spacing Kita bisa mengubah Jarak antar Huruf atau mengubah ukuran spacing menjadi jauh atau denkat dengan keinignan kita sendiri.
Saya menggunakan External Css Atau Css nya Beda file
untuk Beda File kita bsa menggunakan tag <link> di dalam bagian Head atau Tag <head>
Berikut adalah contoh nya
ini adalah html nya, bisa kita lihat bahwa di bagian tag <head> ada tag <link> nah fungsi ling nya adalah penghubung ke style Css yang kita buat.
dan ini Css yang tadi di simpan secara External.
Dan ini Previewnya
8.Teks Decoring Pada Css
Teks decoring pada Css ini digunakan untuk memberikan gaya pada paragraph atau text yang ingin kita buat di web berikut adalah contohnya
ini adlah kode html nya
Dan ini Css nya.
ini Previewnya
9.Membuat Sebuah Halaman Web dengan menggunakan Styling Utama Css
dan yang terakhir adalah pembuatan sebuah halam web dengan Styling utama Css
berikut adalah hasil dan code nya
Dan Ini Hasiil Previewnya
Demikian Lah Pembahasan CSS Dan Penggunaan Tag Tag yang ada di Css
Sekian dan Terimakasih :)..
Manfaat Dari Css
manfaat utama dari css adalah
kode html lebih sederhana dan lebih mudah diatur.
ukuran file menjdai lebih kecil menjadikan load file lebih cepat.
mudah untuk mengubah tampilan .
dapan berkolaborasi dengan Js Java Script.
Dan dapat digunakan Hampir Di semua jenis Web Browser.
Demikianlah Pnegrtian Singkat dari CSS.
Selanjutnya adalah Beberapa Praktikum Dari CSS Berikut ini..
1.Inline Css
Ya ini adalah Inline Di css tag <style> css di atas digunakan untuk memberikan langsung pada tag html kita.
ini adlah hasil preview nya
Bisa kita lihat hasil nya ,, pada tulisan di atas ada bayangan pada textnya warna pink ,, bayangan tersebut bisa kita gunakan dengan menambah atribut Text-Shadow: di dalam tag <p> secara langsung dengan ukuran yang kita bisa sesuaikan.
2.Embede dengan Class Dan Id 1
Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id.
Seperti kita lihat kodingan di atas pada tag <style> ada #BhsIndo dan di dalam nya ada Declaration yang berfungsi sebagai pengatur style dari #BhsIndo seperti contoh di atas dan sebagai pembeda supaya ketika kita mengubah Style nya itu tidak akan salah.
Css ini adalah secara internal Atau di gabung langsung dengan html kode nya.
Hasil Previwnya
dan ini adalah hasil previewnya.
3.Embeded Dengan Class dan Id 2
Pada Embeded 2 Ini Adalah pengimplementasian dari Embeded 1
ini adalah Hasil preview nya
Berkut ini adalah Penggunaan Class id, dan Css secara file terpisah atau tidak tergabung dengan html code nya
berikut contoh code nya
yang di atas ini adalah hmtl nya saja
Dan ini adalah Css nya Secara External atau yang tadi yaitu Beda file dengan Html nya
Ini Previewnya
5.Embede Heading Color
Fungsi utama dai Embed ini adalah sebagai Pemberi warna Pada Heading yang ingin kita buat
Berikut contohnya
Dan ini Previewnya
Selanjutnya Adalah penggunaan Css untuk Format Text yaitu text bisa kita rumah posisi dan texk bisa kita rumah menjadi huruf kapital, besar dan kecil dengan penggunaan tag tag html dan Css Berikut contoh nya
ini preview nya
7.Format Karakter & Spacing With Css External
Yang berikut ini adalah format Karakter dan Spacing , jadi kegunaan Spacing Kita bisa mengubah Jarak antar Huruf atau mengubah ukuran spacing menjadi jauh atau denkat dengan keinignan kita sendiri.
Saya menggunakan External Css Atau Css nya Beda file
untuk Beda File kita bsa menggunakan tag <link> di dalam bagian Head atau Tag <head>
Berikut adalah contoh nya
ini adalah html nya, bisa kita lihat bahwa di bagian tag <head> ada tag <link> nah fungsi ling nya adalah penghubung ke style Css yang kita buat.
dan ini Css yang tadi di simpan secara External.
Dan ini Previewnya
8.Teks Decoring Pada Css
Teks decoring pada Css ini digunakan untuk memberikan gaya pada paragraph atau text yang ingin kita buat di web berikut adalah contohnya
ini adlah kode html nya
Dan ini Css nya.
ini Previewnya
9.Membuat Sebuah Halaman Web dengan menggunakan Styling Utama Css
dan yang terakhir adalah pembuatan sebuah halam web dengan Styling utama Css
berikut adalah hasil dan code nya
Dan Ini Hasiil Previewnya
Demikian Lah Pembahasan CSS Dan Penggunaan Tag Tag yang ada di Css
Sekian dan Terimakasih :)..
Komentar
Posting Komentar