The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Home Explore E-Book 2
View in Fullscreen

E-Book 2

Like this book? You can publish your book online for free in a few minutes!
Download PDF
Share

Related Publications

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by informasi, 2020-10-20 08:23:46

E-Book 2

E-Book 2

Buku Pegangan Peserta
Kelas Pelatihan Untuk Membuat Website

Pembuatan Website
(Front – End)

MEMAHAMI
CASSADING STYLE SHEET

Chapter 2 3

CSS (Cassading style sheet)

· Pengenalan CSS
· Mengenal Syntax CSS
· Mengenal jenis-jenis penulisan CSS
· CSS Selector
· Mengenal CSS lebih dalam

Property of PT Clevio

Coding atau pemrograman, adalah aktifitas menciptakan program
computer. Menurut Bill Gates, pendiri Microsoft, “belajar menulis
program itu memperluas daya piker, membantu kita berpikir lebih
baik, menciptakan cara berpikir yang bermanfaat disemua bidang.
Berangkat dari motivasi bermain game, siswa-siswi Clevio Coder
Camp diajak menciptakan games/aplikasi yang baik dan
bermanfaat bagi orang lain.

Property of PT Clevio 4

Pengenalan CSS
Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet. Sebuah Bahasa
Komputer yang digunakan untuk membuat tampilan pages Web menjadi
lebih bagus dan eye catching.

Property of PT Clevio 5

Mengenal syntax CSS

Syntax

Pengertian syntax

Sintaks adalah sebuah aturan penulisan script agar dapat dibaca
oleh komputer.

Property of PT Clevio 6

Contoh syntax

Property of PT Clevio 7

Mengenal jenis-jenis penulisan CSS

Perbedaan CSS inline, internal & external

Inline

A. Pengertian
berada di dalam tag atau element HTML.

B. Contoh

Property of PT Clevio 8

Internal

A. Pengertian
berada pada struktur html didalam tag <head>.

B. Contoh

Property of PT Clevio 9

External

A. Pengertian
berada di file yang berbeda.

B. Contoh

Property of PT Clevio 10

CSS Selector

Mengenal CSS Selector

Pengertian

Selektor adalah kata kunci dan simbol yang digunakan
pada CSS untuk menyeleksi atau memilih elemen HTML
yang ingin di edit.

Property of PT Clevio 11

Jenis – jenis Selector

1 Selector ID dilambangkan dengan
symbol (#)

2 Selector Class dilambangkan dengan
symbol ( . )

Property of PT Clevio 12

Contoh
1 Selector ID

Property of PT Clevio 13

2 Selector Class

Property of PT Clevio 14

Mengenal CSS lebih dalam

Pengertian

CSS Background digunakan untuk mengubah atau mengatur
tampilan keseluruhan background pada Website.

Property of PT Clevio 15

Jenis – jenis Background pada css

1 Background-color

mengubah warna Background.

Property of PT Clevio 16

2 Background-image

membuat image menjadi Background.

Property of PT Clevio 17

3. Background-position

mengatur posisi Background

Property of PT Clevio 18

4. Background-attachment

mengatur image menjadi fixed atau scroll
background.

Property of PT Clevio 19

CSS Height dan Width 20

A. Pengertian

Height dan width berfungsi untuk mengatur panjang
dan lebar element content.

1 CSS Size Style

a. auto, otomatis mengatur ukuran sesuai Brower.
b. length, mengatur ukuran dalam px & cm.
c. % (Percent), mengatur ukuran dalam persen.

Property of PT Clevio

B. Contoh

Property of PT Clevio 21

CSS Box Model
 Gambar

Property of PT Clevio 22

A. Margin

Digunakan untuk mengatur space atau jarak element HTML (Atas, Bawah, Kanan, & Kiri)

bagian luar border sebuah element.

1 Margin-top
mengatur jarak atau space atas.

2 Margin-bottom
mengatur jarak atau space bawah.

3 Margin-right
mengatur jarak atau space kanan.

4 Margin-left
mengatur jarak atau space kiri

Property of PT Clevio 23

Contoh Margin

Property of PT Clevio 24

B. Padding 25

digunakan untuk mengatur space atau jarak element
HTML (atas, bawah, kanan, & kiri) bagian dalam border
sebuah element.

1 Padding-top
mengatur jarak atau space atas.

2 Padding-bottom
mengatur jarak atau space bawah.

3 Padding-right
mengatur jarak atau space kanan.

4 Padding-right
mengatur jarak atau space Kiri.

Property of PT Clevio

Contoh Padding

Property of PT Clevio 26

C. Border 27

di gunakan untuk mengubah tampilan
dari border table atau garis.

1 Border-width
mengatur ketebalan pada border

2 Border-color
mengubah warna pada border..

3 Border-side
mengatur border atas, bawah, kiri,
& kanan.

4 Border-radius
mengatur sisi border agar tidak
lancip.

Property of PT Clevio

Contoh Border

Property of PT Clevio 28

Menu Navigasi 29

· Pengertian

Digunakan untuk mempermudah user untuk perpindahan page satu dengan
page lainya yang saling berhubungan.

· Jenis - jenis Navigasi
1 Top NavMenu
Navigation Menu yang posisinya
berada dibagian header bagian
content HTML.

2 Side NavMenu
Navigation Menu yang posisinya berada dibagian header
bagian content HTML.

Property of PT Clevio

A. Top Navigator

Script html

Property of PT Clevio 30

Script CSS Selector Class Navigator

Property of PT Clevio 31

a). Overflow: hidden 32

Berfungsi untuk mengatur Menu
Navigasi untuk tidak menampilkan
content yang berlebih.

b). Background-color

Berfungsi untuk mengubah warna
Background pada Menu Navigasi.

Property of PT Clevio

Script CSS Selector Class Navigator (menu “a”)

Property of PT Clevio 33

a). Float 34

Berfungsi agar text di posisi kiri.

b). Color

Berfungsi untuk warna untuk text.

c). Text-align

Berfungsi agar posisi text berada di
tengah.

d). Padding

Berfungsi untuk mengatur jarak antara menu

e). Font-size

Berfungsi untuk warna untuk text.

f). Text-align

Berfungsi atur mengatur ukuran text

Property of PT Clevio

Script CSS Selector (hover)

Property of PT Clevio 35

a). hover

Berfungsi untuk mengatur content Navigation Menu ketika
menyentuh mouse pointer akan berubah warna background
dan juga text.

Script CSS Selector (active)

Property of PT Clevio 36

a). active

Berfungsi untuk mengatur content Navigation Menu
ketika active atau berada pada page yang dipilih akan
merubah warna background dan text.

Property of PT Clevio 37


Click to View FlipBook Version