Tag: CSS

Membuat File CSS Yang Terpisah Dari HTML (External CSS)

www.niguru.comNiguru.com | Niguru.com | Kamis, 5 Nov 2020 | Pada posting sehari sebelumnya, Niguru.com sudah menjelaskan mengenai cara untuk mengatur tampilan website dengan CSS (Cascading Style Sheets). Dengan CSS pengaturan tampilan website bisa dilakukan dengan hanya sekali edit pada area style saja.

Pada posting kali ini Niguru.com akan menjelaskan cara untuk membuat file CSS terpisah (berupa file eksternal), namun tetap memiliki fungsi yang sama dengan file yang menyatu dengan halaman HTML.

Sintaks untuk file CSS eksternal:
body_atau_tag{properti;}
kemudian disimpan dalam file berekstensi (extension) .CSS.
Lebih sederhana bukan? Tidak perlu tag   untuk mengapit script CSS.
Dan sintaks integrasi CSS pada HTML adalah:
Perhatikan cara penulisan dan pembuatan file .CSS pada contoh berikut ini:
body{background-color:black;
font-family:tahoma;
color:white;}
h1{color:orange;}
abc{font-size:40px;}

 

Simpan dengan nama niguru.css (boleh disimpan dengan nama lain):

 

Kemudian contoh untuk HTML:

Belajar CSS

Ini halaman web setelah pengaturan CSS

 

Simpan dengan nama test05.html (boleh disimpan dengan nama lain):

 

Buka browser dan jalankan file test05.html. Hasilnya:

Demikianlah penjelasan cara untuk membuat file CSS secara eksternal, serta cara linking file tersebut pada halaman HTML.
Selamat mencoba .. Have a nice day 🙂

www.Niguru.com (Nino Guevara Ruwano)

Software, Hardware, Electronics, Elektronika, Digital, Microcontroller, Mikrokontroler, Computer, Robotic, Industrial Automation, Visual Basic, Microsoft Access, VBA, Internet, PHP

Pengenalan CSS, Script Untuk Mempermudah Programmer Dalam Mempercantik Penampilan Website

www.niguru.comNiguru.com | Rabu, 4 Nov 2020 | Bagi user yang sudah pernah merasakan menuliskan dan memposting artikel atau sekedar tulisan ringan pada blog, baik menggunakan Blogspot (Blogger) atau WordPress, tentu merasakan bahwa setiap tulisan yang diposting akan mengikuti tema (theme) yang dipilih.

Cara untuk membuat teks mengikuti tema yang dipilih adalah dengan menggunakan CSS (Cascading Style Sheets) yang diselipkan pada halaman website.

Sintaks CSS mirip seperti cara penulisan fungsi pada Javascript atau PHP.
Sintaks CSS yang sederhana adalah:
body_atau_tag{properti;}
Misalnya:
body{background-color:cadetblue;}

Contoh bila digunakan pada HTML:

body{background-color:cadetblue;}

Belajar CSS

Ini halaman web setelah pengaturan CSS

 

Simpan dengan nama test01.html (boleh disimpan dengan nama lain):

 

Buka file test01.html pada browser. Hasilnya:

 

CSS bisa untuk mengatur beberapa properti, misalnya untuk mengatur background, dan warna font, seperti contoh berikut ini:
body{background-color:cadetblue;
font-family:tahoma;
color:white;}

Belajar CSS

Ini halaman web setelah pengaturan CSS

 

Simpan dengan nama test02.html (boleh disimpan dengan nama lain):

 

Buka file test02.html pada browser. Hasilnya:

 

CSS bisa digunakan untuk mengatur tampilan pada tag tertentu saja, misalnya untuk mengatur hanya tag h1, yang biasanya ditulis dengan pembuka

, dan penutup

, berikut ini contohnya:

body{background-color:cadetblue;
font-family:tahoma;
color:white;}
h1{color:orange;}

Belajar CSS

Ini halaman web setelah pengaturan CSS

 

Simpan dengan nama test03.html (boleh disimpan dengan nama lain):

 

Buka file test03.html pada browser. Hasilnya:

 

User /programmer boleh saja membuat tag ciptaan sendiri dan dibuat pengaturan CSS untuk tag tersebut. Misal tag buatan sendiri, digunakan untuk memperbesar font:
body{background-color:cadetblue;
font-family:tahoma;
color:white;}
h1{color:orange;}
abc{font-size:40px;}

Belajar CSS

Ini halaman web setelah pengaturan CSS

 

Simpan dengan nama test04.html (boleh disimpan dengan nama lain):

 

Buka file test04.html pada browser. Hasilnya:

Demikianlah penjelasan mengenai cara memanfaatkan CSS dalam mempermudah programmer mempercantik website.
Semoga penjelasan pada posting ini dapat menambah wawasan dan pengetahuan bagi teman-teman pembaca sekalian.
Selamat beraktivitas .. Have a nice day 🙂

www.Niguru.com (Nino Guevara Ruwano)

Software, Hardware, Electronics, Elektronika, Digital, Microcontroller, Mikrokontroler, Computer, Robotic, Industrial Automation, Visual Basic, Microsoft Access, VBA, Internet, PHP