Pengertian CSS(Cascading Style Sheet) dan fungsinya

Pengertian CSS dan Fungsinya – Cascading Style Sheet atau yang sering biasa disebut dengan CSS merupakan kumpulan kode program yang tidak bisa dipisahkan dari bahasa pemrograman HTML. Kenapa tidak bisa dipisahkan? Karena untuk pengaturan sebuah website yang berdasarkan pada bahasa pemrograman HTML, CSS berperan cukup besar dalam memberikan gaya dan mengatur seluruh komponen yang ada pada tampilan sebuah website tersebut.

CSS membantu mengembangkan sebuah tampilan website agar terlihat lebih indah dan menarik. CSS juga dapat mengatur dekorasi website kalian, semisal untuk pengaturan ukuran teks, warna, jarak margin antar sisi, dan lain sebagainya.

Daftar Isi

Fungsi CSS

e.
Fungsi sebuah file CSS pada halaman website merupakan hal yang sangat penting. Dengan adanya file CSS maka dapat membedakan antara konten atau style/tampilan dengan dokumen website itu yang dirancang. CSS sangat berperan untuk membuat website menjadi lebih ramah terhadap pengguna karena tidak hanya sebatas text yang monoton.

Penulisan kode program CSS

Dalam CSS, terdapat beberapa aturan yang dapat membuat kode program CSS itu sendiri berjalan, diantaranya adalah:

1. Set Properti.

Set Properti yang dimaksud adalah nilai atau value yang ingin diberikan pada bagian tertentu website. Misal jika kalian ingin memberikan warna merah pada teks di website kalian, warna merah inilah yang berperan menjadi set propertinya.

2. Selektor.

Selector pada CSS berfungsi untuk menentukan pada bagian mana komponen website kalian akan diubah. Sebagai contoh kalian ingin membuat paragraf menjadi rata kiri, maka dalam hal ini paragraf lah yang berperan menjadi selektor. Ingat, penerapan selektor berperan sangat penting.

Jangan sampai kalian salah dalam mengatur selector pada CSS jika tidak ingin tampilan website menjadi berantakan.

Berikut kami berikan contoh kode program pada HTML yang telah dilengkapi CSS.

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
H1{
color: blue;
background-color: yellow;
border: 1px solid black;
}
P {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS </p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My CSS experiment</title>

<style>

H1{

color: blue;

background-color: yellow;

border: 1px solid black;

}

P {

color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first CSS </p>

</body>

</html>

Pada tampilan website kode program diatas apabila dijalankan tampilannya akan menjadi:
cara kerja css
1. Tulisan “Hello Word!” akan berukuran cukup besar, tulisan berwarna biru dan memiliki border hitam tebal, serta mempunyai background berwarna kuning.

2. Paragraf “This is my first CSS” akan berwarna merah.

Cara kerja css

Cara Kerja CSS itu terlihat sederhana dan mudah dipahami, Hanya dengan menulis sebuah style CSS(selector id maupun class) maka secara otomatis dapat bekerja pada sebuah dokumen html. Sebuah tag HTML mencari sebuah selektor tertentu dan menampilkannya di web browser. Misalnya terdapat class dengan nama wrapper maka halaman html akan mencari properti class wrapper.

Fungsi CSS

Penulisan kode program CSS

Cara kerja css

Related Posts