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

InlineStyle CSS digunakan langsung di dalam tag HTML
$E:\Semester 2\Pmrograman Web\modul-3-css-dasar\images\2.jpg$
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$
Eksternal LinkSemua deklarasi disatukan dalam satu file *.css. Cara memanggil file css di dalam html :

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 :

Ini contoh penggunaan selector class.

Multiple Classes

Penggunaan class yang lebih dari satu pada saat pemanggilan.

.rataKanan {
text-align:right;
}

.warnaMerah {
color:red;
}

Pemanggilan di HTML

ini contoh pemanggilan kelas lebih dari satu.

Contoh hasilnya:

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

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

#[ID Name] {
property:value;
…
}

contoh :

#footer {
color:blue;
}

Pemanggilan di HTML

Berikut ini contoh penggunaan selector id.

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.

Share this:

Related posts:

Leave a Reply Cancel reply