Scribd
Unggah
9 tayangan10 halaman

CSS Dasar Part1

Css dasar part 1

Diunggah oleh

Ariya Molana
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
9 tayangan10 halaman

CSS Dasar Part1

Css dasar part 1

Diunggah oleh

Ariya Molana
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

BAB 3: DASAR CSS

Capaian Pembelajaran (Learnig Outcome) :


Diharapkan para pembaca mampu menjelaskan tentang
pengetahuan dasar mengenai pengembangan Aplikasi
Web serta implementasi dasar untuk mempercantik
tampilan web menggunakan script Cascading Style Sheet
(CSS).

Tujuan Instruktsional Umum :


Pembaca diharapkan mampu menjelaskan secara teori
pengetahuan dasar mengenai Internet dan
Pengembangan Aplikasi Berbasis Web untuk
mempercantik tampilan web menggunakan script
Cascading Style Sheet (CSS) meliputi: teknik penulisan,
penggunaan selector, box model, background image dan
color

Tujuan Instruksional Khusus :


1. Menjelaskan pengertian Cascading Style Sheet
(CSS).
2. Menerapkan teknik penulisan script pada Cascading
Style Sheet (CSS).
3. Menerapkan teknik pembuatan box model serta
atribute pelengkapnya.
4. Menerapkan teknik penggunakan background image
dan color.

A. PENGENALAN
CSS merupakan kependekan dari Cascading Style Sheet
yaitu suatu skrip yang digunakan untuk mempercantik
tampilan HTML atau mengatur bagaimana elemen HTML
ditampilkan, seperti menentukan posisi, background, warna
dan sebagainya.

44
B. DASAR-DASAR CSS
1. Penulisan CSS
Ada tiga cara menuliskan CSS, yaitu inline, internal dan
external. Ketiganya dapat Anda gunakan sesuai dengan
kebutuhan. Berikut penjelasan masing-masing metode dalam
penulisan CSS:
a. Inline
Yaitu menuliskan CSS dengan menggunkan atribut style
yang langsung dituliskan di dalam tag HTML.

Gambar 3.1 script inline

Gambar 3.2 hasil inline


b. Internal
Yaitu penulisan CSS menggunakan tag <style> ... </style>
yang ditulis di dalam tag <head> ... </head>.

45
Gambar 3.3 script internal

Gambar 3.4 hasil internal


c. External
Yaitu penulisan CSS dimana skrip CSS disimpan dalam file
tersendiri dengan extensi .css dan terpisah dengan file HTML.
Untuk menghubungkan file HTML dan file CSS, file CSS
dipanggil di dalam tag <head> ... </head> pada file HTML
seperti berikut:
<link rel=”stylesheet” href=”nama_file.css”>

46
Skrip HTML

Gambar 3.5 script html external


Skrip CSS

Gambar 3.6 script css external

Gambar 3.7 hasil external

47
2. Selector
Selector adalah sebuah kata yang digunakan untuk memilih
elemen HTML tertentu yang akan dimodifikasi dengan skrip
CSS. Ada tiga macam selector dalam penulisan CSS yaitu
selectot tag, selector class, dan selector id.
a. Selector tag
Yaitu selector dengan menyebutkan secara langsung nama
tag HTML yang ingin dipercantik dengan CSS. Penyebutan
tag HTML tanpa disertai tanda <>, cukup ditulis nama tagnya
saja.

Gambar 3.7 script selector tag

Gambar 3.8 Selector tag

48
b. Selector class
Yaitu selector dengan menyebutkan nama class dari suatu
tag yang ingin dimodifikasi dengan CSS. Penyebutan nama
class diserta titik (.) sebelum nama class. Selector ini lebih
spesifik daripada selector tag.

Gambar 3.9 script selector class

49
Gambar 3.10 Selector class

c. Selector id
Yaitu penulisan selector dengan menuliskan nama id dari
elemen HTML yang akan dimodifikasi dengan CSS.
Penulisan nama id disertai dengan tanda pagar (#) sebelum
nama id. Satu nama id hanya bisa digunakan oleh satu
elemen HTML. Selector ini adalah yang paling spesifik dari
dua selector yang lain.

50
Gambar 3.11 script selector id

Gambar 3.12 selector id

51
Dalam penulisan selector, kita dapat menggabungkan
beberapa selector menjadi satu, jika elemen yang dipilih
memiliki sifat-sifat yang sama.

Gambar 3.13 scritp penggabungan selector

Gambar 3.14 Penggabungan selector

52
Selain menggabungkan beberapa selector, kita juga
menuliskan selector dengan lebih spesifik dengan memilih
elemen yang berada di dalam tag tertentu saja.

Gambar 3.15 script selector spesifik

Gambar 3.16 selector lebih spesifik

53

Anda mungkin juga menyukai