Modul 3 CSS Dasar

CSS

Adalah Sebuah script yang dapat mengatur dan mengontrol tampilan halaman web serta memisahkan antara tampilan dan konten halaman web.

Berikut adalah salah satu contoh pemanfaatan CSS dalam membuat sebuah animasi sederhana.

Case

Struktur Penulisan CSS

Dalam menggunakan CSS terdapat struktur yang harus anda ikuti, struktur ini digunakan agar browser mengerti apa yang anda ketikan. Berikut ini adalah struktur penulisan sebuah script CSS.

E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\1.jpg

akses CSS

ada 3 cara mengakses CSS yaitu

  1. InlineStyle CSS digunakan langsung di dalam tag HTML
    E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\2.jpg
  2. Internal Link
    Style CSS diletakkan di halaman HTML. Biasanya terdapat di dalam tag <head>
    E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\3.jpg
  3. Eksternal LinkSemua deklarasi disatukan dalam satu file *.css. Cara memanggil file css di dalam html :

<link rel=stylesheet type=”text/css” href=”style.css”>
baris tersebut disimpan di dalam tag head.
E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\4.jpg

Lalu script css dibuat di file lain yang dipanggil oleh file htmlnya. Contoh isi dari file css tersebut adalah sebagai berikut: E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\5.jpg

Class-Id

Setiap style css dibedakan berdasarkan selectornya. Terdapat dua selector yaitu class dan id.

  • class

Class ditandai dengan menggunakan tanda titik ‘.’ sebelum nama selector

.[Class Name] {
property:value;

}

contoh :

.merah {
color:red;
}

Panggil selector :

<p class=”merah”>Ini contoh penggunaan selector class.</p>

Multiple Classes

Penggunaan class yang lebih dari satu pada saat pemanggilan.

.rataKanan {
text-align:right;
}

.warnaMerah {
color:red;
}

Pemanggilan di HTML

<p class=”rataKanan warnaMerah”>ini contoh pemanggilan kelas lebih dari satu.</p>

Contoh hasilnya:

E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\6.png

  • id

Penggunaan id ditandai dengan memakai tanda ‘#’. Syntax nya :

#[ID Name] {
property:value;

}

contoh :

#footer {
color:blue;
}

Pemanggilan di HTML

<p id=”footer”>Berikut ini contoh penggunaan selector id.</p>

Contoh hasilnya:

E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\9.png

  • Class Vs Id

Id selector hanya dapat digunakan sekali pada saat pemanggilan di HTML. Class Selector dapat dipanggil berkali-kali di HTML. Perbedaan lain adalah, id selector dapat dipanggil oleh fungsi Javascript getElementById(). Akan dijelaskan pada pertemuan tentang JavaScript.

CSS Text

Digunakan untuk memanipulasi tulisan pada Halaman web.
Pelajari Property & Value pada CSS Text disini.

CSS Font

Digunakan untuk memanipulasi huruf pada Halaman web.
Pelajari Property & Value pada CSS Font disini.

CSS List & Marker

Digunakan untuk memanipulasi list pada Halaman web.
Pelajari Property & Value pada CSS List & Marker disini.

CSS Background

Digunakan untuk memanipulasi Background pada Halaman web.
Pelajari Property & Value pada CSS Background disini.
Pada latihan kali ini kita akan mencoba meletakan gambar sebagai background pada halaman web. sebetulnya gambar tidak hanya dapat diletakkan pada background halaman saja, tetapi juga dapat diletakkan pada background sebuah elemen.

Pseudo class

syntax pseudo class :

selector.class:pseudo-class {property: value}

Biasanya pseudo class digunakan untuk memberikan style pada link atau pada elemen ketika akan berinteraksi dengan kursor (mouseover / klik).

a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {font-size:20; color:#00FF00; text-decoration:underline;}
a:active {color:#FF00FF; text-decoration:underline;}

*Buka Halaman Referensi untuk melihat properti css yang tersedia. Halaman Referensi

Tips & Trik
Jangan Biasakan Menghafal Tag-Tag CSS atau HTML secara langsung. Tapi Biasakan latihan menggunakan tag-tag CSS dan HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *