Home » Kuliah IT » Pemrograman » 3 Jenis Tag CSS dan Fungsinya Lengkap dalam Pembuatan Website

3 Jenis Tag CSS dan Fungsinya Lengkap dalam Pembuatan Website

by Elang Hendy Subrata
by Elang Hendy Subrata

Di dalam bahasa pemrograman, ada istilah yang seing didengar atau bahkan harus dikuasai oleh programmer. Istilah tersebut adalah CSS. CSS sendiri merupakan sebuah singkatan dari Cascading Style Sheet. Bisa dikatakan peran CSS sangat penting untuk pengaturan tampilan pada sebuah website. Apabila Anda sering melihat tampilan setiap website itu berbeda-beda, maka hal tersebut tidak terlepas dari peran CSS.

Nah, CSS sendiri memiliki tagnya masing-masing yang memiliki berbagai macam fungsi. Untuk mengetahui lebh jauh apa saja tag CSS yang selama ini dipakai pada HTML, berikut ulasan lengkapnya.

Jenis Tag pada Font

Fungsi dari Font Size ini adalah untuk mengubah ukuran huruf yan sesuai dengan keinginan pengguna ataupun programmer. Contohnya saja, font-size: small;

Nah, maksud “small” yang ditulis tersebut adalah kita menggunakan ukuran font atau huruf kecil. Jika kita ingin mengubah semua huruf dengan kapital, maka kita tinggal ganti kata “small” dengan “medium” atau “large”. Jika Anda ingin mengubah ukuran huruf yang lebih spesifik lagi, maka kita tinggal gunakan kode “[angka]px”. Artinya kita bisa tulis angkanya sesuai dengan keinginan. Misalnya, Anda ingin mengisinya dengan angka 5, maka tinggal tulis saja “5px”. Secara otomatis, angka pun akan berubah menjadi seukuran 5 pixel.

Fungsi dari font family ini adalah mengubah jenis huruf yang digunakan pada website yang akan dibuat. Untuk penulisan kodenya sendiri Anda bisa menulisnya seperti ini: font-family:Arial;

Seperti yang kita lihat bahwa jenis huruf yang digunakan adalah Arial. Kita juga dapat mengubah font sesuai dengan keinginan seperti Sans Serif, Times New Roman, Comic Sans, dan lain-lain. Perlu diperhatikan bahwa penulisan nama jenis hurufnya harus benar. Jika Anda salah dalam menulis jenis hurufnya, maka fungsi CSS tidak akan berjalan.

  • Text Align

Text Align memiliki fungsi untuk pengaturan tata letak pada sebuah teks atau juga sebuah kalimat di dalam website. Cara penulisan kodenya sendiri tidak jauh berbeda dengan sebelum-sebelumnya, yakni text-align: center;

Kita bisa lihat bahwa maksud “center” dalam kode tersebut merujuk pada kalimat kalimat atau teks dibuat pada bagian tengah. Jika Anda ingin tulisan dibuat rata kiri, maka Anda tinggal ganti kata “Center” menjadi “Left”. Begitu juga dengan rata kanan yang tinggal ditulis dengan “Right”.

  • Margin

Mungkin Anda pernah mendengar soal margin ini di Microsoft Word. Ternyata margin pun juga ada di dalam tag CSS. Hampir Sama dengan fungsi margin pada Microsoft Word, Margin pada tag CSS ini memiliki fungsi pemberian jarak antara objek yang satu dengan objek yang lain. Margin sendiri memiliki empat jenis. Pertama adalah margin-top, margin-left, margin-right, dan margin-bottom. Keempat jenis margin ini dapat digunakan sesuai dengan kebutuhan.

  • Padding

Padding pada tag CSS sebenarnya hampir sama fungsinya. Hanya saja pada padding ini, pengaturannya lebih banyak ke bagian seleksi batas jarak bagian dalam. Contohnya saja jarak antara Header dengan batas tepian Header. Kalau dirtuliskan dalam kode, maka hasilnya seperti ini: padding:5px;

Maksud dari “5px” itu adalah adalah jarak header dengan batas bagian tepinya adalah 5 pixel ke dalam. Anda dapat mengubah jumlah pixelnya sesuai dengan kebutuhan.

Jenis Tag Background

  • Background Image

Jenis tag pada background ini memiliki fungsi sebagai kode untuk memunculkan bacground dalam bentuk gambar. Agar tampulan gambarnya dapat muncul dengan baik, maka Anda harus memasukan link gambarnya. Pada bagian ini, Anda harus memiliki situs sendiri untuk menyimpan gambar sesuai dengan kebutuhan.

Background repeat ini memiliki fungsi untuk mengulang gambar pada halaman. Dengan adanya tag ini, Anda dapat melakukan variasi gambar sesuai dengan kebutuhan jika gambar yang dimasukan lebih dari satu. Untuk dapat melakukan pengulangan, ada tiga jenis kode yang dimasukan. Kode pertama adalah Repeat-x yang berfungsi mengulang gambar pada sumbu x, Repeat-y yang memiliki fungsi mengulang gambar pada sumbu y, dan no-repeat yang memiliki fungsi gambar tidak akan diulang dan hanya muncul satu gambar saja.

Jenis Tag Border

  • Border

Border pada tag CSS ini memiliki fungsi untuk memberikan garis tepi. Nantinya, garis tepi bisa ditentukan sesuai dengan keinginan. Bisa diubah menjadi lebih tebal hingga terputus-putus. Contohnya aja border: 1px solid blue;

Maksud dari “1px” tersebut adalah ukuran garis tepi yang dibuat sekitar 1 pixel saja. Arti “solid” yang ditulis di atas adalah garis yang dibuat tidak terputus. Sedangkan maksud “blue” yang ditulis tersebut adalah warna garis yang dibuat adalah warna biru. Pada ketiga hal tersebut, Anda bisa menggantinya sesuka hati.

Itulah beberapa tag CSS dan fungsinya dalam pembuatan sebuah website. Jika Anda ingin mempelajari lebih jauh mengenai website, Anda bisa pelajari terlebih dahulu perintah dasar HTML, perintah dasar Javascript, fungsi bahasa pemrograman, hingga memahami contoh bahasa pemrograman tingakt menengah. Semoga artikel ini dapat memberikan manfaat untuk pembaca semuanya.  

You may also like