Modul 5

Hello CSS

Tujuan :

1. Praktikan memahami penggunaan CSS dalam HTML

2. Praktikan mampu mengaplikasikan dan membuat CSS

Intro :

CSS (cascadeing style sheet) adalah bahasa yang digunakan untuk mengatur
tampilan sebuah dokumen yang ditulis dalam bahasa markup. Nama dari CSS didapat
dari fakta bahwa setiap deklarasi style yang berbebda daapat diletakkan secara
berurutan, yang kemudian akan membentuk hubungan parent – child pada setiap style.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda
untuk cara penyajian yang berbeda pula. CSS bisa juga diartikan secara mudah sebagai
cara meletakkan styles pada layer yang berbeda.

Pendesainan dilakukan dengan mendefenisikan font, color, margin, background,font

sizes, spacing dll yang elemen-elemen tersebut di namakan styles.

5.1 Struktur :

Format :

Selector { Property : Value ; }

Contoh :

H2 { Background-color : blue ; }

5.2 Penempatan CSS :

5.2.1 Inline

Diletakkan langsung didalam tag HTML yang ingin diubah stylenya.

5.2.2 Embedded

Kode CSS diletakkan diantara tag head.

5.2.3 External
Ditulis dalam satu file yang terpisah dengan file HTML yang memiliki akhiran atau
berekstensi “.css”

5.3 Menggunakan CSS

5.3.1 Pengaturan Font :

CSS dapat memanipulasi font jika pada tag memiliki teks, contoh : <h1>, <a>, <li>, td
dan tag lainnya.

Poperty :

Property Value
Font-family Jenis font
Font-size Format : px,em,pt
Font-style Oblique, italic, normal
Font-variant Normal,small-caps
Font-weight Normal, bold, bolder,100-900

5.3.2 Mengatur Color dan background

Tag Body merupakan contoh tag yang dapat di manipulasi oleh CSS.

Property :

Property Value
Background-color Kode warna, atau nama warna
Background-image url gambar
Background-attachment Fixed, scroll, inherit
Backround-repeat Inherit, repeat, No.-repeat, repeat-x, repeat-y
Background-position Bottom, center, left, right, top, inherit
Color Kode warna

5.4 Jenis-Jenis Basic Selector

Selector berfungsi untuk mencari suatu tag dalam HTML.

5.4.1 Universal selector

Berfungsi untuk mencari semua tag.

Format : “ * { efek }” (bintang).

5.4.2 Tag Selector

Berfungsi mencari sebuah tag yang sejenis dalam html.

Format :

“tag html { efek }”.

5.4.3 Class Selector

Berfungsi mencari seluruh tag yang memiliki atribut class dengan nilai yang ditentukan.

Format :

“.class { efek } ”.

5.4.4 Ide Selector

Berfungsi mencari seluruh tag yang memiliki atribut id dengan nilai yang ditentukan.

Format :

“#id { efek }”.

5.4.4 Atribut Selector

Berfungsi mencari seluruh tag yang memiliki atribut yang ditentukan.

“[atribut] {efek}”. Bisa juga “[atribut=”nilai”] {efek}”.