Pengenalan kepada CSS - Coders for SK Taman Tampoi Utama JB

Dalam setiap laman web, html dimuatkan dengan CSS atau Cascade Style Sheet. CSS digunakan untuk menyusun, mengubah atau menghias penampilan sesuatu laman web. CSS dapat menjadikan sesuatu laman web menjadi lebih menarik dan tersusun mengikut kehendak pereka laman web.

Terdapat tiga cara untuk memasukkan CSS ke dalam html. Iaitu:

External
Embed
Inline

1. External CSS

Dengan menggunakan external CSS, seluruh rupa laman web dapat diubah dengan satu fail sahaja!

Fail html yang dibuat mestilah memasukkan rujukan kepada fail CSS yang ingin digunakan.

Contoh:

External CSS juga boleh ditulis dalam notepad. Fail itu perlu disimpan dengan meletakkan hujungnya ".css". Contohnya myStyle.css. Dalam CSS pula akan dimasukkan arahan seperti berikut:

body {
    background-color: lightblue;}

h1 {
    color: navy;
    margin-left: 20px;}

2. Embed

CSS embed boleh digunakan jika satu page atau halaman laman web mempunyai gaya yang berbeza daripada halaman-halaman lain dalam laman web. CSS embed boleh digunakan dengan memasukkan <style> di dalam bahagian <head> pada halaman HTML:

<head>
<style>
body {
    background-color: linen;}

h1 {
    color: maroon;
    margin-left: 40px;} </style>
</head>

3. Inline CSS

Inline CSS boleh digunakan untuk mengubah gaya atau penampilan bagi satu elemen yang dihendaki sahaja.

Untuk menggunakan Inline CSS, menambah atribut gaya untuk elemen yang berkaitan. Sifat gaya boleh mengandungi apa-apa harta CSS.

Contoh di bawah menunjukkan bagaimana untuk menukar warna dan margin sebelah kiri untuk elemen <h1> menggunakan inline CSS:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>