Cascading Style Sheets (CSS) merupakan bahasa pemrograman yang digunakan untuk menentukan bagaimana dokumen dan website akan disajikan. CSS berisi kumpulan perintah yang digunakan untuk menjelaskan tampilan halaman situs web dalam mark-up language.CSS hadir sebagai pemisah konten dari tampilan visualnya di situs dan berpengaruh pada tampilan sebuah website.
A. Hubungan HTML dengan CSS
HTML (hypertext mark up language) merupakan bahasa pemrograman yang paling sering digunakan dalam pembuatan website. HTML merupakan sesuatu yang berada di balik layar tampilan halaman web yang sehari-hari diakses oleh pengguna. Tanpa kehadiran HTML, tampilan web tentunya akan berantakan.
Lalu, CSS dan HTML memiliki keterikatan satu sama lain. CSS merupakan kode-kode yang dipakai untuk mendesain laman HTML. Bila diibaratkan dengan bahasa awam, HTML dapat dikatakan sebagai handphone dan CSS adalah casing yang akan membuat handphone terlihat semakin cantik.
CSS berfungsi untuk membantu agar dapat mengubah dan menambahkan, baik teks, gambar, hingga latar belakang sebuah halaman HTML.
Diantara kegunaan CSS pada website:
- Loading halaman website menjadi lebih cepat
- Web akan memiliki Beragam variasi style tampilan
- Dengan menggunakan CSS, tampilan halaman website akan lebih rapi dan optimal di berbagai ukuran layar pengguna, baik itu desktop maupun smartphone
B. Jenis-Jenis CSS
CSS dibagi menjadi beberapa macam
Inline Style CSS merupakan kode yang dituliskan di dalam file HTML dan menggunakan elemen spesifik yang memuat tag <style>. Jenis CSS ini hanya mempengaruhi satu baris kode HTML dan harus menempel pada elemen tulisan tersebut.
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com - CSS Inline</title>
</head>
<body>
<p style="color: red"> Tulisan Berwarna merah </p>
<p style="color: #40e02b59"> Tulisan dengan kode warna #40e02b59</p>
<p style="font-weight: bold"> Tulisan ini dicetak tebal </p>
</body>
</html>Internal CSS merupakan kode yang dituliskan pada bagian header file HTML. jenis ini terkadang membuat loading menjadi semakin lama..
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com - CSS Internal</title>
<style type="text/css">
.contoh_01 {
color: #cccf00;
text-align: Left;
font-size: 20px;
}
.contoh_02 {
color: rgb(221, 24, 34);
text-align: Left;
font-size: 20px;
font-family: arial;
}
</style>
</head>
<body>
<p class='contoh_01'>Tulisan disini diatur dengan class contoh_01</p>
<p class='contoh_02'>Tulisan disini diatur dengan class contoh_02</p>
<p> Tulisan ini tidak mengikuti class apapun </p>
</body>
</html>External CSS merupakan kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. untuk mengatur file pada HTML, digunakan file lain yang berextensi css.
CSS – external.html
<!DOCTYPE HTML>
<html>
<head>
<title>www.syaiflash.com - CSS external</title>
<link rel="stylesheet" href="CSS - external.css">
</head>
<body>
<p class='external_01'>Tulisan disini diatur dengan class external_01 pada file CSS - external.css</p>
<p class='external_02'>Tulisan disini diatur dengan class external_02 pada file CSS - external.css</p>
</body>
</html>CSS – external.css
.external_01 {
color: #cccf00;
text-align: Left;
font-size: 20px;
}
.external_02 {
color: rgb(221, 24, 34);
text-align: Left;
font-size: 20px;
font-family: arial;
}
Leave a Reply