Pengenalan kepada CSS

Salam Jumaat semua,

Hari ni kita masuk topik baru iaitu CSS. Jadi apa itu CSS? Nama panjang CSS adalah Cascading Style Sheets (aku pun tak tau nak terjemah bahasa macam mana), fungsi utamanya untuk menterjemah/mentafsir HTML yang kita buat dalam bentuk yang kita mau contohnya untuk laman web kita nak header <h1> warna merah dan font type times new roman.

Ada beberapa cara nak buat CSS samada kita nak :

1. Inline (Satu baris dengan tag)

contoh : <h1 style="color:red">TAJUK APA-APA</h1>

2. Internal (Kita letak setempat dalam satu tag sendiri)

contoh : 
<style>
  h1 {
     color : red;
  }
</style>

3. External (Buat fail lain kat luar, lepas tu kita import masuk dalam HTML, dalam kes aku fail aku nama “styleAku.css”)

contoh : <link rel="stylesheet" type="text/css" href="styleAku.css">

Korang dah nmpkkan contoh yang aku bagi, tapi dalam kes kita aku nak fokus pada penggunaan Internal punya CSS style. Nanti dah maju hampa boleh la nak cuba guna external yang mana aku sngat2 sarankan.

Macam biasa, kita mula dengan sublime text atau notepad++ kita (kalau nak muat turun, tekan link).

Rujuk gambar bawah :

Source_Code

Contoh mudah cara penggunaan CSS

Macam yang kita boleh tengok, aku dah set body dia kena ada warna latar mcm biru2 sikit, hampa mesti x fahamkan awat dengan kod warna tu. Tu nama dia kod warna untuk HTML, kalau warna biasa2 hampa boleh letak truih ja lagutu, kalau ada warna yang khusus hampa boleh rujuk kat sini.

Aku dah set semua <h1> (header) warna merah, <b> (bold) warna biru, dan <p> (paragraph) saiz 30px. Kat bawah contoh paparan dalam pelayar :

Dengan

Contoh paparan pelayar Firefox

Cantikkan? 😆  (perasan)

Ok la fine, x berapa cantik tapi aku rasa elok la sikit daripada kosong ja kalau tak dak CSS. Kat bawah contoh kalau tak letak CSS

Tanpa

Contoh paparan tanpa CSS

Nampak?

Hampa cuba dulu kat komputer hampa boleh dak. Kalau boleh tahniah!

Sebenarnya bukan tu saja fungsi CSS, sebenarnya banyak lagi. Contohnya hampa boleh set kalau arrow/mouse hover (lalu ataih) dekat mana2 bahagian dalam HTML hampa dia boleh tukar2 warna. Menarik kan????

Untuk minggu ni hampa main2 dulu sambil2 hampa rujuk sumber ni.

Minggu depan kita buat latihan sikit sambil sentuh semua bahagian asas CSS termasuk fungsi yang aku cakap boleh tukar2 warna tuh.

Lepas saja latihan kita akan mula masuk PHP… nantikan!!! 😉

Hingga berjumpa lagi minggu depan. Wassalam…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s