Pengenalan CSS, Script Untuk Mempermudah Programmer Dalam Mempercantik Penampilan Website

Niguru.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:

<style>

body_atau_tag{properti;}

</style>

Misalnya:

<style>

body{background-color:cadetblue;}

</style>

Contoh bila digunakan pada HTML:

<style>

body{background-color:cadetblue;}

</style>

<h1>Belajar CSS</h1><br>

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:

<style>

body{background-color:cadetblue;

font-family:tahoma;

color:white;}

</style>

<h1>Belajar CSS</h1><br>
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 <h1>, dan penutup </h1>, berikut ini contohnya:

<style>

body{background-color:cadetblue;

font-family:tahoma;

color:white;}

h1{color:orange;}

</style>

<h1>Belajar CSS</h1><br>
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 <abc> </abc> buatan sendiri, digunakan untuk memperbesar font:

<style>

body{background-color:cadetblue;

font-family:tahoma;

color:white;}

h1{color:orange;}

abc{font-size:40px;}

</style>

<h1>Belajar CSS</h1><br>

<abc>

Ini halaman web setelah pengaturan CSS

</abc>

 

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)